Připojení administračního panelu k vašemu webu je snadný krok

Proč je to vyžadováno

Tím zajistíte bezproblémové používání editoru. Když je administrační panel připojen k vašemu webu prostřednictvím proxy, můžete web upravovat na stejné URL a v reálném čase vizuálně sledovat náhled změn. Umožňuje také úpravy pomocí překryvných vrstev, což poskytuje lepší uživatelský zážitek při úpravách webové stránky.

Požadované kroky

Nastavení proxy (existují určitá omezení)

Proxy je soubor proxy.ts ve vašem projektu (v Next.js 16; ve starších verzích Next.js je to middleware.ts). Funguje podobně jako přepisování URL a směruje endpointy /admin, /api a /auth vašeho webu do CMS.

• Pro localhost: musíte použít tunel (CMS nemůže přímo přistupovat k localhost)
• Na nasazených webech funguje bez problémů

Nastavení proxy

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

const cmsProxy = createCmsProxy({
  // Zdroj administračního rozhraní CMS, na který se má proxy připojit.
  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 vrací handler, který zavoláte s příchozím požadavkem. cmsProxyMatcher je připravený matcher pokrývající /admin, /api, /auth a požadavky na /_next a statické prostředky pocházející z administračního rozhraní — nemusíte tedy ručně vytvářet pole matcherů.

Ve starších verzích Next.js soubor pojmenujte middleware.ts a handler exportujte jako middleware namísto výchozího exportu:

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

Potřebujete směrovat přes proxy další cesty? Předejte do createCmsProxy hodnotu additionalPaths: ['/my-path'].

Nyní můžete na svém webu přejít na /admin a získat přístup k administračnímu panelu. Tím se aktivuje živý náhled.

Úpravy pomocí překryvných vrstev a náhledová route

Překryvné vrstvy a režim úprav se vykreslují prostřednictvím náhledové route, nikoli statické produkční route. Admin načte váš web v režimu úprav (?edit_mode=true) a tento požadavek zpracuje ParametricRoutePreviewPage na route s force-dynamic, která za vás předává 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é vykreslování — umožňuje použití searchParams pro 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}
    />
  );
}

Překryvné vrstvy nemusíte propojovat ručně — stačí předat searchParams vykreslovači náhledu. Vaše produkční route (`app/[...slug]/page.tsx) zůstane statická s ParametricRoutePage a nepotřebuje searchParams`. Kompletní nastavení obou rout najdete v části Nastavení hybridního CMS projektu.

Jak ověřit funkčnost

1. Přejděte na /admin na svém webu
2. Měla by se zobrazit výzva k přihlášení a následně se okamžitě otevřít administrační panel CMS
3. Otevřete svůj web z administračního panelu a ověřte, že překryvné vrstvy a živý náhled fungují automaticky

Překryvné vrstvy a živé náhledy by měly fungovat automaticky.

Další kroky

Nastavte kompletní produkční a náhledové routy podle části Nastavení hybridního CMS projektu.