Admin Panel Proxy Einrichten

Das Anbinden des Admin-Panels auf Ihrer Website ist ein einfacher Schritt

Warum ist das erforderlich

Dies stellt sicher, dass Ihr Bearbeitungserlebnis nahtlos ist. Wenn das Admin-Panel über einen Proxy mit Ihrer Website verbunden ist, können Sie Ihre Website unter derselben URL bearbeiten und erhalten eine visuelle Vorschau der Änderungen in Echtzeit. Außerdem ermöglicht es das Bearbeiten im Overlay, was eine bessere Benutzererfahrung beim Bearbeiten der Webseite bietet.

Erforderliche Schritte

Proxy-Einrichtung (es gibt einige Besonderheiten)

Die Proxy-Einrichtung ist lediglich eine proxy.ts-Datei in Ihrem Projekt, die sich wie eine URL-Umschreibung verhält, damit der /admin-Endpunkt Ihrer Website auf das CMS auflösen kann.

• Für localhost: Sie müssen einen Tunnel verwenden (da das CMS nicht direkt auf localhost zugreifen kann)
• Funktioniert nahtlos auf bereitgestellten Websites

Proxy-Einrichtung

// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';

export const proxy = createCmsProxy({
  upstream: "https://cms.dev.tryprofound.com", // CMS-Admin-Panel
});

export const config = {
  matcher: [
    '/admin',
    '/admin/:path*',
    '/api/:path*',
    '/auth/:path*',
    '/_next/:path*',
    '/((?:.*\\.(?:css|js|map|png|jpg|jpeg|gif|svg|ico|webp|avif|woff|woff2|ttf|eot|txt|xml))$)',
  ],
};

Jetzt können Sie /admin aufrufen, um über Ihre Website auf das Admin-Panel zuzugreifen. Dies ermöglicht eine Live-Vorschau.

Auflösung der Renderer-Suchparameter

Die Overlays werden automatisch verarbeitet. Sie müssen lediglich searchParams an Ihren Renderer übergeben.

// page.tsx
interface PageProps {
  params: Promise<{ slug: string[] }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

So prüfen Sie es

1. Gehen Sie auf Ihrer Website zu /admin
2. Es sollte Sie zur Anmeldung auffordern und unmittelbar das CMS-Admin-Panel öffnen

Overlays und Live-Vorschauen sollten automatisch funktionieren.