Het koppelen van het adminpaneel aan je website is een eenvoudige stap

Waarom is dit vereist

Dit zorgt ervoor dat je bewerkingservaring naadloos verloopt. Met het adminpaneel dat via een proxy aan je website is gekoppeld, kun je je website op dezelfde URL bewerken en in realtime een visueel voorbeeld van de wijzigingen bekijken. Het maakt ook bewerken met overlays mogelijk, wat een betere gebruikerservaring biedt bij het bewerken van de webpagina.

Vereiste stappen

Proxy instellen (er zijn enkele aandachtspunten)

De proxy is een proxy.ts-bestand in je project (in Next.js 16; in oudere versies van Next.js is dit middleware.ts). Het werkt als een URL-herschrijving en verwijst de /admin-, /api- en /auth-eindpunten van je website door naar het CMS.

• Voor localhost: je moet een tunnel gebruiken (omdat het CMS niet rechtstreeks toegang heeft tot localhost)
• Werkt naadloos op gedeployde websites

Proxy instellen

// proxy.ts  (Next.js 16 — gebruik middleware.ts in oudere versies van Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // De admin-origin van het CMS waarnaar moet worden geproxied.
  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 retourneert een handler die je aanroept met het binnenkomende verzoek. cmsProxyMatcher is de kant-en-klare matcher die /admin, /api, /auth en door de admin geïnitieerde /_next- en statische asset-verzoeken omvat — je hoeft de matcher-array dus niet handmatig te schrijven.

Geef het bestand in oudere versies van Next.js de naam middleware.ts en exporteer de handler als middleware in plaats van als default export:

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

Wil je extra paden proxien? Geef additionalPaths: ['/my-path'] door aan createCmsProxy.

Je kunt nu naar /admin op je site gaan om toegang te krijgen tot het adminpaneel. Hiermee wordt live preview ingeschakeld.

Bewerken met overlays en de previewroute

Overlays en de bewerkingsmodus worden weergegeven door je previewroute, niet door de statische productieroute. De admin laadt je site in de bewerkingsmodus (?edit_mode=true), en dat verzoek wordt afgehandeld door ParametricRoutePreviewPage op een force-dynamic-route, die searchParams voor je doorstuurt:

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

// Dynamische rendering — maakt searchParams voor edit_mode mogelijk
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}
    />
  );
}

Je hoeft overlays niet handmatig te configureren — het doorgeven van searchParams aan de preview-renderer is alles wat nodig is. Je productieroute (`app/[...slug]/page.tsx`) blijft statisch met ParametricRoutePage en heeft geen searchParams\ nodig. Bekijk Hybride CMS-project instellen voor de volledige configuratie met twee routes.

Hoe je dit controleert

1. Ga naar /admin op je website
2. Je zou moeten worden gevraagd om in te loggen, waarna het CMS-adminpaneel direct wordt geopend
3. Open je site vanuit de admin en controleer of overlays/live preview automatisch werken

Overlays en live previews zouden automatisch moeten werken.

Volgende stappen

Stel de volledige productie- en previewroutes in via Hybride CMS-project instellen.