Hallintapaneelin liittäminen verkkosivustoosi on helppo vaihe

Miksi tämä vaaditaan

Tämä varmistaa saumattoman muokkauskokemuksen. Kun hallintapaneeli on liitetty verkkosivustoosi välityspalvelimen kautta, voit muokata verkkosivustoasi samalla URL-osoitteella ja nähdä muutosten visuaalisen esikatselun reaaliajassa. Se mahdollistaa myös peittokuvien avulla muokkaamisen, mikä tarjoaa paremman käyttökokemuksen verkkosivun muokkaukseen.

Vaaditut vaiheet

Välityspalvelimen määritys (joitakin huomioitavia seikkoja)

Välityspalvelin on projektissasi oleva proxy.ts-tiedosto (Next.js 16:ssa; vanhemmissa Next.js-versioissa se on middleware.ts). Se toimii URL-osoitteen uudelleenkirjoituksen tavoin ja ohjaa verkkosivustosi /admin-, /api- ja /auth-päätepisteet CMS:ään.

• localhost-osoitteelle: sinun on käytettävä tunnelia (koska CMS ei voi käyttää localhost-osoitetta suoraan)
• Toimii saumattomasti julkaistuilla verkkosivustoilla

Välityspalvelimen määritys

// proxy.ts  (Next.js 16 — käytä vanhemmissa Next.js-versioissa middleware.ts-tiedostoa)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // CMS:n välitettävä ylläpitäjän alkuperäosoite.
  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 palauttaa käsittelijän, jota kutsut saapuvalla pyynnöllä. cmsProxyMatcher on valmis sovitin, joka kattaa /admin-, /api- ja /auth-polut sekä ylläpitäjän alkuperästä tulevat /_next- ja staattisten resurssien pyynnöt — joten sinun ei tarvitse kirjoittaa sovitintaulukkoa itse.

Vanhemmissa Next.js-versioissa nimeä tiedosto middleware.ts:ksi ja vie käsittelijä nimellä middleware oletusviennin sijaan:

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

Haluatko välittää muita polkuja? Välitä additionalPaths: ['/my-path'] funktiolle createCmsProxy.

Nyt voit siirtyä sivustollasi osoitteeseen /admin käyttääksesi hallintapaneelia. Tämä mahdollistaa reaaliaikaisen esikatselun.

Peittokuvien avulla muokkaaminen ja esikatselureitti

Peittokuvat ja muokkaustila hahmonnetaan esikatselureitillä, ei staattisella tuotantoreitillä. Hallintapaneeli lataa sivustosi muokkaustilassa (?edit_mode=true), ja pyynnön käsittelee ParametricRoutePreviewPage force-dynamic-reitillä, joka välittää searchParams-parametrit puolestasi:

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

// Dynaaminen hahmonnus — mahdollistaa searchParams-parametrin käytön edit_modea varten
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}
    />
  );
}

Peittokuvia ei tarvitse määrittää manuaalisesti — pelkkä searchParams-parametrin välittäminen esikatseluhahmontimelle riittää. Tuotantoreittisi (`app/[...slug]/page.tsx) pysyy staattisena ParametricRoutePage-komponentin kanssa eikä tarvitse searchParams`-parametria. Katso Hybridin CMS-projektin määrittäminen, jossa kuvataan molempien reittien täydellinen määritys.

Vahvistaminen

1. Siirry verkkosivustollasi osoitteeseen /admin
2. Sivuston pitäisi pyytää sinua kirjautumaan sisään ja avata heti CMS:n hallintapaneeli
3. Avaa sivustosi hallintapaneelista ja varmista, että peittokuvat ja reaaliaikainen esikatselu toimivat automaattisesti

Peittokuvien ja reaaliaikaisten esikatselujen pitäisi toimia automaattisesti.

Seuraavat vaiheet

Määritä täydet tuotanto- ja esikatselureitit kohdassa Hybridin CMS-projektin määrittäminen.