Atașarea panoului de administrare la site-ul dvs. este un pas simplu

De ce este necesar

Acest lucru vă asigură o experiență de editare fără întreruperi. Având panoul de administrare atașat la site-ul dvs. printr-un proxy, vă puteți edita site-ul la aceeași adresă URL și puteți vedea vizual modificările în timp real. De asemenea, permite editarea prin suprapuneri, ceea ce oferă o experiență mai bună pentru editarea paginii web.

Pași necesari

Configurarea proxy-ului (există câteva particularități)

Proxy-ul este un fișier proxy.ts în proiectul dvs. (în Next.js 16; în versiunile mai vechi de Next.js este middleware.ts). Acesta se comportă ca o rescriere a URL-ului, direcționând endpointurile /admin, /api și /auth ale site-ului dvs. către CMS.

• Pentru localhost: trebuie să utilizați un tunel (deoarece CMS-ul nu poate accesa direct localhost)
• Funcționează fără probleme pe site-urile implementate

Configurarea proxy-ului

// proxy.ts  (Next.js 16 — utilizați middleware.ts în versiunile mai vechi de Next.js)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Originea administratorului CMS către care se face proxy.
  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 returnează un handler pe care îl apelați cu cererea primită. cmsProxyMatcher este matcher-ul gata pregătit care acoperă /admin, /api, /auth și cererile /_next și pentru resurse statice inițiate de administrator — astfel nu trebuie să scrieți manual matricea matcher-ului.

În versiunile mai vechi de Next.js, denumiți fișierul middleware.ts și exportați handler-ul ca middleware în locul exportului implicit:

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

Aveți nevoie să faceți proxy pentru căi suplimentare? Transmiteți additionalPaths: ['/my-path'] către createCmsProxy.

Acum puteți accesa /admin pe site-ul dvs. pentru a deschide panoul de administrare. Acest lucru activează previzualizarea live.

Editarea prin suprapuneri și ruta de previzualizare

Suprapunerile și modul de editare sunt randate de ruta dvs. de previzualizare, nu de ruta statică de producție. Administratorul încarcă site-ul dvs. în modul de editare (?edit_mode=true), iar cererea este deservită de ParametricRoutePreviewPage pe o rută force-dynamic, care transmite searchParams în locul dvs.:

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

// Randare dinamică — permite utilizarea searchParams pentru 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}
    />
  );
}

Nu trebuie să configurați manual suprapunerile — este suficient să transmiteți searchParams către randorul de previzualizare. Ruta dvs. de producție (`app/[...slug]/page.tsx) rămâne statică, cu  ParametricRoutePage  și nu are nevoie de searchParams`. Consultați Configurarea proiectului CMS hibrid pentru configurarea completă a celor două rute.

Cum se verifică

1. Accesați /admin pe site-ul dvs.
2. Ar trebui să vi se solicite autentificarea, iar apoi să se deschidă imediat panoul de administrare CMS
3. Deschideți site-ul din panoul de administrare și confirmați că suprapunerile/previzualizarea live funcționează automat

Suprapunerile și previzualizările live ar trebui să funcționeze automat.

Pașii următori

Configurați rutele complete de producție + previzualizare în Configurarea proiectului CMS hibrid.