Adminipaneeli ühendamine teie veebisaidiga on lihtne samm

Miks see on vajalik

See tagab sujuva redigeerimiskogemuse. Kui adminipaneel on puhverserveri kaudu teie veebisaidiga ühendatud, saate oma veebisaiti redigeerida samal URL-il ja näha muudatuste visuaalset eelvaadet reaalajas. Samuti võimaldab see ülekatete abil redigeerimist, mis pakub veebilehe muutmisel paremat kasutuskogemust.

Vajalikud sammud

Puhverserveri seadistamine (mõned nüansid)

Puhverserver on teie projektis asuv fail proxy.ts (Next.js 16 korral; vanemates Next.js versioonides on selleks middleware.ts). See toimib nagu URL-i ümberkirjutus, suunates teie veebisaidi lõpp-punktid /admin, /api ja /auth CMS-i.

• localhosti puhul: peate kasutama tunnelit (kuna CMS ei pääse otse ligi aadressile localhost)
• Töötavad sujuvalt juurutatud veebisaitidel

Puhverserveri seadistamine

// proxy.ts  (Next.js 16 — vanemates Next.js versioonides kasutage faili middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // CMS-i administreerimisliidese päritolu, kuhu puhverserver suunab.
  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 tagastab töötleja, mida kutsute välja sissetuleva päringuga. cmsProxyMatcher on valmis matcher, mis hõlmab teid /admin, /api, /auth ning administreerimisliidese algatatud /_next-i ja staatiliste varade päringute jaoks — seega ei pea te matcherite massiivi käsitsi kirjutama.

Vanemate Next.js-i versioonide puhul nimetage fail middleware.ts-iks ja eksportige töötleja vaikimisi ekspordi asemel nimega middleware:

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

Kas peate puhverserveri kaudu suunama täiendavaid teid? Edastage createCmsProxy-le additionalPaths: ['/my-path'].

Nüüd saate adminipaneelile juurdepääsuks minna oma saidil aadressile /admin. See võimaldab reaalajas eelvaadet.

Ülekatete abil redigeerimine ja eelvaate marsruut

Ülekatted ja redigeerimisrežiim renderdatakse teie eelvaatemarsruudil, mitte staatilisel tootmismarsruudil. Administreerimisliides laadib teie saidi redigeerimisrežiimis (?edit_mode=true) ning seda päringut teenindab force-dynamic-iga marsruudil olev ParametricRoutePreviewPage, mis edastab searchParams-i teie eest:

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

// Dünaamiline renderdamine — võimaldab kasutada searchParams-i redigeerimisrežiimi jaoks
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}
    />
  );
}

Te ei pea ülekatteid käsitsi ühendama — piisab sellest, kui edastate searchParams-i eelrenderdajale. Teie tootmismarsruut (`app/[...slug]/page.tsx) jääb ParametricRoutePage abil staatiliseks ja ei vaja searchParams`-i. Täieliku kahe marsruudiga seadistuse kohta vaadake Hübriidse CMS-i projekti seadistamine.

Kuidas kontrollida

1. Minge oma veebisaidil aadressile /admin
2. Teilt peaks küsitama sisselogimist ja CMS-i adminipaneel peaks kohe avanema
3. Avage administreerimisliidesest oma sait ja kontrollige, kas ülekatted ning reaalajas eelvaade töötavad automaatselt

Ülekatted ja reaalajas eelvaated peaksid töötama automaatselt.

Järgmised sammud

Seadistage täielikud tootmis- ja eelvaatemarsruudid juhendi Hübriidse CMS-i projekti seadistamine abil.