Гід з Directus CMS: headless CMS на основі бази даних для розробників

Гайд по Directus CMS: headless CMS із підходом «спершу база даних» для розробників

Більшість headless CMS пропонують будувати модель даних усередині їхньої системи. Directus діє навпаки: він огортає вашу наявну SQL-базу даних і миттєво надає REST та GraphQL API, не чіпаючи вашу схему. Маючи ~34,5 тис. зірок на GitHub і серед користувачів такі компанії, як Tripadvisor, Adobe та Mercedes-Benz, це один із найпотужніших open-source варіантів серед найкращих headless CMS у 2026 році.

Що таке Directus CMS?

Directus — це headless CMS з відкритим вихідним кодом, яка огортає будь-яку наявну SQL-базу даних миттєвими REST та GraphQL API. На відміну від Strapi чи Payload, Directus не створює власну схему бази даних — він віддзеркалює вашу. Він підтримує 7 баз даних, зокрема PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB та MS-SQL, і є безкоштовним для організацій із доходом до 5 мільйонів доларів згідно з офіційною документацією Directus.

Уявіть його як розумний шар, що лежить поверх вашої бази даних. Ви берете наявну базу даних PostgreSQL із 50 таблицями, підключаєте до неї Directus — і за кілька хвилин отримуєте повноцінний інтерфейс адміністратора, керування доступом на основі ролей, а також ендпоінти REST і GraphQL. Жодних скриптів міграції. Жодної реструктуризації даних.

Саме це на практиці означає «database-first», і це принципово відрізняється від підходу code-first, який використовує Strapi (де ви визначаєте типи контенту, що генерують таблиці бази даних), чи вбудованого у фреймворк підходу Payload CMS (де CMS живе всередині вашого застосунку на Next.js).

Пояснення архітектури з пріоритетом бази даних

Коли ми вперше підключили Directus до наявної бази даних PostgreSQL для клієнтського проєкту, нас здивувало, наскільки мало налаштувань для цього знадобилося. Directus інтроспектує схему вашої бази даних — таблиці стають «колекціями», стовпці стають «полями» — і будує свій інтерфейс адміністрування на основі того, що вже існує.

Це означає, що ваші дані ніколи не опиняються замкненими у пропрієтарному форматі. Якщо ви вирішите припинити користуватися Directus завтра, ваша база даних залишиться стандартною SQL-базою. Спробуйте зробити те саме з Contentful або Sanity, де ваш контент зберігається на їхніх серверах у їхньому форматі.

До того ж Directus — це не лише CMS. Команда позиціонує його як композитну платформу для роботи з даними: люди використовують його для BaaS (Backend as a Service — бекенд як послуга), внутрішніх адмін-панелей та кастомних дашбордів. Використання як CMS є найпопулярнішим, але архітектура підтримує значно більше.

Ключові можливості Directus

Directus пропонує подвійні API — REST та GraphQL, детальні права доступу на основі ролей, вбудовану автоматизацію Flows, Data Studio з підтримкою перетягування, керування цифровими ресурсами та нативну підтримку i18n для понад 50 мов. Починаючи з версії 11.15, він включає спільне редагування та AI-асистента як нативні функції, а не сторонні плагіни.

Ось що найважливіше, якщо ви оцінюєте Directus для проєкту:

Подвійні API: REST і GraphQL

Обидва API доступні одночасно на основі одних і тих самих даних, без жодних налаштувань. Вам не потрібно обирати щось одне — ви отримуєте обидва. Ваша мобільна команда може використовувати REST, тоді як ваш веб-фронтенд працює з GraphQL. REST API дотримується передбачуваного шаблону (/items/{collection}), а ендпоінт GraphQL розташований за адресою /graphql.

Потоки та автоматизація

