Прикачването на админ панела към уебсайта ви е лесна стъпка

Защо е необходимо това

Това гарантира безпроблемно изживяване при редактиране. Когато админ панелът е прикачен към уебсайта ви чрез прокси, можете да редактирате уебсайта си на същия URL адрес и да виждате визуален преглед на промените в реално време. Това също така позволява редактиране чрез наслагвания, което осигурява по-добро потребителско изживяване при редактиране на уеб страницата.

Необходими стъпки

Настройка на прокси (има някои особености)

Проксито представлява файл proxy.ts във вашия проект (в Next.js 16; при по-старите версии на Next.js това е middleware.ts). То се държи като пренаписване на URL адрес, като насочва крайните точки /admin, /api и /auth на уебсайта ви към CMS системата.

• За localhost: трябва да използвате тунел (тъй като CMS системата няма директен достъп до localhost)
• Работи безпроблемно на публикувани уебсайтове

Настройка на прокси

// proxy.ts  (Next.js 16 — при по-старите версии на Next.js използвайте middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // Произходът на админ панела на CMS системата, към който да се насочи проксито.
  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 връща обработчик, който извиквате с входящата заявка. cmsProxyMatcher е готов мачър, който обхваща /admin, /api, /auth, както и заявки към /_next и статични ресурси, произхождащи от админ панела — така че не е необходимо сами да изписвате масива с шаблони.

При по-старите версии на Next.js именувайте файла middleware.ts и експортирайте обработчика като middleware, вместо да използвате експортиране по подразбиране:

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

Необходимо е да проксирате допълнителни пътища? Подайте additionalPaths: ['/my-path'] към createCmsProxy.

Сега можете да отворите /admin на сайта си, за да получите достъп до админ панела. Това активира визуалния преглед в реално време.

Редактиране чрез наслагвания и маршрут за преглед

Наслагванията и режимът за редактиране се визуализират от маршрута за преглед, а не от статичния производствен маршрут. Админ панелът зарежда сайта ви в режим за редактиране (?edit_mode=true), като тази заявка се обслужва от ParametricRoutePreviewPage в маршрут с force-dynamic, който автоматично препраща 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';

// Динамично визуализиране — позволява използването на searchParams за 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}
    />
  );
}

Не е необходимо да свързвате наслагванията ръчно — достатъчно е да подадете searchParams към визуализатора за преглед. Производственият ви маршрут (app/[...slug]/page.tsx) остава статичен с ParametricRoutePage и не се нуждае от searchParams. Вижте Настройка на хибриден CMS проект за пълната настройка с два маршрута.

Как да проверите

1. Отворете /admin на уебсайта си
2. Трябва да бъдете подканени да влезете и незабавно да се отвори админ панелът на CMS системата
3. Отворете сайта си от админ панела и потвърдете, че наслагванията и визуалният преглед в реално време работят автоматично

Наслагванията и визуалните прегледи в реално време трябва да работят автоматично.

Следващи стъпки

Настройте пълните производствени маршрути и маршрути за преглед в Настройка на хибриден CMS проект.