Das Einbinden des Admin-Panels in Ihre Website ist ein einfacher Schritt

Warum ist dies erforderlich

Dadurch wird sichergestellt, dass Ihre Bearbeitungserfahrung nahtlos ist. Wenn das Admin-Panel über einen Proxy mit Ihrer Website verbunden ist, können Sie Ihre Website unter derselben URL bearbeiten und in Echtzeit eine visuelle Vorschau der Änderungen anzeigen. Außerdem wird die Overlay-Bearbeitung ermöglicht, die eine bessere Benutzererfahrung bei der Bearbeitung der Webseite bietet.

Erforderliche Schritte

Proxy-Einrichtung (es gibt einige Besonderheiten)

Der Proxy ist eine proxy.ts-Datei in Ihrem Projekt (in Next.js 16; bei älteren Next.js-Versionen ist es middleware.ts). Er verhält sich wie ein URL-Rewrite und leitet die Endpunkte /admin, /api und /auth Ihrer Website an das CMS weiter.

• 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  (Next.js 16 — bei älteren Next.js-Versionen middleware.ts verwenden)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Der CMS-Admin-Ursprung, an den weitergeleitet werden soll.
  upstream: process.env.ADMIN_UPSTREAM_ORIGIN ?? 'https://cms.dev.tryprofound.com',
});

export default async function proxy(request: NextRequest) {
  return cmsProxy(request);
}

export const config = {
  matcher: cmsProxyMatcher,
};

createCmsProxy gibt einen Handler zurück, den Sie mit der eingehenden Anfrage aufrufen. cmsProxyMatcher ist der vorgefertigte Matcher, der /admin, /api, /auth sowie von der Administration stammende /_next- und statische Asset-Anfragen abdeckt – Sie müssen das Matcher-Array also nicht selbst schreiben.

Bei älteren Next.js-Versionen nennen Sie die Datei middleware.ts und exportieren Sie den Handler als middleware anstelle des Default-Exports:

export async function middleware(request: NextRequest) { return cmsProxy(request); } export const config = { matcher: cmsProxyMatcher };

Müssen zusätzliche Pfade weitergeleitet werden? Übergeben Sie additionalPaths: ['/my-path'] an createCmsProxy.

Jetzt können Sie auf Ihrer Website zu /admin gehen, um auf das Admin-Panel zuzugreifen. Dadurch wird die Live-Vorschau aktiviert.

Overlay-Bearbeitung und die Vorschau-Route

Overlays und der Bearbeitungsmodus werden von Ihrer Vorschau-Route gerendert, nicht von der statischen Produktions-Route. Die Administration lädt Ihre Website im Bearbeitungsmodus (?edit_mode=true), und diese Anfrage wird von ParametricRoutePreviewPage auf einer force-dynamic-Route verarbeitet, die searchParams für Sie weiterleitet:

// app/cms-preview_/[...slug]/page.tsx
import { ParametricRoutePreviewPage } from 'cms-renderer/lib/renderer';
import { registry } from '@/lib/registry';
import { cmsConfig } from '@/lib/cms-config';

// Dynamisches Rendering — ermöglicht searchParams für edit_mode
export const dynamic = 'force-dynamic';

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

export default async function PreviewPage({ params, searchParams }: PageProps) {
  const { slug } = await params;

  return (
    <ParametricRoutePreviewPage
      registry={registry}
      apiKey={cmsConfig.apiKey}
      websiteId={cmsConfig.websiteId}
      cmsUrl={cmsConfig.cmsUrl}
      params={Promise.resolve({ slug })}
      searchParams={searchParams}
    />
  );
}

Sie müssen Overlays nicht manuell einbinden – die Übergabe von searchParams an den Vorschau-Renderer ist alles, was erforderlich ist. Ihre Produktions-Route (`app/[...slug]/page.tsx) bleibt mit ParametricRoutePage statisch und benötigt keine searchParams`. Eine vollständige Einrichtung mit zwei Routen finden Sie unter Hybrides CMS-Projekt einrichten.

So überprüfen Sie die Einrichtung

1. Gehen Sie auf Ihrer Website zu /admin
2. Sie sollten zur Anmeldung aufgefordert werden, woraufhin sich sofort das CMS-Admin-Panel öffnet
3. Öffnen Sie Ihre Website über die Administration und bestätigen Sie, dass Overlays und die Live-Vorschau automatisch funktionieren

Overlays und Live-Vorschauen sollten automatisch funktionieren.

Nächste Schritte

Richten Sie die vollständigen Produktions- und Vorschau-Routen unter Hybrides CMS-Projekt einrichten ein.