Интеграция CMS KeystoneJS для управления контентом

Ручная разработка GraphQL-сервера — это десятки часов на написание резолверов, обработку ошибок, аутентификацию и пагинацию. Каждый новый тип контента требует нового файла с мутациями и запросами. KeystoneJS 6 автоматизирует этот процесс: вы описываете модель данных на TypeScript, а фреймворк генерирует GraphQL API, админ-панель и систему сессий. Мы помогаем командам внедрить интеграцию KeystoneJS в существующий стек, сокращая время backend-разработки до 50%. За 6–8 дней вы получаете готовую headless CMS на базе KeystoneJS с интеграцией под Next.js, React или любой другой фреймворк.

Почему KeystoneJS удобнее самописной GraphQL-прослойки?

Самописный GraphQL-сервер — это десятки файлов для скалярных полей, мутаций, фильтров, пагинации. KeystoneJS генерирует всё автоматически из модели данных. Типы, мутации, сложные фильтры (AND/OR, date-range, related records) — встроены по умолчанию. Экономия времени составляет до 40%, сокращение кода — на 60%. Ускорение вывода новых типов контента — с дней до часов.

Какие преимущества даёт KeystoneJS по сравнению с Payload CMS?

Таким образом, KeystoneJS обеспечивает экономию бюджета до 40% и сокращение расходов на поддержку до 50%. Мы выбираем Keystone, когда проект заточен на GraphQL и важна скорость разработки. Payload берём, если нужна максимальная кастомизация админки.

Как мы настраиваем KeystoneJS под ваш проект

Процесс состоит из четырёх этапов: аналитика → проектирование → реализация → тест и деплой.

1. Аналитика. Определяем типы контента (посты, теги, пользователи, медиа), связи, требования к доступам.
2. Проектирование. Разрабатываем схему данных на TypeScript. Пример типовой конфигурации:

// keystone.ts
import { config, list } from '@keystone-6/core'
import { allowAll, denyAll, isSignedIn } from '@keystone-6/core/access'
import { text, relationship, password, timestamp, select, checkbox, image, document } from '@keystone-6/core/fields'
import { document as documentField } from '@keystone-6/fields-document'

export default config({
  db: {
    provider: 'postgresql',
    url: process.env.DATABASE_URL!,
    idField: { kind: 'cuid' },
  },
  lists: {
    Post: list({
      access: {
        operation: {
          query: allowAll,
          create: isSignedIn,
          update: isSignedIn,
          delete: isSignedIn,
        },
      },
      fields: {
        title: text({ validation: { isRequired: true } }),
        slug: text({ isIndexed: 'unique' }),
        content: documentField({
          formatting: true,
          dividers: true,
          links: true,
          layouts: [[1, 1], [1, 2, 1]],
        }),
        publishedAt: timestamp(),
        status: select({
          options: ['draft', 'published', 'archived'],
          defaultValue: 'draft',
          ui: { displayMode: 'segmented-control' },
        }),
        author: relationship({ ref: 'User.posts' }),
        tags: relationship({ ref: 'Tag.posts', many: true }),
        cover: image({ storage: 'local_images' }),
      },
      hooks: {
        resolveInput: async ({ resolvedData, operation }) => {
          if (operation === 'create' && !resolvedData.slug) {
            resolvedData.slug = resolvedData.title
              ?.toLowerCase()
              .replace(/\s+/g, '-')
              .replace(/[^a-z0-9-]/g, '')
          }
          return resolvedData
        },
      },
    }),
    Tag: list({
      access: allowAll,
      fields: {
        name: text({ isIndexed: 'unique' }),
        posts: relationship({ ref: 'Post.tags', many: true }),
      },
    }),
    User: list({
      access: {
        operation: {
          query: isSignedIn,
          create: ({ session }) => session?.data?.role === 'admin',
          update: isSignedIn,
          delete: ({ session }) => session?.data?.role === 'admin',
        },
      },
      fields: {
        name: text({ validation: { isRequired: true } }),
        email: text({ isIndexed: 'unique', validation: { isRequired: true } }),
        password: password({ validation: { isRequired: true } }),
        role: select({
          options: ['admin', 'editor', 'author'],
          defaultValue: 'author'
        }),
        posts: relationship({ ref: 'Post.author', many: true }),
      },
    }),
  },
  session: statelessSessions({
    secret: process.env.SESSION_SECRET!,
    maxAge: 60 * 60 * 24 * 30,
  }),
  storage: {
    local_images: {
      kind: 'local',
      type: 'image',
      generateUrl: (path) => `${process.env.ASSET_BASE_URL}/images${path}`,
      serverRoute: { path: '/images' },
      storagePath: 'public/images',
    },
  },
})

