Подключение панели администратора к вашему веб-сайту — это простой шаг

Зачем это нужно

Это обеспечивает удобную работу с редактором. Подключив панель администратора к вашему веб-сайту через прокси, вы сможете редактировать сайт по тому же 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-проекта.