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