Priključitev skrbniške plošče na vaše spletno mesto je preprost korak

Zakaj je to potrebno

To zagotavlja nemoteno izkušnjo urejanja. Ko je skrbniška plošča na vaše spletno mesto priključena prek posrednika, lahko svoje spletno mesto urejate na istem URL-ju in si spremembe v realnem času ogledate v vizualnem predogledu. Omogoča tudi urejanje s prekrivnimi elementi, kar zagotavlja boljšo uporabniško izkušnjo pri urejanju spletne strani.

Zahtevani koraki

Nastavitev posrednika (nekaj posebnosti)

Posrednik je datoteka proxy.ts v vašem projektu (v Next.js 16; v starejših različicah Next.js je to middleware.ts). Deluje podobno kot prepis URL-ja in končne točke /admin, /api ter /auth vašega spletnega mesta usmerja v CMS.

• Za localhost: uporabiti morate tunel (ker CMS ne more neposredno dostopati do localhost)
• Na uvedenih spletnih mestih deluje brezhibno

Nastavitev posrednika

// proxy.ts  (Next.js 16 — v starejših različicah Next.js uporabite middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Izvor skrbniškega vmesnika CMS, v katerega naj posrednik usmerja.
  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 vrne obravnavo, ki jo pokličete z dohodno zahtevo. cmsProxyMatcher je že pripravljen ujemalnik, ki zajema /admin, /api, /auth ter zahteve za /_next in statične vire, ki izvirajo iz skrbniškega vmesnika — zato vam ni treba ročno zapisati polja ujemalnikov.

V starejših različicah Next.js datoteko poimenujte middleware.ts in obravnavo izvozite kot middleware namesto privzetega izvoza:

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

Potrebujete posredovanje dodatnih poti? Funkciji createCmsProxy posredujte additionalPaths: ['/my-path'].

Zdaj lahko na svojem spletnem mestu odprete /admin in dostopate do skrbniške plošče. S tem omogočite predogled v živo.

Urejanje s prekrivnimi elementi in pot predogleda

Prekrivni elementi in način urejanja se izrišejo prek poti predogleda, ne prek statične produkcijske poti. Skrbniška plošča vaše spletno mesto naloži v načinu urejanja (?edit_mode=true), zahtevo pa na dinamični poti force-dynamic obdela ParametricRoutePreviewPage, ki namesto vas posreduje 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čno izrisovanje — omogoča 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}
    />
  );
}

Prekrivnih elementov vam ni treba povezovati ročno — v predogledni izrisovalnik morate posredovati le searchParams. Produkcijska pot (`app/[...slug]/page.tsx`) ostane statična z uporabo  ParametricRoutePage  in ne potrebuje  searchParams\. Za celotno nastavitev z dvema potema glejte Nastavitev hibridnega projekta CMS.

Kako preveriti

1. Na svojem spletnem mestu odprite /admin
2. Pozvani bi morali biti k prijavi, nato pa se mora takoj odpreti skrbniška plošča CMS
3. V skrbniški plošči odprite svoje spletno mesto in preverite, ali prekrivni elementi oziroma predogled v živo delujejo samodejno

Prekrivni elementi in predogledi v živo bi morali delovati samodejno.

Naslednji koraki

Celotni produkcijski in predogledni poti nastavite v Nastavitev hibridnega projekta CMS.