Podłączenie panelu administracyjnego do Twojej witryny to prosty krok

Dlaczego jest to wymagane

Dzięki temu edycja będzie płynna i bezproblemowa. Po podłączeniu panelu administracyjnego do witryny za pomocą proxy możesz edytować witrynę pod tym samym adresem URL i wyświetlać wizualny podgląd zmian w czasie rzeczywistym. Umożliwia to również edycję z nakładkami, co zapewnia lepsze doświadczenia użytkownika podczas edytowania strony internetowej.

Wymagane kroki

Konfiguracja proxy (z pewnymi zastrzeżeniami)

Proxy to plik proxy.ts w Twoim projekcie (w Next.js 16; w starszych wersjach Next.js jest to middleware.ts). Działa jak przepisanie adresu URL, kierując endpointy /admin, /api i /auth Twojej witryny do CMS-a.

• Dla localhost: musisz użyć tunelu (ponieważ CMS nie może uzyskać bezpośredniego dostępu do localhost)
• Działa bezproblemowo na wdrożonych witrynach

Konfiguracja proxy

// proxy.ts  (Next.js 16 — w starszych wersjach Next.js użyj middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Origin panelu administracyjnego CMS, do którego ma kierować 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 zwraca handler, który wywołujesz z przychodzącym żądaniem. cmsProxyMatcher to gotowy matcher obejmujący /admin, /api, /auth oraz żądania /_next i żądania zasobów statycznych inicjowane przez panel administracyjny — dzięki temu nie musisz ręcznie tworzyć tablicy matcherów.

W starszych wersjach Next.js nazwij plik middleware.ts i eksportuj handler jako middleware zamiast eksportu domyślnego:

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

Potrzebujesz proxy dla dodatkowych ścieżek? Przekaż additionalPaths: ['/my-path'] do createCmsProxy.

Teraz możesz przejść do /admin w swojej witrynie, aby uzyskać dostęp do panelu administracyjnego. Umożliwi to podgląd na żywo.

Edycja z nakładkami i trasa podglądu

Nakładki i tryb edycji są renderowane przez trasę podglądu, a nie przez statyczną trasę produkcyjną. Panel administracyjny ładuje Twoją witrynę w trybie edycji (?edit_mode=true), a to żądanie jest obsługiwane przez ParametricRoutePreviewPage na trasie force-dynamic, która przekazuje searchParams za Ciebie:

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

// Renderowanie dynamiczne — umożliwia użycie searchParams dla 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}
    />
  );
}

Nie musisz konfigurować nakładek ręcznie — wystarczy przekazać searchParams do renderera podglądu. Twoja trasa produkcyjna (`app/[...slug]/page.tsx) pozostaje statyczna, korzysta z ParametricRoutePage i nie wymaga searchParams`. Zobacz Konfiguracja hybrydowego projektu CMS, aby zapoznać się z pełną konfiguracją dwóch tras.

Jak zweryfikować konfigurację

1. Przejdź do /admin w swojej witrynie
2. Powinien pojawić się monit o zalogowanie, a następnie panel administracyjny CMS powinien otworzyć się automatycznie
3. Otwórz swoją witrynę z poziomu panelu administracyjnego i potwierdź, że nakładki oraz podgląd na żywo działają automatycznie

Nakładki i podgląd na żywo powinny działać automatycznie.

Następne kroki

Skonfiguruj pełne trasy produkcyjne i podglądu w sekcji Konfiguracja hybrydowego projektu CMS.