Administratoriaus skydelio prijungimas prie jūsų svetainės yra paprastas žingsnis

Kodėl to reikia

Tai užtikrina sklandų redagavimą. Prijungę administratoriaus skydelį prie savo svetainės per tarpinį serverį, galite redaguoti svetainę tuo pačiu URL adresu ir realiuoju laiku vizualiai peržiūrėti pakeitimus. Tai taip pat įgalina perdangos redagavimą, kuris suteikia geresnę tinklalapio redagavimo naudotojo patirtį.

Reikalingi veiksmai

Tarpinio serverio nustatymas (yra keletas niuansų)

Tarpinis serveris yra jūsų projekto faile proxy.ts (Next.js 16 versijoje; senesnėse Next.js versijose tai yra middleware.ts). Jis veikia kaip URL perrašymas ir nukreipia jūsų svetainės /admin, /api bei /auth galinius taškus į TVS.

• Naudojant localhost: privalote naudoti tunelį (nes TVS negali tiesiogiai pasiekti localhost)
• Sklandžiai veikia įdiegtose svetainėse

Tarpinio serverio nustatymas

// proxy.ts  (Next.js 16 — senesnėse Next.js versijose naudokite middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // TVS administratoriaus šaltinis, į kurį nukreipiamas tarpinis serveris.
  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 grąžina apdorojimo funkciją, kurią iškviečiate su gaunama užklausa. cmsProxyMatcher yra paruoštas atitikmuo, apimantis /admin, /api, /auth, taip pat administratoriaus inicijuotas /_next ir statinių išteklių užklausas — todėl jums nereikia rankiniu būdu rašyti atitikmenų masyvo.

Senesnėse Next.js versijose pavadinkite failą middleware.ts, o apdorojimo funkciją eksportuokite kaip middleware, o ne kaip numatytąjį eksportą:

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

Reikia nukreipti papildomus kelius? Perduokite additionalPaths: ['/my-path'] į createCmsProxy.

Dabar savo svetainėje galite atverti /admin ir pasiekti administratoriaus skydelį. Taip įgalinama tiesioginė peržiūra.

Perdangos redagavimas ir peržiūros maršrutas

Perdangos ir redagavimo režimas pateikiami peržiūros maršrute, o ne statiniame gamybiniame maršrute. Administratoriaus skydelis įkelia jūsų svetainę redagavimo režimu (?edit_mode=true), o šią užklausą apdoroja ParametricRoutePreviewPage maršrute su force-dynamic, kuris automatiškai perduoda 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';

// Dinaminis atvaizdavimas — leidžia naudoti searchParams redagavimo režimui
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}
    />
  );
}

Perdangų nereikia sujungti rankiniu būdu — pakanka perduoti searchParams peržiūros atvaizdavimo funkcijai. Jūsų gamybinis maršrutas (`app/[...slug]/page.tsx) lieka statinis su ParametricRoutePage ir jam nereikia searchParams`. Visą dviejų maršrutų nustatymą rasite Hibridinio TVS projekto nustatymas.

Kaip patikrinti

1. Savo svetainėje atverkite /admin
2. Turėtų būti paprašyta prisijungti, o tada iškart atsidaryti TVS administratoriaus skydelis
3. Administratoriaus skydelyje atverkite savo svetainę ir patikrinkite, ar perdangos bei tiesioginė peržiūra veikia automatiškai

Perdangos ir tiesioginės peržiūros turėtų veikti automatiškai.

Tolesni veiksmai

Nustatykite visus gamybos ir peržiūros maršrutus pagal Hibridinio TVS projekto nustatymas.