Det er enkelt å koble adminpanelet til nettstedet ditt

Hvorfor er dette nødvendig

Dette sikrer en sømløs redigeringsopplevelse. Når adminpanelet er koblet til nettstedet ditt via en proxy, kan du redigere nettstedet på samme URL og få en visuell forhåndsvisning av endringene i sanntid. Det muliggjør også redigering med overlegg, noe som gir en bedre brukeropplevelse ved redigering av nettsiden.

Nødvendige trinn

Proxy-oppsett (det finnes noen forbehold)

Proxyen er en proxy.ts-fil i prosjektet ditt (i Next.js 16; i eldre versjoner av Next.js heter den middleware.ts). Den fungerer som en URL-omskriving og videresender nettstedets /admin-, /api- og /auth-endepunkter til CMS-et.

• For localhost: du må bruke en tunnel (siden CMS-et ikke kan få direkte tilgang til localhost)
• Fungerer sømløst på distribuerte nettsteder

Proxy-oppsett

// proxy.ts  (Next.js 16 — bruk middleware.ts i eldre versjoner av Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // CMS-administratorens opprinnelse 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 behandler som du kaller med den innkommende forespørselen. cmsProxyMatcher er den ferdiglagde matcheren som dekker /admin, /api, /auth samt admin-initierte /_next- og forespørsler etter statiske ressurser — slik at du slipper å skrive matcher-arrayet manuelt.

I eldre versjoner av Next.js gir du filen navnet middleware.ts og eksporterer behandleren som middleware i stedet for som standardeksport:

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

Trenger du å videresende ekstra stier? Send additionalPaths: ['/my-path'] til createCmsProxy.

Nå kan du gå til /admin på nettstedet ditt for å få tilgang til adminpanelet. Dette aktiverer forhåndsvisning i sanntid.

Redigering med overlegg og forhåndsvisningsruten

Overlegg og redigeringsmodus gjengis av forhåndsvisningsruten din, ikke den statiske produksjonsruten. Adminpanelet laster inn nettstedet ditt i redigeringsmodus (?edit_mode=true), og denne forespørselen håndteres av ParametricRoutePreviewPage på en force-dynamic-rute, som videresender searchParams for deg:

// 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 gjengivelse — tillater 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 trenger ikke å koble til overlegg manuelt — det eneste som kreves, er å sende searchParams til forhåndsvisningsgjengiveren. Produksjonsruten din (`app/[...slug]/page.tsx`) forblir statisk med ParametricRoutePage og trenger ikke searchParams\. Se Setup Hybrid CMS Project for et komplett oppsett med to ruter.

Slik bekrefter du oppsettet

1. Gå til /admin på nettstedet ditt
2. Du skal bli bedt om å logge inn, og CMS-adminpanelet skal åpnes umiddelbart
3. Åpne nettstedet ditt fra adminpanelet, og bekreft at overlegg og forhåndsvisning i sanntid fungerer automatisk

Overlegg og forhåndsvisninger i sanntid skal fungere automatisk.

Neste trinn

Sett opp komplette produksjons- og forhåndsvisningsruter i Setup Hybrid CMS Project.