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

Навіщо це потрібно

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