Потоки — це подієво-орієнтована система автоматизації Directus, вбудована безпосередньо в інтерфейс Data Studio. Ви можете запускати робочі процеси на основі подій CRUD (створення, оновлення, видалення елемента), розкладів (у стилі cron) або вебхуків. Операції включають надсилання електронних листів, виконання HTTP-запитів, запуск власного JavaScript-коду та перетворення даних.

Для команд, які розробляють за допомогою ШІ, у Directus навіть є власний сервер гід з Model Context Protocol (MCP), але про це детальніше в розділі про v11.

Розширення та кастомізація

Система розширень підтримує хуки (серверні обробники подій), кастомні ендпоінти, UI-панелі, повноцінні модулі та вузли операцій для Flows. Розширення створюються на Vue.js для фронтенду та чистому Node.js для бекенду. У версії v11.0 структуру розширень було змінено з папок за типами на чистіший пакетний формат.

Ось як Directus виглядає на тлі конкурентів за функціональністю:

Що нового в Directus v11 (2025–2026)

Directus v11 представив нативну підтримку MCP-сервера (v11.13), AI Assistant із підтримкою OpenAI, Anthropic і Gemini (v11.14), спільне редагування з індикаторами присутності в реальному часі (v11.15) та глобальні чернетки версій із дозволами на розгортання на основі ролей (v11.16). Усі ці функції є вбудованими, а не розширеннями спільноти.

Саме тут Directus розвивається найшвидше, і це розділ, який більшість конкурентів повністю пропускають. Лише один із шести найкращих рейтингових посібників висвітлює щось із цього.

Сервер MCP та AI-асистент

У релізі v11.13 Directus став однією з перших CMS із вбудованим сервером MCP. Якщо ви користуєтеся Claude, ChatGPT або будь-яким іншим AI-інструментом із підтримкою MCP, він може керувати вашим контентом у Directus безпосередньо: читати колекції, створювати елементи, оновлювати поля — і все це з дотриманням ваших прав доступу RBAC. Якщо ви вперше чуєте про MCP, наш посібник із Model Context Protocol (MCP) детально пояснює цей протокол.

AI-асистент (v11.14) — це окрема від MCP функція: вбудований чат-інтерфейс у Data Studio, який підтримує OpenAI, Anthropic, Gemini і навіть локальні моделі через Ollama. Починаючи з v11.16, він став мультимодальним: ви можете завантажувати зображення та PDF-файли безпосередньо в AI-чат для обробки.

Спільне редагування та чернетки версій

Спільне редагування з'явилося у v11.15 разом з індикаторами присутності в реальному часі (ви бачите, хто ще редагує той самий елемент) та блокуванням на рівні полів для запобігання конфліктам. У цьому ж релізі було додано модуль розгортання Vercel із дозволами на розгортання на основі ролей.

v11.16 розширив можливості стейджингу контенту завдяки глобальним чернеткам версій. Кожен елемент із версіями автоматично отримує копію-чернетку. Редактори можуть переглядати зміни на тлі опублікованої версії та просувати чернетки, коли все готово. Дозволи на розгортання на основі ролей означають, що ваша контент-команда може готувати зміни, не ризикуючи випадково відправити їх у продакшн.

Початок роботи з Directus (налаштування Docker)

Ви можете запустити Directus локально за допомогою Docker менш ніж за 2 хвилини. Створіть файл docker-compose.yml з образом directus/directus, задайте підключення до бази даних та облікові дані адміністратора як змінні середовища, а потім виконайте docker compose up. Directus запускається за адресою localhost:8055.

Налаштування Docker зайняло у нас менш ніж 2 хвилини з холодного старту. Ось повний docker-compose.yml із включеним PostgreSQL — не лише контейнер Directus, а весь стек:

