Det er nemt at tilknytte adminpanelet til dit website

Hvorfor er dette nødvendigt

Dette sikrer, at din redigeringsoplevelse bliver problemfri. Når adminpanelet er tilknyttet dit website via en proxy, kan du redigere dit website på den samme URL og få en visuel forhåndsvisning af ændringerne i realtid. Det muliggør også overlay-redigering, hvilket giver en bedre brugeroplevelse ved redigering af websiden.

Påkrævede trin

Proxyopsætning (der er nogle begrænsninger)

Proxyen er en proxy.ts-fil i dit projekt (i Next.js 16; i ældre versioner af Next.js er det middleware.ts). Den fungerer som en URL-omskrivning, der videresender dit websites /admin-, /api- og /auth-endpoints til CMS'et.

• For localhost: Du skal bruge en tunnel (da CMS'et ikke kan tilgå localhost direkte)
• Fungerer problemfrit på deployede websites

Proxyopsætning

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

const cmsProxy = createCmsProxy({
  // CMS-adminets origin, som proxyen skal videresende til.
  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 returnerer en handler, som du kalder med den indgående request. cmsProxyMatcher er en færdig matcher, der dækker /admin, /api, /auth samt admin-initierede /_next- og statiske ressource-requests — så du ikke selv behøver at skrive matcher-arrayet.

I ældre versioner af Next.js skal filen hedde middleware.ts, og handleren skal eksporteres som middleware i stedet for som default-eksport:

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

Har du brug for at proxye ekstra stier? Send additionalPaths: ['/my-path'] til createCmsProxy.

Nu kan du gå til /admin på dit website for at få adgang til adminpanelet. Dette aktiverer live-forhåndsvisning.

Overlay-redigering og preview-ruten

Overlays og redigeringstilstand gengives af din preview-rute, ikke af den statiske produktionsrute. Admin indlæser dit website i redigeringstilstand (?edit_mode=true), og denne request håndteres af ParametricRoutePreviewPage på en force-dynamic-rute, som videresender searchParams for 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 — tillader searchParams for 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 skal ikke konfigurere overlays manuelt — det eneste, der er nødvendigt, er at sende searchParams til preview-rendereren. Din produktionsrute (`app/[...slug]/page.tsx) forbliver statisk med ParametricRoutePage og har ikke brug for searchParams`. Se Opsætning af hybridt CMS-projekt for den komplette opsætning med to ruter.

Sådan verificerer du opsætningen

1. Gå til /admin på dit website
2. Du bør blive bedt om at logge ind, hvorefter CMS-adminpanelet åbnes med det samme
3. Åbn dit website fra adminpanelet, og bekræft, at overlays/live-forhåndsvisning fungerer automatisk

Overlays og live-forhåndsvisninger bør fungere automatisk.

Næste trin

Opsæt de komplette produktions- og preview-ruter i Opsætning af hybridt CMS-projekt.