Pripojenie administračného panela k vašej webovej stránke je jednoduchý krok

Prečo je to potrebné

Vďaka tomu bude úprava vašej webovej stránky plynulá. Keď je administračný panel pripojený k vašej webovej stránke prostredníctvom proxy, môžete webovú stránku upravovať na rovnakej URL adrese a zmeny si zobrazovať v reálnom čase. Umožňuje tiež úpravy pomocou prekrývajúcich vrstiev, čo poskytuje lepšiu používateľskú skúsenosť pri úprave webovej stránky.

Požadované kroky

Nastavenie proxy (existujú určité obmedzenia)

Proxy je súbor proxy.ts vo vašom projekte (v Next.js 16; v starších verziách Next.js je to middleware.ts). Funguje podobne ako prepisovanie URL a smeruje endpointy /admin, /api a /auth vašej webovej stránky do CMS.

• Pre localhost: musíte použiť tunel (keďže CMS nemôže pristupovať priamo k localhost)
• Na nasadených webových stránkach funguje bez problémov

Nastavenie proxy

// proxy.ts  (Next.js 16 — v starších verziách Next.js použite middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Zdroj administračného panelu CMS, na ktorý sa má proxy smerovať.
  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 vráti handler, ktorý zavoláte s prichádzajúcou požiadavkou. cmsProxyMatcher je pripravený matcher pokrývajúci /admin, /api, /auth a požiadavky na /_next a statické zdroje pochádzajúce z administračného panela — nemusíte teda ručne písať pole matcherov.

V starších verziách Next.js pomenujte súbor middleware.ts a namiesto predvoleného exportu exportujte handler ako middleware:

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

Potrebujete smerovať cez proxy aj ďalšie cesty? Do funkcie createCmsProxy odovzdajte additionalPaths: ['/my-path'].

Teraz môžete na svojej stránke prejsť na /admin a otvoriť administračný panel. Tým sa aktivuje živý náhľad.

Úpravy pomocou prekrývajúcich vrstiev a náhľadová trasa

Prekrývajúce vrstvy a režim úprav sa vykresľujú prostredníctvom vašej náhľadovej trasy, nie prostredníctvom statickej produkčnej trasy. Admin načíta vašu stránku v režime úprav (?edit_mode=true) a túto požiadavku obslúži ParametricRoutePreviewPage na trase s force-dynamic, ktorá za vás odovzdá searchParams:

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

// Dynamické vykresľovanie — umožňuje použitie searchParams pre 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}
    />
  );
}

Prekrývajúce vrstvy nemusíte pripájať manuálne — stačí odovzdať searchParams vykresľovaču náhľadu. Vaša produkčná trasa (`app/[...slug]/page.tsx) zostáva statická s ParametricRoutePage a nepotrebuje searchParams`. Kompletné nastavenie dvoch trás nájdete v časti Nastavenie hybridného CMS projektu.

Ako overiť nastavenie

1. Na svojej webovej stránke prejdite na /admin
2. Mala by sa zobraziť výzva na prihlásenie a následne sa okamžite otvoriť administračný panel CMS
3. Otvorte svoju stránku z administračného panela a overte, či prekrývajúce vrstvy a živý náhľad fungujú automaticky

Prekrývajúce vrstvy a živé náhľady by mali fungovať automaticky.

Ďalšie kroky

Nastavte kompletné produkčné a náhľadové trasy v časti Nastavenie hybridného CMS projektu.