# docker-compose.yml
version: \"3\"
services:
  database:
    image: postgis/postgis:16-3.4-alpine
    environment:
      POSTGRES_USER: directus
      POSTGRES_PASSWORD: directus
      POSTGRES_DB: directus
    volumes:
      - directus_data:/var/lib/postgresql/data

  directus:
    image: directus/directus:11.16
    ports:
      - \"8055:8055\"
    depends_on:
      - database
    environment:
      KEY: \"your-random-key-here\"
      SECRET: \"your-random-secret-here\"
      ADMIN_EMAIL: \"[email protected]\"
      ADMIN_PASSWORD: \"change-me-please\"
      DB_CLIENT: \"pg\"
      DB_HOST: \"database\"
      DB_PORT: \"5432\"
      DB_DATABASE: \"directus\"
      DB_USER: \"directus\"
      DB_PASSWORD: \"directus\"
    volumes:
      - directus_uploads:/directus/uploads

volumes:
  directus_data:
  directus_uploads:

Run it:

docker compose up -d

Відкрийте http://localhost:8055, увійдіть із обліковими даними адміністратора, які ви задали, — і ви опинитеся в Data Studio. Звідси можна створювати колекції (таблиці), визначати поля (стовпці) та одразу починати керувати вмістом. Змінні середовища KEY і SECRET використовуються для генерації JWT-токенів — у продакшені використовуйте випадкові рядки, а не наведені вище заповнювачі.

Запити до даних за допомогою Directus SDK

Directus JavaScript SDK забезпечує типобезпечний доступ до ваших даних як через REST, так і через GraphQL. Встановіть @directus/sdk, створіть клієнт за допомогою createDirectus() і використовуйте readItems() для отримання колекцій із вбудованою фільтрацією, сортуванням і вибором полів.

Композиційний патерн SDK видався інтуїтивно зрозумілим після роботи з бібліотеками на кшталт клієнта Supabase. Ви починаєте з базового клієнта й додаєте можливості шляхом композиції функцій:

// lib/directus.ts
import { createDirectus, rest, readItems, createItem } from '@directus/sdk';

const client = createDirectus('http://localhost:8055').with(rest());

// Fetch published articles with specific fields
const articles = await client.request(
  readItems('articles', {
    fields: ['id', 'title', 'slug', 'content', 'author.name'],
    filter: {
      status: { _eq: 'published' }
    },
    sort: ['-date_published'],
    limit: 10
  })
);

Створення елементів дотримується того самого патерну:

// Create a new article
const newArticle = await client.request(
  createItem('articles', {
    title: 'My New Post',
    slug: 'my-new-post',
    content: '<p>Hello from Directus.</p>',
    status: 'draft'
  })
);

Для автентифікації ви обираєте між staticToken() (для міжсерверної комунікації) та authentication() (для користувацьких застосунків із процесом входу):

import { createDirectus, rest, staticToken } from '@directus/sdk';

// Server-side with static token
const client = createDirectus('http://localhost:8055')
  .with(staticToken('your-api-token'))
  .with(rest());

Приклади REST API

Кожен метод SDK має еквівалентну кінцеву точку REST. Якщо ви надаєте перевагу роботі безпосередньо з curl або fetch:

# Отримання опублікованих статей
curl "http://localhost:8055/items/articles?filter[status][_eq]=published&sort=-date_published&limit=10&fields=id,title,slug"
# Створення нового елемента
curl -X POST "http://localhost:8055/items/articles" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"title": "My Post", "status": "draft"}'

Запити GraphQL

Ті самі дані доступні через GraphQL за адресою /graphql:

query {
  articles(
    filter: { status: { _eq: "published" } }
    sort: ["-date_published"]
    limit: 10
  ) {
    id
    title
    slug
    content
    author {
      name
    }
  }
}

GraphQL не потрібно окремо налаштовувати чи вмикати — він завжди доступний поряд із REST.

Directus із Next.js (інтеграція з фреймворком)

Підключення Directus до Next.js складається з трьох кроків: встановіть @directus/sdk, створіть клієнт lib/directus.ts і отримуйте дані у своїх серверних компонентах (Server Components) за допомогою readItems(). Directus повертає сирий JSON, тож ви маєте повний контроль над рендерингом без жодних специфічних для постачальника компонентів.

