Postavljanje administracijske ploče na vašu web-stranicu jednostavan je korak

Zašto je to potrebno

Time se osigurava besprijekorno iskustvo uređivanja. Kada je administracijska ploča povezana s vašom web-stranicom putem proxyja, web-stranicu možete uređivati na istom URL-u i u stvarnom vremenu vizualno pregledavati promjene. Omogućuje i uređivanje putem preklapanja, što pruža bolje korisničko iskustvo pri uređivanju web-stranice.

Potrebni koraci

Postavljanje proxyja (postoje određene napomene)

Proxy je datoteka proxy.ts u vašem projektu (u Next.jsu 16; u starijim verzijama Next.jsa to je middleware.ts). Ponaša se poput prepisivanja URL-a te krajnje točke /admin, /api i /auth vaše web-stranice usmjerava prema CMS-u.

• Za localhost: morate upotrijebiti tunel (jer CMS ne može izravno pristupiti adresi localhost)
• Besprijekorno radi na objavljenim web-stranicama

Postavljanje proxyja

// proxy.ts  (Next.js 16 — u starijim verzijama Next.jsa upotrijebite middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Izvor administracije CMS-a prema kojem treba usmjeriti 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 vraća rukovatelj koji pozivate s dolaznim zahtjevom. cmsProxyMatcher gotovi je matcher koji obuhvaća /admin, /api, /auth te zahtjeve za /_next i statičke resurse koje pokreće administracija — stoga ne morate ručno pisati polje matcherâ.

U starijim verzijama Next.jsa datoteku nazovite middleware.ts, a rukovatelj izvezite kao middleware umjesto zadanog izvoza:

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

Trebate li prosljeđivati dodatne putanje? Proslijedite additionalPaths: ['/my-path'] funkciji createCmsProxy.

Sada na svojoj web-stranici možete otvoriti /admin kako biste pristupili administracijskoj ploči. Time se omogućuje pregled uživo.

Uređivanje putem preklapanja i ruta za pregled

Preklapanja i način uređivanja generiraju se putem rute za pregled, a ne putem statične produkcijske rute. Administracija učitava vašu web-stranicu u načinu uređivanja (?edit_mode=true), a taj zahtjev obrađuje ParametricRoutePreviewPage na ruti force-dynamic, koja za vas prosljeđuje 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';

// Dinamičko generiranje — omogućuje upotrebu searchParams za 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}
    />
  );
}

Preklapanja ne morate povezivati ručno — dovoljno je proslijediti searchParams rendereru za pregled. Vaša produkcijska ruta (`app/[...slug]/page.tsx`) ostaje statična uz ParametricRoutePage i ne treba searchParams\. Za potpuno postavljanje s dvjema rutama pogledajte Postavljanje hibridnog CMS projekta.

Kako provjeriti

1. Otvorite /admin na svojoj web-stranici
2. Trebao bi se prikazati zahtjev za prijavu, nakon čega bi se odmah trebala otvoriti CMS administracijska ploča
3. Otvorite svoju web-stranicu iz administracije i potvrdite da preklapanja i pregled uživo rade automatski

Preklapanja i pregledi uživo trebali bi raditi automatski.

Sljedeći koraci

Postavite potpune produkcijske rute i rute za pregled u vodiču Postavljanje hibridnog CMS projekta.