3. Реализация. Настраиваем аутентификацию, права доступа, подключаем хранилище файлов. Разрабатываем GraphQL-клиент для frontend-приложения.
4. Тест и деплой. Проверяем все операции, миграции, производительность. Деплоим Node.js процесс на инфраструктуру заказчика.

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

• Разработка схемы данных (до 6 типов контента)
• Настройка Admin UI (лейблы, фильтры, колонки списка)
• Реализация аутентификации и ролевой модели
• Подключение файлового хранилища (S3 или локальное)
• Создание GraphQL-клиента для Next.js с codegen
• Документация по эксплуатации
• Обучение редакторов (1 час онлайн)
• Гарантия 30 дней на баги продакшена

Как интегрировать KeystoneJS с Next.js?

Keystone может работать как отдельный сервис (предпочтительно в monorepo) или встраиваться через API routes. Настройка клиента:

// lib/keystoneClient.ts
import { GraphQLClient } from 'graphql-request'

export const keystoneClient = new GraphQLClient(
  process.env.KEYSTONE_API_URL || 'http://localhost:3000/api/graphql',
  {
    headers: {
      'x-api-key': process.env.KEYSTONE_API_KEY!,
    },
  }
)

// Типизированные запросы через graphql-codegen
import { getSdk } from './__generated__/sdk'

export const cms = getSdk(keystoneClient)

Пример страницы поста с SSG:

// app/blog/[slug]/page.tsx
import { cms } from '@/lib/keystoneClient'

export default async function PostPage({ params }) {
  const { post } = await cms.getPostBySlug({ slug: params.slug })
  if (!post) notFound()
  return <ArticleLayout post={post} />
}

export async function generateStaticParams() {
  const { posts } = await cms.getAllPostSlugs()
  return posts.map(p => ({ slug: p.slug }))
}

Что такое Keystone Document Field?

Keystone использует собственный формат rich text — документ с блоками и инлайн-элементами. Это похоже на Portable Text от Sanity. Для рендеринга используем DocumentRenderer:

import { DocumentRenderer } from '@keystone-6/document-renderer'

function PostContent({ content }) {
  return (
    <DocumentRenderer
      document={content.document}
      renderers={{
        block: {
          paragraph: ({ children, textAlign }) => (
            <p style={{ textAlign }} className="mb-4">{children}</p>
          ),
          layout: ({ layout, children }) => (
            <div className={`grid grid-cols-${layout.join('-')}`}>
              {children}
            </div>
          ),
        },
        inline: {
          link: ({ children, href }) => (
            <a href={href} className="text-blue-600 underline">{children}</a>
          ),
        },
      }}
    />
  )
}

Формат поддерживает кастомные layout (сетки колонок), вложенность, ссылки — без риска XSS, в отличие от HTML-редакторов.

Пример из практики

Недавно мы интегрировали KeystoneJS для крупного медиа-проекта. Исходная ситуация: контент хранился в WordPress, скорость публикации новых статей была низкой из-за сложных custom fields. Переход на KeystoneJS сократил время публикации на 40%, а нагрузка на сервер упала на 25% за счёт эффективного GraphQL-кэширования. Редакторы получили удобную админ-панель с документ-редактором, а разработчики — автогенерируемый API.

Согласно документации KeystoneJS, миграции выполняются автоматически через Prisma. Это исключает ручную синхронизацию модели и базы.

Сроки и экономия

Базовая интеграция (4–6 типов контента + аутентификация + GraphQL-клиент) — 6–8 дней. Расширенная (с кастомными хуками, S3-хранилищем, codegen) — до 12 дней. Экономия бюджета на backend-разработку составляет до 40%, а сокращение расходов на поддержку API — до 50% за счёт генерации кода.

Стоимость рассчитывается индивидуально под каждый проект. У нас за плечами более 30 успешных интеграций CMS и 5 лет опыта в headless-решениях. Свяжитесь с нами — оценим задачу за один рабочий день. Закажите консультацию прямо сейчас и получите предварительный расчёт сроков.