Administratora paneļa pievienošana jūsu vietnei ir vienkāršs solis

Kāpēc tas ir nepieciešams

Tas nodrošina nevainojamu rediģēšanas pieredzi. Pievienojot administratora paneli savai vietnei, izmantojot starpniekserveri, varat rediģēt vietni tajā pašā URL un reāllaikā vizuāli priekšskatīt izmaiņas. Tas arī iespējo pārklājuma rediģēšanu, kas nodrošina labāku lietotāja pieredzi tīmekļa lapas rediģēšanā.

Nepieciešamās darbības

Starpniekservera iestatīšana (ir dažas nianses)

Starpniekserveris ir jūsu projekta fails proxy.ts (Next.js 16 versijā; vecākās Next.js versijās tas ir middleware.ts). Tas darbojas līdzīgi URL pārrakstīšanai, novirzot jūsu vietnes /admin, /api un /auth galapunktus uz CMS.

• Vietnei localhost: jāizmanto tunelis (jo CMS nevar tieši piekļūt localhost)
• Nevainojami darbojas izvietotās vietnēs

Starpniekservera iestatīšana

// proxy.ts  (Next.js 16 — vecākās Next.js versijās izmantojiet middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // CMS administratora izcelsme, uz kuru jānovirza pieprasījumi.
  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 atgriež apdarinātāju, kuru izsaucat ar ienākošo pieprasījumu. cmsProxyMatcher ir gatavs marķieris, kas aptver /admin, /api, /auth, kā arī administratora paneļa izcelsmes /_next un statisko līdzekļu pieprasījumus — tāpēc marķieru masīvs nav jāraksta manuāli.

Vecākās Next.js versijās nosauciet failu middleware.ts un eksportējiet apdarinātāju kā middleware, nevis kā noklusējuma eksportu:

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

Vai nepieciešams starpniekserverim pievienot papildu ceļus? Nododiet additionalPaths: ['/my-path'] funkcijai createCmsProxy.

Tagad savā vietnē varat atvērt /admin, lai piekļūtu administratora panelim. Tas iespējo reāllaika priekšskatījumu.

Pārklājuma rediģēšana un priekšskatījuma maršruts

Pārklājumi un rediģēšanas režīms tiek renderēti jūsu priekšskatījuma maršrutā, nevis statiskajā produkcijas maršrutā. Administrators ielādē jūsu vietni rediģēšanas režīmā (?edit_mode=true), un šo pieprasījumu apkalpo ParametricRoutePreviewPage maršrutā ar force-dynamic, kas automātiski pārsūta 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';

// Dinamiskā renderēšana — iespējo searchParams izmantošanu rediģēšanas režīmam
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}
    />
  );
}

Pārklājumi nav jāpievieno manuāli — pietiek ar searchParams nodošanu priekšskatījuma renderētājam. Jūsu produkcijas maršruts (`app/[...slug]/page.tsx) paliek statisks ar ParametricRoutePage un tam nav nepieciešams searchParams`. Pilnu divu maršrutu iestatīšanu skatiet sadaļā Hibrīda CMS projekta iestatīšana.

Kā pārbaudīt

1. Savā vietnē atveriet /admin
2. Vajadzētu parādīties pieteikšanās pieprasījumam, pēc kura nekavējoties tiks atvērts CMS administratora panelis
3. Atveriet savu vietni administratora panelī un pārliecinieties, ka pārklājumi un reāllaika priekšskatījums darbojas automātiski

Pārklājumiem un reāllaika priekšskatījumiem vajadzētu darboties automātiski.

Nākamās darbības

Iestatiet pilnus produkcijas un priekšskatījuma maršrutus sadaļā Hibrīda CMS projekta iestatīšana.