Az adminpanel webhelyéhez való csatolása egyszerű lépés

Miért van erre szükség?

Ez biztosítja a zökkenőmentes szerkesztési élményt. Ha az adminpanel proxy segítségével csatlakozik a webhelyéhez, webhelyét ugyanazon az URL-címen szerkesztheti, és valós időben vizuális előnézetet láthat a módosításokról. Emellett lehetővé teszi a fedvényes szerkesztést is, amely jobb felhasználói élményt nyújt a weboldal szerkesztése során.

Szükséges lépések

Proxy beállítása (néhány korlátozással)

A proxy egy proxy.ts fájl a projektben (Next.js 16 esetén; régebbi Next.js-verziókban middleware.ts). URL-átíráshoz hasonlóan működik: a webhely /admin, /api és /auth végpontjait a CMS-hez irányítja.

• localhost esetén alagutat kell használnia (mivel a CMS nem fér hozzá közvetlenül a localhost-hoz)
• Telepített webhelyeken zökkenőmentesen működik

Proxy beállítása

// proxy.ts  (Next.js 16 — régebbi Next.js-verziókban használja a middleware.ts fájlt)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // A proxy céljaként megadott CMS-adminisztrációs eredet.
  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,
};

A createCmsProxy egy kezelőt ad vissza, amelyet a beérkező kéréssel kell meghívnia. A cmsProxyMatcher egy kész matcher, amely lefedi az /admin, /api, /auth, valamint az adminisztrációs felületről érkező /_next- és statikus erőforrás-kéréseket — így nem kell kézzel megírnia a matcher tömbjét.

Régebbi Next.js-verziók esetén nevezze el a fájlt middleware.ts-nek, és a kezelőt middleware néven exportálja az alapértelmezett export helyett:

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

További útvonalakat is proxyn keresztül kell továbbítania? Adja át az additionalPaths: ['/my-path'] beállítást a createCmsProxy számára.

Mostantól webhelyén az /admin útvonalra lépve hozzáférhet az adminpanelhez. Ez lehetővé teszi az élő előnézetet.

Fedvényes szerkesztés és az előnézeti útvonal

A fedvényeket és a szerkesztési módot az előnézeti útvonal jeleníti meg, nem a statikus éles útvonal. Az adminfelület szerkesztési módban (?edit_mode=true) tölti be webhelyét, és ezt a kérést a force-dynamic beállítású útvonalon található ParametricRoutePreviewPage szolgálja ki, amely automatikusan továbbítja a searchParams értékét:

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

// Dinamikus megjelenítés — lehetővé teszi a searchParams használatát az edit_mode-hoz
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}
    />
  );
}

A fedvényeket nem kell manuálisan bekötnie — az előnézeti renderelőnek átadott searchParams az egyetlen szükséges beállítás. Az éles útvonal (\app/[...slug]/page.tsx`) statikus marad a ParametricRoutePagehasználatával, és nincs szükségesearchParams` értékre. A teljes, két útvonalat tartalmazó beállításért tekintse meg a Hibrid CMS-projekt beállítása című útmutatót.

Ellenőrzés

1. Lépjen webhelyén az /admin útvonalra
2. A rendszernek bejelentkezést kell kérnie, majd azonnal meg kell nyitnia a CMS adminpaneljét
3. Nyissa meg webhelyét az adminfelületről, és ellenőrizze, hogy a fedvények és az élő előnézet automatikusan működnek-e

A fedvényeknek és az élő előnézeteknek automatikusan működniük kell.

Következő lépések

Állítsa be a teljes éles és előnézeti útvonalakat a Hibrid CMS-projekt beállítása című útmutató alapján.