Це найчистіша частина роботи з Directus. Немає жодного спеціального адаптера для фреймворку, жодних специфічних для Directus React-компонентів, жодного плагіна для збірки. Це просто отримання даних. Якщо ви працювали з будь-яким REST API у Next.js, ви вже знаєте, як це працює. Для контексту щодо вибору фреймворку дивіться наше порівняння Next.js і Remix.

Спочатку створіть спільний клієнт (це той самий файл із розділу про SDK, але налаштований для вашого розгорнутого екземпляра):

// lib/directus.ts
import { createDirectus, rest, staticToken, readItems } from '@directus/sdk';

const directus = createDirectus(process.env.DIRECTUS_URL!)
  .with(staticToken(process.env.DIRECTUS_TOKEN!))
  .with(rest());

export default directus;
export { readItems };

Потім використовуйте його в серверному компоненті — без useEffect, без станів завантаження, просто async/await:

// app/blog/page.tsx
import directus, { readItems } from '@/lib/directus';

export default async function BlogPage() {
  const posts = await directus.request(
    readItems('posts', {
      fields: ['id', 'title', 'slug', 'excerpt', 'date_published'],
      filter: { status: { _eq: 'published' } },
      sort: ['-date_published'],
    })
  );

  return (
    <main>
      <h1>Blog</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.slug}`}>{post.title}</a></h2>
          <p>{post.excerpt}</p>
          <time>{post.date_published}</time>
        </article>
      ))}
    </main>
  );
}

Ось і все. Жодної прив'язки до постачальника. Той самий підхід працює з Astro, Nuxt, SvelteKit або будь-яким фреймворком, який може виконувати HTTP-запити. Офіційна документація Directus містить окремі посібники для Astro та Nuxt, якщо вони вам потрібні, але патерн ідентичний: створити клієнт, викликати readItems(), відрендерити.

Ціноутворення та ліцензування Directus CMS (2026)

Directus безкоштовний для самостійного розгортання за ліцензією MIT для організацій, чий щорічний дохід або фінансування не перевищує 5 мільйонів доларів. Якщо цей показник перевищує 5 мільйонів доларів, для використання у продакшені потрібна комерційна ліцензія. Згідно з їхньою сторінкою тарифів, Directus Cloud починається від 25 доларів на місяць (Starter), а плани Professional коштують від 49 до 499 доларів на місяць.

Поріг доходу у $5 млн

Це найважливіший бізнес-факт про Directus, який більшість гайдів або замовчують, або взагалі пропускають. Ось як це працює:

• Річний дохід або загальне фінансування до $5 млн: Безкоштовно назавжди. Ліцензія MIT. Самостійний хостинг будь-де. Жодних обмежень функціональності.
• Понад $5 млн у продакшені: Потрібна комерційна ліцензія. Зверніться до відділу продажів Directus, щоб дізнатися ціни.
• Розробка та тестування: Завжди безкоштовно, незалежно від розміру компанії. Поріг стосується лише продакшн-розгортань.

Сума у $5 млн включає венчурне фінансування, а не лише дохід. Тож сід-стартап із $6 млн фінансування формально перевищує цей поріг. На практиці Directus не виявляє агресивності у правозастосуванні щодо компаній на ранніх стадіях, але вам варто враховувати це у своєму плануванні.

Хмарні плани

Якщо ви не хочете керувати інфраструктурою, Directus Cloud бере на себе хостинг, резервне копіювання та оновлення:

• Starter: 25 доларів на місяць, підходить для невеликих проєктів, особистих сайтів
• Professional: 49–499 доларів на місяць, масштабується відповідно до обсягу сховища, пропускної здатності та трансформацій ресурсів
• Enterprise: індивідуальні ціни, SLA, виділена інфраструктура, пріоритетна підтримка

Без ліцензування за кількість користувачів. Уся ваша команда користується одним планом. Порівняйте це з Contentful, який бере плату за кожного користувача (див. наш розбір цін Contentful), або Sanity, який стягує плату на основі використання API та пропускної здатності набору даних.

Directus проти Strapi проти Payload: порівняння

Directus обгортає наявні бази даних без міграції, Strapi генерує власну схему з типів контенту, а Payload вбудовується безпосередньо у ваш застосунок Next.js. Directus підтримує 7 баз даних, Strapi — 2, і Payload — 2. Усі три мають відкритий код, але їхні філософії суттєво різняться.

Маючи досвід побудови проєктів як на Strapi, так і на Directus, можу сказати, що найбільша відмінність полягає в тому, як вони ставляться до вашої бази даних. У Strapi ви визначаєте типи контенту в адмін-панелі або в коді, і Strapi створює та керує таблицями бази даних за вас. У Directus база даних є джерелом істини — Directus зчитує її та адаптується.

Коли обирати Directus: У вас є наявна база даних, вам потрібні одразу REST і GraphQL без додаткових налаштувань, або вам потрібна підтримка менш поширених баз даних, як-от OracleDB чи CockroachDB.

Коли обирати Strapi: Вам потрібна найбільша екосистема та спільнота, ви віддаєте перевагу визначенню типів контенту через інтерфейс, або ви починаєте з нуля без наявної бази даних. Детальніше читайте в нашому повному гайді по Strapi.

Коли обирати Payload: Ви хочете, щоб CMS була вбудована безпосередньо у ваш застосунок Next.js, ви віддаєте перевагу конфігурації на основі TypeScript, або вам потрібен Local API, який повністю оминає HTTP. Дивіться наш детальний огляд Payload CMS для повної картини.

Коли НЕ варто використовувати Directus

Directus не підійде, якщо вам потрібен візуальний конструктор сторінок, тісно інтегрований фреймворк Next.js або NoSQL-бекенд. Він також створює зайве навантаження для простих проєктів, де цілком вистачило б flat-file CMS або WordPress.

Ми бачили, як команди обирали Directus, хоча не мали б цього робити, і зазвичай це один із таких випадків:

• Вам потрібен візуальний конструктор сторінок. Data Studio від Directus чудово підходить для керування структурованими даними, але це не drag-and-drop конструктор сайтів. Якщо візуальне редагування для вас у пріоритеті, придивіться до Storyblok — порівняння є в нашому гайді по Storyblok.
• Ви зробили вибір на користь NoSQL. Directus за задумом працює лише з SQL. Якщо ваші дані зберігаються в MongoDB, природним вибором буде Payload CMS.
• Ваш проєкт — простий блог. Розгортати Docker, PostgreSQL і Directus для особистого блогу — це серйозний overkill. WordPress, Astro з markdown-файлами або навіть Ghost дадуть вам змогу публікуватися значно швидше.
• Ви хочете CMS всередині фреймворку. Якщо ви хочете, щоб ваша CMS жила всередині кодової бази Next.js як повноцінний компонент, Payload робить це нативно. Directus завжди залишається окремим сервісом.
• Ви — велика організація. Якщо дохід вашої компанії перевищує поріг у $5 млн, для продакшену знадобиться комерційна ліцензія. Зважте ці витрати порівняно з повністю open-source альтернативами, як-от Strapi чи Payload, де self-hosting безкоштовний незалежно від доходу.

Жоден із цих пунктів не є недоліком — це свідомі проєктні рішення. Directus — це платформа для роботи з даними, а не конструктор сайтів. Розуміння цієї різниці заощадить вам місяці розчарувань.

Поширені запитання

Що таке Directus CMS?

Directus — це headless CMS з відкритим вихідним кодом, яка загортає будь-яку наявну SQL-базу даних у миттєві REST та GraphQL API. Вона підтримує PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB та MS-SQL. На відміну від традиційних CMS, Directus не створює власної схеми — вона автоматично читає та віддзеркалює структуру вашої наявної бази даних.

Чи справді Directus безкоштовний?

Directus безкоштовний для розміщення на власному сервері за ліцензією MIT для організацій із річним доходом або загальним фінансуванням менше 5 мільйонів доларів. Понад цей поріг для використання у продакшні потрібна комерційна ліцензія. Середовища розробки та тестування завжди безкоштовні. Directus Cloud, їхній керований хостинг, коштує від 25 доларів на місяць.

Чим Directus відрізняється від Strapi?

Directus працює за принципом «спочатку база даних» — він обгортає вашу наявну SQL-базу даних, не змінюючи її схему. Strapi працює за принципом «спочатку код» — ви визначаєте типи контенту, а Strapi генерує таблиці бази даних. Directus підтримує 7 баз даних, тоді як Strapi — лише 2. Обидва пропонують REST API, але Directus має вбудований GraphQL, тоді як для Strapi потрібен плагін.

Які бази даних підтримує Directus?

Directus підтримує сім SQL-баз даних: PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB та MS-SQL. Він підключається до вашої наявної бази даних і автоматично виконує інтроспекцію схеми. Така підтримка кількох баз даних є унікальною серед headless CMS — більшість конкурентів підтримують лише одну або дві СУБД.

Чи може Directus замінити WordPress?

Directus може замінити WordPress для керування вмістом, особливо для headless-проєктів або проєктів на основі API. Однак Directus не має вбудованого фронтенду, тем чи конструктора сторінок. Вам доведеться створити власний фронтенд за допомогою фреймворку на кшталт Next.js або Astro. Для простих блогів чи сайтів, які потребують візуального редагування, WordPress залишається практичнішим рішенням.

Чи має Directus візуальний редактор?

Directus включає Data Studio — потужний інтерфейс адміністратора для керування структурованими даними, створення дашбордів і налаштування прав доступу. Проте він не має візуального конструктора сторінок чи WYSIWYG-редактора сайту, як-от Storyblok або WordPress. Directus призначений для керування даними, а не для перетягування елементів під час верстки сторінок.

Чи підходить Directus для електронної комерції?

Directus добре працює як система управління інформацією про товари (PIM): ви можете моделювати каталоги товарів, керувати атрибутами та надавати дані через API. Проте це не платформа електронної комерції. Ви не отримаєте кошика, процесу оформлення замовлення чи обробки платежів. Поєднайте його з Shopify, Saleor або Medusa для транзакційного рівня.

Чи можна використовувати Directus із Next.js?

Так. Встановіть пакет @directus/sdk, створіть клієнт, що вказує на ваш екземпляр Directus, і отримуйте дані в Server Components за допомогою readItems(). Directus повертає звичайний JSON, тому спеціальні React-компоненти від постачальника не потрібні. Такий самий підхід працює з будь-яким JavaScript-фреймворком, зокрема Astro, Nuxt і SvelteKit.

Чи підтримує Directus спільне редагування?

Так, починаючи з версії 11.15 (лютий 2026 року). Directus має вбудоване спільне редагування з індикаторами присутності в реальному часі, які показують, хто що редагує, та блокуванням на рівні полів для запобігання конфліктам. Це вбудована функція, а не плагін. У поєднанні з глобальними чернетками у версії 11.16 команди можуть готувати та переглядати зміни перед публікацією.

Що таке MCP-сервер Directus?

У версії 11.13 (листопад 2025 року) Directus представив нативний сервер Model Context Protocol. MCP дає змогу таким інструментам зі штучним інтелектом, як Claude та ChatGPT, безпосередньо взаємодіяти з вашим контентом у Directus — читати, створювати та оновлювати елементи за допомогою природної мови. MCP-сервер дотримується ваших наявних прав доступу RBAC, тож доступ ШІ підпорядковується тим самим правилам, що й для користувачів-людей.