Розробка сайту на CMS Directus

Розробка сайту на CMS Directus

Directus — headless CMS поверх існуючої реляційної бази даних. Ключове відмінність: Directus не створює абстрактну схему даних — він працює напрямки з таблицями PostgreSQL/MySQL, які ви визначаєте. Якщо в БД є таблиця products, Directus автоматично дає до неї REST і GraphQL API, admin panel для CRUD.

Архітектура

Next.js / Nuxt / Mobile App
    ↕ REST API / GraphQL
Directus (Node.js)
    ↕
PostgreSQL / MySQL / SQLite / MS SQL

Directus — це шар поверх бази даних. Можна підключити до існуючої БД без зміни схеми.

Встановлення

npx create-directus-project@latest my-project
# Вибрати: SQLite (для розробки) або PostgreSQL

cd my-project
npx directus start
# Admin: http://localhost:8055/admin

Або через Docker:

# docker-compose.yml
version: '3'
services:
  directus:
    image: directus/directus:latest
    ports:
      - "8055:8055"
    environment:
      SECRET: your-random-secret-key
      DB_CLIENT: pg
      DB_HOST: postgres
      DB_PORT: 5432
      DB_DATABASE: directus
      DB_USER: directus
      DB_PASSWORD: directus
      ADMIN_EMAIL: [email protected]
      ADMIN_PASSWORD: admin-password
    depends_on:
      - postgres

  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: directus
      POSTGRES_USER: directus
      POSTGRES_PASSWORD: directus
    volumes:
      - postgres_data:/var/lib/postgresql/data

Collections (таблиці)

В Directus admin через Settings → Data Model → Create Collection:

Collections (таблиці БД):
- articles (id, title, slug, content, status, author, published_at)
- categories (id, name, slug, description, parent_id)
- media (вбудована)
- users (вбудована через Users system collection)

Поля відповідають колонкам таблиці. Directus підтримує всі стандартні типи PostgreSQL + спеціальні: uuid, hash, geometry, json.

REST API

# Отримати список записів
GET /items/articles?fields=id,title,slug,published_at&filter[status][_eq]=published&sort=-published_at&limit=10

# Отримати одну запис
GET /items/articles/123?fields=*,author.name,category.name

# Створити запис
POST /items/articles
{ "title": "New Article", "status": "draft" }

# Оновити
PATCH /items/articles/123
{ "status": "published" }

Аутентифікація

# Отримати токен
POST /auth/login
{ "email": "[email protected]", "password": "password" }
# Відповідь: { "data": { "access_token": "...", "refresh_token": "...", "expires": 900000 } }

# Оновити токен
POST /auth/refresh
{ "refresh_token": "..." }

# Використання
GET /items/articles
Authorization: Bearer <access_token>

Типичний стек проекту

Інтеграція з Next.js

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

const directus = createDirectus(process.env.DIRECTUS_URL!)
  .with(rest())
  .with(authentication())

// Статичний токен для серверних запитів
const staticToken = process.env.DIRECTUS_STATIC_TOKEN!

export async function getArticles(limit = 12) {
  return directus.request(
    readItems('articles', {
      fields: ['id', 'title', 'slug', 'excerpt', 'published_at', { thumbnail: ['id', 'filename_disk'] }],
      filter: { status: { _eq: 'published' } },
      sort: ['-published_at'],
      limit,
    })
  )
}

Flows (автоматизація)

Directus Flows — візуальний конструктор автоматизації (триггер → дії):

• При публікації статті → відправити email
• По розписанню → очистити кеш
• При створенні замовлення → POST в CRM webhook

Це не вимагає коду — налаштовується в admin panel.

Відмінності від Strapi

Часові рамки

Базовий сайт з 4–6 колекціями та Next.js фронтендом — 2–3 тижні. Складний проект з Extensions, Flows, багатомовністю — 4–6 тижнів.