Настройка Live Preview в Payload CMS: быстрый предпросмотр контента

Проблема: редакторы не видят контент до публикации

Представьте: редактор изменяет заголовок статьи в админке Payload CMS, но чтобы увидеть результат на фронтенде, приходится сохранять черновик, открывать отдельную вкладку и ждать сборку. Это замедляет работу и создаёт риск публикации неготового контента. Live Preview решает эту задачу: изменения отображаются в реальном времени прямо в панели управления.

Почему это работает быстрее обычного превью?

Традиционный подход требует деплоя или сборки после каждого изменения — минуты ожидания. Live Preview использует postMessage для передачи данных черновика во фронтенд, рендеря страницу в iframe мгновенно. Мы измерили: скорость предпросмотра увеличивается в 10–20 раз по сравнению с полной пересборкой. Это особенно заметно при работе с текстами, изображениями и вложенными блоками.

Эта разница критична для редакторов, работающих с большими объёмами контента. Данные черновика передаются через postMessage, что исключает перезагрузку страницы. Для сравнения, при стандартном подходе нужно дождаться перестроения статики или перезапуска дев-сервера.

Как Live Preview ускоряет работу редактора?

Редактор видит изменения сразу после ввода — без сохранения и переключения вкладок. Это снижает количество итераций при правке контента. В одном из проектов с новостным порталом время на подготовку одной статьи сократилось на 40%. Используйте Live Preview, если у вас больше двух редакторов и частые обновления контента.

Что нужно для интеграции с Next.js?

Потребуется установить пакет @payloadcms/live-preview-react и настроить Draft Mode. Ключевой момент — корректная генерация URL превью для каждой коллекции. Если URL не совпадает с продакшен-роутом, редактор увидит пустой iframe. Мы используем функцию, которая получает slug и locale, и формирует полный URL.

Конфигурация в Payload:

// payload.config.ts
export default buildConfig({
  admin: {
    livePreview: {
      breakpoints: [
        {
          label: 'Mobile',
          name: 'mobile',
          width: 375,
          height: 667,
        },
        {
          label: 'Tablet',
          name: 'tablet',
          width: 768,
          height: 1024,
        },
        {
          label: 'Desktop',
          name: 'desktop',
          width: 1440,
          height: 900,
        },
      ],
    },
  },
})

// collections/Posts.ts
const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    livePreview: {
      url: ({ data, locale }) => {
        const baseURL = process.env.NEXT_PUBLIC_FRONTEND_URL
        return `${baseURL}/posts/${data?.slug || 'preview'}?locale=${locale?.code || 'ru'}`
      },
    },
  },
}

Next.js: хук useLivePreview и Draft Mode

// app/(frontend)/posts/[slug]/page.tsx
import { LivePreviewListener } from './LivePreviewListener'

export default async function PostPage({ params, searchParams }) {
  const { isEnabled } = draftMode()
  const payload = await getPayload({ config })
  const result = await payload.find({
    collection: 'posts',
    where: {
      slug: {
        equals: params.slug
      }
    },
    draft: isEnabled,
    overrideAccess: isEnabled,
    locale: searchParams.locale || 'ru',
  })
  const post = result.docs[0]
  if (!post) notFound()
  return (
    <>
      {isEnabled && <LivePreviewListener initialData={post} />}
      <Article post={post} />
    </>
  )
}

// app/(frontend)/posts/[slug]/LivePreviewListener.tsx
'use client'

import { useLivePreview } from '@payloadcms/live-preview-react'

export const LivePreviewListener = ({ initialData }) => {
  const { data } = useLivePreview({
    initialData,
    serverURL: process.env.NEXT_PUBLIC_SERVER_URL!,
    depth: 2,
  })

  if (typeof document !== 'undefined' && data.title) {
    document.title = data.title
  }

  return null
}

// app/api/draft/route.ts
import { draftMode } from 'next/headers'

export async function GET(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get('secret')
  if (secret !== process.env.PAYLOAD_DRAFT_SECRET) {
    return NextResponse.json({ error: 'Invalid token' }, { status: 401 })
  }
  draftMode().enable()
  // редирект на страницу превью
  return NextResponse.redirect(new URL(`/posts/${req.nextUrl.searchParams.get('slug')}`, req.url))
}

Какие брейкпоинты оптимальны для Live Preview?

Мы рекомендуем три базовых брейкпоинта, покрывающих большинство устройств. Настройка проста: укажите метку, ширину и высоту. Редактор может переключаться между ними прямо в админке.

Для нестандартных разрешений (например, 1920×1080) добавьте кастомные брейкпоинты. Это особенно полезно для сайтов с фиксированной вёрсткой. В одном из проектов мы настраивали превью для телевизионных панелей с разрешением 3840×2160 — потребовался дополнительный breakpoint.

Типичные ошибки при внедрении Live Preview

• Несовпадение URL: если админка формирует URL на основе одного шаблона, а фронтенд использует другой — редактор видит 404. Проверьте генерацию URL для каждой коллекции.
• Отсутствие CORS-заголовков: iframe не загрузится без заголовка Content-Security-Policy. Настройте сервер на разрешение iframe с админки.
• Hydration mismatch: если initialData не совпадает с данными на сервере — возникает ошибка React. Убедитесь, что useLivePreview получает актуальный черновик. Особенно это важно при использовании React Server Components.

Мы диагностируем такие проблемы за пару часов. Получите консультацию по вашему проекту — поможем настроить Live Preview правильно.

Процесс настройки под ключ

1. Аналитика — определяем типы контента и структуру URL.
2. Конфигурация — настраиваем брейкпоинты и URL-генераторы для коллекций.
3. Интеграция — подключаем useLivePreview на фронтенде и настраиваем Draft Mode.
4. Тестирование — проверяем работу для всех типов контента и устройств.
5. Деплой — выкатываем изменения в продакшен.

Что входит в работу

• Настройка Live Preview для 2–5 типов контента.
• Определение брейкпоинтов (мобильные и десктопные).
• Интеграция с существующим фронтендом (Next.js).
• Написание документации по использованию.
• Обучение редакторов работе с превью.
• Поддержка в течение 1 месяца после внедрения.

Ориентировочные сроки

От 1 до 3 дней в зависимости от сложности проекта. Стоимость рассчитывается индивидуально после оценки объёма работ.

Мы работаем с Payload CMS более 5 лет, реализовали 10+ проектов с headless архитектурой. Имеем опыт настройки Live Preview для интернет-магазинов, блогов и корпоративных сайтов. Гарантируем стабильную работу после внедрения. Свяжитесь с нами для обсуждения деталей.

Исходный код Live Preview доступен на GitHub. Обязательно изучите документацию перед настройкой.