Att ansluta adminpanelen till din webbplats är ett enkelt steg

Varför krävs detta?

Detta säkerställer att din redigeringsupplevelse blir sömlös. När adminpanelen ansluts till din webbplats via en proxy kan du redigera webbplatsen på samma URL och få en visuell förhandsvisning av ändringarna i realtid. Det möjliggör även redigering med överlägg, vilket ger en bättre användarupplevelse vid redigering av webbsidan.

Obligatoriska steg

Proxykonfiguration (det finns vissa begränsningar)

Proxyn är en proxy.ts-fil i ditt projekt (i Next.js 16; i äldre versioner av Next.js heter den middleware.ts). Den fungerar som en URL-omskrivning och dirigerar webbplatsens /admin-, /api- och /auth-slutpunkter till CMS:et.

• För localhost: du måste använda en tunnel (eftersom CMS:et inte kan komma åt localhost direkt)
• Fungerar sömlöst på distribuerade webbplatser

Proxykonfiguration

// proxy.ts  (Next.js 16 — använd middleware.ts i äldre versioner av Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // CMS-administratörens ursprung som proxyn ska ansluta till.
  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 returnerar en hanterare som du anropar med den inkommande begäran. cmsProxyMatcher är en färdig matchare som täcker /admin, /api, /auth samt admininitierade /_next- och begäranden för statiska tillgångar — så du behöver inte skriva matchararrayen manuellt.

I äldre Next.js-versioner namnger du filen middleware.ts och exporterar hanteraren som middleware i stället för som standardexport:

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

Behöver du proxya ytterligare sökvägar? Skicka additionalPaths: ['/my-path'] till createCmsProxy.

Nu kan du gå till /admin på din webbplats för att komma åt adminpanelen. Detta aktiverar liveförhandsvisning.

Redigering med överlägg och förhandsvisningsrutten

Överlägg och redigeringsläge renderas av din förhandsvisningsrutt, inte av den statiska produktionsrutten. Adminpanelen laddar din webbplats i redigeringsläge (?edit_mode=true), och denna begäran hanteras av ParametricRoutePreviewPage på en force-dynamic-rutt, som vidarebefordrar searchParams åt dig:

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

// Dynamisk rendering — tillåter 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}
    />
  );
}

Du behöver inte koppla in överlägg manuellt — det enda som krävs är att skicka searchParams till förhandsvisningsrenderaren. Din produktionsrutt (`app/[...slug]/page.tsx`) förblir statisk med ParametricRoutePage och behöver inga searchParams\. Se Konfigurera hybrid-CMS-projekt för den fullständiga konfigurationen med två rutter.

Så verifierar du

1. Gå till /admin på din webbplats
2. Du bör ombes att logga in, varefter CMS-adminpanelen öppnas direkt
3. Öppna din webbplats från adminpanelen och bekräfta att överlägg/liveförhandsvisning fungerar automatiskt

Överlägg och liveförhandsvisningar ska fungera automatiskt.

Nästa steg

Konfigurera de fullständiga produktions- och förhandsvisningsrutterna i Konfigurera hybrid-CMS-projekt.