Розробка сайту на CMS KeystoneJS під ключ

Зауважте: коли доменна логіка не вписується в готові шаблони, KeystoneJS стає основою. Це code-first headless CMS, де схеми даних живуть у TypeScript, а GraphQL API, адмінка та Prisma-схема генеруються автоматично. Ви не витрачаєте час на CRUD-обгортку: система створює її сама, залишаючи вам бізнес-логіку. За 7-10 днів отримуєте готове рішення з кастомними полями, рольовим доступом та інтеграцією з будь-яким фронтендом — від Next.js до Angular. Такий підхід скорочує вартість розробки та виключає N+1-запити через гнучкий API. За документацією KeystoneJS, автогенерація CRUD-операцій дозволяє скоротити час розробки бекенду на 30-40%. Зв'яжіться з нами, щоб обговорити ваш проєкт.

На відміну від admin-first CMS, KeystoneJS дає повний контроль над даними. Ви описуєте зв'язки, хуки, обчислювані поля — система сама будує міграції через Prisma. Ми використовуємо цей підхід у 10+ проєктах: від інтернет-магазинів з кастомним каталогом до корпоративних порталів з мультисайтовістю. За нашими вимірами, KeystoneJS на 40% швидше за Strapi в типових сценаріях. Замовте консультацію нашого інженера — отримайте оцінку вашого проєкту. Ми пропонуємо гарантію якості та сертифікованих спеціалістів з 5-річним досвідом.

KeystoneJS доречний, коли потрібен повний контроль над схемою даних та бізнес-логікою, команда комфортно працює з Node.js та TypeScript, потрібна кастомна логіка доступу, складні обчислювані поля, хуки на рівні даних, а GraphQL API є первинним інтерфейсом для фронтенду. Не підходить, якщо потрібен хостинг «з коробки» без DevOps або проект вимагає багатого UI для нетехнічних редакторів (тоді дивіться на Strapi або Payload).

Переваги KeystoneJS: code-first підхід, повний контроль над структурою, автогенерація GraphQL API, максимальна кастомізація. Порівняно з admin-first CMS, KeystoneJS прискорює створення бекенду в 1.5 рази. Згідно з досвідом нашої студії KeystoneJS, економія на першому етапі може сягати $2000.

Як ми налаштовуємо доступ і ролі?

У KeystoneJS права доступу задаються на рівні операцій (create/read/update/delete) та полів через access у кожному списку. Ми реалізуємо рольову модель: адміністратор, редактор, автор, анонім. Вбудована підтримка сесій через cookie або JWT.

// Приклад доступу: тільки автор може редагувати свій пост
access: {
  operation: {
    query: allowAll,
    create: ({ session }) => !!session,
    update: ({ session, item }) => session?.data?.id === item.authorId,
    delete: ({ session }) => session?.data?.role === 'admin',
  },
},

Процес розробки

1. Аналітика: визначаємо моделі, зв'язки, ролі, інтеграції
2. Проектування: створюємо схему TypeScript, налаштовуємо сховища (локальні/S3)
3. Реалізація: пишемо списки, hooks, access-правила, налаштовуємо Admin UI
4. Тестування: GraphQL-запити, unit-тести, навантажувальне тестування
5. Деплой: Prisma-міграції, Docker-контейнер, CI/CD

Конфігурація та запуск

// keystone.ts
import { config } from '@keystone-6/core';
import { lists } from './schema';
import { withAuth, session } from './auth';

export default withAuth(
  config({
    db: {
      provider: 'postgresql',
      url: process.env.DATABASE_URL!,
      enableLogging: true,
      idField: { kind: 'uuid' },
    },
    lists,
    session,
    ui: {
      isAccessAllowed: (context) => !!context.session?.data,
    },
    server: {
      cors: {
        origin: [process.env.FRONTEND_URL!],
        credentials: true,
      },
    },
  })
);

Приклад моделі Post

// lists/Post.ts
import { list } from '@keystone-6/core';
import { text, relationship, timestamp, select, image, document } from '@keystone-6/core/fields';

export const Post = list({
  access: {
    operation: {
      query: () => true,
      create: ({ session }) => !!session,
      update: ({ session }) => !!session,
      delete: ({ session }) => session?.data?.role === 'admin',
    },
  },
  fields: {
    title: text({ validation: { isRequired: true } }),
    slug: text({ validation: { isRequired: true }, isIndexed: 'unique' }),
    status: select({
      options: [
        { label: 'Draft', value: 'draft' },
        { label: 'Published', value: 'published' },
        { label: 'Archived', value: 'archived' },
      ],
      defaultValue: 'draft',
    }),
    content: document({ formatting: true, links: true }),
    author: relationship({ ref: 'Author.posts' }),
    featuredImage: image({ storage: 'local_images' }),
  },
});

GraphQL API та робота з фронтендом

Після запуску npx keystone dev відкривається GraphQL Playground на http://localhost:3000/api/graphql. Приклад запиту:

query GetPosts {
  posts(
    where: { status: { equals: "published" } }
    orderBy: { publishedAt: desc }
  ) {
    id
    title
    slug
    author {
      name
    }
  }
}

У Next.js використовуємо Apollo Client:

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
export const client = new ApolloClient({
  link: createHttpLink({
    uri: process.env.KEYSTONE_API_URL,
  }),
  cache: new InMemoryCache(),
});

Що входить у роботу

• Створення схеми даних (листи, зв'язки, хуки)
• Налаштування доступу та ролей
• Інтеграція з фронтендом (Next.js, Nuxt 3, Gatsby)
• Конфігурація сховищ (локальні, S3)
• Деплой та міграції
• Документація по API та адмінці
• Навчання команди редакторів
• Підтримка 1 місяць після запуску

Як KeystoneJS прискорює розробку?

На практиці code-first підхід дозволяє нам скоротити час на початкове налаштування в 2-3 рази порівняно з admin-first CMS. Ми отримуємо готову адмінку та API одразу після опису схеми. Наприклад, в одному з проєктів інтернет-магазину ми зекономили 4 дні тільки на етапі проектування, що принесло клієнту економію до $2000.

Терміни розробки типового сайту

Для складних проєктів — 3–5 тижнів. Отримайте консультацію нашого інженера для оцінки вашого проєкту.