Panduan Directus CMS: Headless CMS Database-First untuk Developer

Panduan Directus CMS: Headless CMS Database-First untuk Developer

Sebagian besar headless CMS mengharuskan Anda membangun model data di dalam sistem mereka. Directus justru sebaliknya—ia membungkus database SQL yang sudah Anda miliki dan langsung menyediakan API REST serta GraphQL tanpa menyentuh skema Anda. Dengan ~34,5k bintang GitHub dan diadopsi oleh perusahaan seperti Tripadvisor, Adobe, dan Mercedes-Benz, ini adalah salah satu opsi open-source paling mumpuni di antara opsi headless CMS terbaik tahun 2026.

Apa Itu Directus CMS?

Directus adalah headless CMS open-source yang membungkus database SQL yang sudah ada dengan API REST dan GraphQL secara instan. Berbeda dengan Strapi atau Payload, Directus tidak membuat skema database sendiri, melainkan mencerminkan skema milik Anda. Directus mendukung 7 database termasuk PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB, dan MS-SQL, serta gratis untuk organisasi dengan pendapatan di bawah $5 juta menurut dokumentasi resmi Directus.

Bayangkan ini sebagai lapisan pintar yang berada di atas database Anda. Anda membawa database PostgreSQL yang sudah ada dengan 50 tabel, mengarahkan Directus ke sana, dan dalam hitungan menit Anda mendapatkan UI admin yang lengkap, kontrol akses berbasis peran (role-based access control), serta endpoint REST dan GraphQL. Tanpa skrip migrasi. Tanpa restrukturisasi data.

Inilah yang sebenarnya dimaksud dengan "database-first" dalam praktiknya, dan ini secara fundamental berbeda dari pendekatan code-first yang digunakan Strapi (di mana Anda mendefinisikan tipe konten yang menghasilkan tabel database) atau pendekatan yang tersemat dalam framework pada Payload CMS (di mana CMS hidup di dalam aplikasi Next.js Anda).

Penjelasan Arsitektur Database-First

Ketika pertama kali menghubungkan Directus ke database PostgreSQL yang sudah ada untuk sebuah proyek klien, hal yang mengejutkan kami adalah betapa sedikitnya penyiapan yang diperlukan. Directus mengintrospeksi skema database Anda—tabel menjadi "collections", kolom menjadi "fields"—lalu membangun antarmuka admin dari apa yang sudah ada.

Artinya, data Anda tidak pernah terkunci dalam format proprietary. Jika besok Anda memutuskan untuk berhenti menggunakan Directus, database Anda tetaplah database SQL standar. Cobalah lakukan itu dengan Contentful atau Sanity, yang kontennya tersimpan di server mereka dalam format mereka sendiri.

Directus juga bukan sekadar CMS. Timnya memposisikannya sebagai platform data yang composable—orang-orang menggunakannya untuk BaaS (Backend as a Service), panel admin internal, dan dashboard kustom. Use case CMS memang yang paling populer, tetapi arsitekturnya mendukung jauh lebih banyak hal.

Fitur Utama Directus

Directus menyediakan API REST dan GraphQL ganda, izin berbasis peran yang mendetail, otomatisasi Flows bawaan, Data Studio drag-and-drop, manajemen aset digital, dan dukungan i18n native untuk 50+ bahasa. Sejak v11.15, Directus menyertakan pengeditan kolaboratif dan AI Assistant sebagai fitur native, bukan plugin pihak ketiga.

Berikut hal-hal yang paling penting jika Anda sedang mengevaluasi Directus untuk sebuah proyek:

API REST dan GraphQL Ganda

Kedua API tersedia secara bersamaan dari data yang sama, tanpa konfigurasi apa pun. Anda tidak perlu memilih salah satu, Anda mendapatkan keduanya. Tim mobile Anda dapat menggunakan REST sementara frontend web Anda menggunakan GraphQL. API REST mengikuti pola yang dapat diprediksi (/items/{collection}) dan endpoint GraphQL berada di /graphql.

Flows dan Otomatisasi

Flows adalah sistem otomatisasi berbasis event milik Directus, yang dibangun langsung di dalam UI Data Studio. Anda dapat memicu alur kerja pada event CRUD (item dibuat, diperbarui, dihapus), jadwal (gaya cron), atau webhook. Operasi mencakup pengiriman email, pembuatan permintaan HTTP, menjalankan JavaScript kustom, dan transformasi data.

Bagi tim yang membangun dengan AI, Directus bahkan memiliki server native panduan Model Context Protocol (MCP), tetapi lebih lanjut tentang hal itu di bagian v11.

Ekstensi dan Kustomisasi

Sistem ekstensi mendukung hooks (penangan event di sisi server), endpoint kustom, panel UI, modul penuh, dan node operasi untuk Flows. Ekstensi dibangun dengan Vue.js untuk frontend dan Node.js murni untuk backend. Rilis v11.0 menata ulang ekstensi dari folder berbasis tipe menjadi format bundel yang lebih rapi.

Berikut perbandingan Directus dengan para pesaingnya dari segi fitur:

Yang Baru di Directus v11 (2025-2026)

Directus v11 memperkenalkan dukungan server MCP bawaan (v11.13), AI Assistant yang mendukung OpenAI, Anthropic, dan Gemini (v11.14), pengeditan kolaboratif dengan indikator kehadiran langsung (v11.15), serta versi draf global dengan izin deployment berbasis peran (v11.16). Semua ini adalah fitur bawaan, bukan ekstensi komunitas.

Inilah area tempat Directus berkembang paling cepat, dan ini bagian yang paling sering dilewatkan sepenuhnya oleh para kompetitor. Hanya satu dari enam panduan berperingkat teratas yang membahas hal ini.

Server MCP dan Asisten AI

Rilis v11.13 menjadikan Directus salah satu CMS pertama yang memiliki server MCP native. Jika Anda menggunakan Claude, ChatGPT, atau perangkat AI apa pun yang kompatibel dengan MCP, perangkat tersebut dapat mengelola konten Directus Anda secara langsung—membaca koleksi, membuat item, memperbarui field—sembari tetap menghormati izin RBAC Anda. Jika Anda baru mengenal MCP, panduan Model Context Protocol (MCP) kami menjelaskan protokol ini secara rinci.

Asisten AI (v11.14) terpisah dari MCP, yaitu antarmuka obrolan bawaan di dalam Data Studio yang mendukung OpenAI, Anthropic, Gemini, dan bahkan model lokal melalui Ollama. Pada v11.16, asisten ini menjadi multimodal: Anda dapat mengunggah gambar dan PDF langsung ke dalam obrolan AI untuk diproses.

Penyuntingan Kolaboratif dan Versi Draf

Penyuntingan kolaboratif dirilis di v11.15 dengan indikator kehadiran langsung (Anda dapat melihat siapa lagi yang menyunting item yang sama) dan penguncian tingkat bidang untuk mencegah konflik. Rilis yang sama menambahkan modul deployment Vercel dengan izin deployment berbasis peran.

v11.16 membawa content staging lebih jauh dengan versi draf global. Setiap item yang memiliki versi secara otomatis mendapatkan salinan draf. Editor dapat mempratinjau perubahan terhadap versi live dan mempromosikan draf saat sudah siap. Izin deployment berbasis peran berarti tim konten Anda dapat menyiapkan perubahan tanpa mendorongnya ke produksi secara tidak sengaja.

Memulai dengan Directus (Pengaturan Docker)

Anda dapat menjalankan Directus secara lokal dengan Docker dalam waktu kurang dari 2 menit. Buat file docker-compose.yml dengan image directus/directus, atur koneksi database dan kredensial admin Anda sebagai environment variable, lalu jalankan docker compose up. Directus akan berjalan di localhost:8055.

Pengaturan Docker hanya memakan waktu kurang dari 2 menit dari cold start. Berikut adalah docker-compose.yml lengkap yang menyertakan PostgreSQL, bukan hanya container Directus, tetapi seluruh stack:

# 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

Buka http://localhost:8055, masuk dengan kredensial admin yang telah Anda atur, dan Anda pun berada di dalam Data Studio. Dari sini Anda dapat membuat collection (tabel), mendefinisikan field (kolom), dan langsung mulai mengelola konten. Variabel environment KEY dan SECRET digunakan untuk pembuatan token JWT, gunakan string acak di produksi, bukan placeholder di atas.

Mengkueri Data dengan Directus SDK

Directus JavaScript SDK menyediakan akses type-safe ke data Anda melalui REST maupun GraphQL. Instal @directus/sdk, buat client dengan createDirectus(), dan gunakan readItems() untuk mengambil koleksi dengan fitur pemfilteran, pengurutan, dan pemilihan field yang sudah tersedia.

Pola composable pada SDK ini terasa intuitif setelah bekerja dengan library seperti client milik Supabase. Anda memulai dengan client dasar lalu menambahkan kemampuan dengan mengomposisikan fungsi-fungsi:

// 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
  })
);

Membuat item mengikuti pola yang sama:

// 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'
  })
);

Untuk autentikasi, Anda memilih antara staticToken() (untuk komunikasi server-ke-server) dan authentication() (untuk aplikasi yang digunakan pengguna dengan alur login):

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());

Contoh REST API

Setiap metode SDK memiliki endpoint REST yang setara. Jika Anda lebih suka bekerja langsung dengan curl atau fetch:

# Ambil artikel yang telah dipublikasikan
curl "http://localhost:8055/items/articles?filter[status][_eq]=published&sort=-date_published&limit=10&fields=id,title,slug"
# Buat item baru
curl -X POST "http://localhost:8055/items/articles" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"title": "My Post", "status": "draft"}'

Kueri GraphQL

Data yang sama tersedia melalui GraphQL di /graphql:

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

Anda tidak perlu mengonfigurasi atau mengaktifkan GraphQL secara terpisah, karena selalu tersedia bersamaan dengan REST.

Directus dengan Next.js (Integrasi Framework)

Menghubungkan Directus ke Next.js membutuhkan tiga langkah: instal @directus/sdk, buat klien lib/directus.ts, dan ambil data di Server Components Anda menggunakan readItems(). Directus mengembalikan JSON mentah, sehingga Anda memiliki kontrol penuh atas rendering tanpa komponen khusus vendor.

Ini adalah bagian paling bersih saat bekerja dengan Directus. Tidak ada adapter framework khusus, tidak ada komponen React khusus Directus, tidak ada plugin build. Ini hanya pengambilan data. Jika Anda pernah bekerja dengan REST API apa pun di Next.js, Anda sudah tahu cara kerjanya. Untuk konteks tentang pilihan framework, lihat perbandingan Next.js vs Remix kami.

Pertama, buat klien bersama (ini adalah file yang sama dari bagian SDK, tetapi dikonfigurasi untuk instance yang sudah di-deploy):

// 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 };

Kemudian gunakan di Server Component, tanpa useEffect, tanpa loading state, cukup 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>
  );
}

Itu saja. Tidak ada vendor lock-in. Pendekatan yang sama bekerja dengan Astro, Nuxt, SvelteKit, atau framework apa pun yang dapat membuat permintaan HTTP. Dokumentasi resmi Directus menyertakan panduan khusus framework untuk Astro dan Nuxt jika Anda menginginkannya, tetapi polanya identik: buat klien, panggil readItems(), render.

Harga dan Lisensi Directus CMS (2026)

Directus gratis untuk di-host sendiri di bawah lisensi MIT bagi organisasi dengan pendapatan atau pendanaan tahunan kurang dari $5 juta. Di atas $5 juta, lisensi komersial diperlukan untuk penggunaan produksi. Directus Cloud dimulai dari $25/bulan (Starter) dengan paket Professional mulai dari $49–$499/bulan, menurut halaman harga mereka.

Ambang Pendapatan $5 Juta

Ini adalah satu-satunya fakta bisnis terpenting tentang Directus, dan sebagian besar panduan entah menguburnya atau melewatkannya sama sekali. Berikut cara kerjanya:

• Di bawah $5 juta pendapatan tahunan atau total pendanaan: Gratis selamanya. Lisensi MIT. Self-host di mana saja. Tanpa batasan fitur.
• Di atas $5 juta di produksi: Anda memerlukan lisensi komersial. Hubungi tim penjualan Directus untuk harga.
• Pengembangan dan pengujian: Selalu gratis, terlepas dari ukuran perusahaan. Ambang batas ini hanya berlaku untuk deployment produksi.

Angka $5 juta tersebut mencakup pendanaan ventura, bukan hanya pendapatan. Jadi, startup tahap seed dengan pendanaan $6 juta secara teknis berada di atas ambang batas. Dalam praktiknya, Directus tidak agresif dalam penegakan terhadap perusahaan tahap awal, tetapi Anda harus mempertimbangkan hal ini dalam perencanaan Anda.

Paket Cloud

Jika Anda tidak ingin mengelola infrastruktur, Directus Cloud menangani hosting, pencadangan, dan pembaruan:

• Starter: $25/bulan, cocok untuk proyek kecil dan situs pribadi
• Professional: $49-$499/bulan, berskala mengikuti penyimpanan, bandwidth, dan transformasi aset
• Enterprise: Harga khusus, SLA, infrastruktur khusus, dan dukungan prioritas

Tanpa lisensi per kursi. Seluruh tim Anda menggunakan paket yang sama. Bandingkan dengan Contentful, yang mengenakan biaya per pengguna (lihat rincian harga Contentful kami), atau Sanity, yang mengenakan biaya berdasarkan penggunaan API dan bandwidth dataset.

Directus vs Strapi vs Payload: Perbandingannya

Directus membungkus database yang sudah ada tanpa migrasi, Strapi menghasilkan skemanya sendiri dari tipe konten, dan Payload tersemat langsung ke dalam aplikasi Next.js Anda. Directus mendukung 7 database, Strapi mendukung 2, dan Payload mendukung 2. Ketiganya bersifat open-source, tetapi filosofinya cukup berbeda.

Setelah membangun proyek dengan Strapi maupun Directus, perbedaan terbesarnya adalah cara keduanya memandang database Anda. Dengan Strapi, Anda mendefinisikan tipe konten di UI admin atau kode, dan Strapi membuat serta mengelola tabel database untuk Anda. Dengan Directus, database adalah sumber kebenaran, Directus membacanya dan beradaptasi.

Kapan memilih Directus: Anda memiliki database yang sudah ada, menginginkan REST+GraphQL ganda secara langsung tanpa konfigurasi tambahan, atau perlu mendukung database yang kurang umum seperti OracleDB atau CockroachDB.

Kapan memilih Strapi: Anda menginginkan ekosistem dan komunitas terbesar, lebih suka mendefinisikan tipe konten melalui UI, atau memulai dari nol tanpa database yang sudah ada. Baca panduan Strapi lengkap kami untuk detailnya.

Kapan memilih Payload: Anda menginginkan CMS tersemat langsung di aplikasi Next.js Anda, lebih suka konfigurasi yang mengutamakan TypeScript, atau membutuhkan Local API yang sepenuhnya melewati HTTP. Lihat pembahasan mendalam Payload CMS kami untuk gambaran lengkapnya.

Kapan Sebaiknya Tidak Menggunakan Directus

Directus bukanlah pilihan yang tepat jika Anda membutuhkan page builder visual, framework Next.js yang terintegrasi erat, atau backend NoSQL. Directus juga menambah overhead untuk proyek sederhana di mana flat-file CMS atau WordPress saja sudah cukup.

Kami pernah melihat tim memilih Directus padahal seharusnya tidak, dan polanya biasanya salah satu dari hal berikut:

• Anda membutuhkan page builder visual. Data Studio milik Directus sangat baik untuk manajemen data terstruktur, tetapi bukan merupakan site builder drag-and-drop. Jika pengeditan visual adalah prioritas Anda, cobalah Storyblok, lihat panduan Storyblok kami untuk perbandingannya.
• Anda berkomitmen pada NoSQL. Directus memang dirancang hanya untuk SQL. Jika data Anda berada di MongoDB, Payload CMS adalah pilihan yang paling cocok.
• Proyek Anda adalah blog sederhana. Menjalankan Docker, PostgreSQL, dan Directus untuk blog pribadi sangatlah berlebihan. WordPress, Astro dengan file markdown, atau bahkan Ghost akan membuat Anda bisa mulai mempublikasikan konten dalam waktu jauh lebih singkat.
• Anda menginginkan CMS di dalam framework. Jika Anda ingin CMS berada di dalam codebase Next.js sebagai bagian utama, Payload melakukannya secara native. Directus selalu menjadi layanan terpisah.
• Anda adalah organisasi besar. Jika pendapatan perusahaan Anda melebihi ambang batas $5 juta, Anda akan memerlukan lisensi komersial untuk produksi. Pertimbangkan biaya tersebut dibandingkan dengan alternatif yang sepenuhnya open-source seperti Strapi atau Payload, di mana self-hosting gratis berapa pun pendapatannya.

Tidak satu pun dari hal ini merupakan kekurangan, semuanya adalah keputusan desain. Directus adalah platform data, bukan pembuat website. Memahami perbedaan ini akan menghemat waktu Anda berbulan-bulan dari rasa frustrasi.

Pertanyaan yang Sering Diajukan

Apa itu Directus CMS?

Directus adalah CMS headless sumber terbuka yang membungkus database SQL yang sudah ada dengan API REST dan GraphQL secara instan. Directus mendukung PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB, dan MS-SQL. Tidak seperti CMS tradisional, Directus tidak membuat skemanya sendiri, melainkan membaca dan mencerminkan struktur database Anda yang sudah ada secara otomatis.

Apakah Directus benar-benar gratis?

Directus gratis untuk di-host sendiri di bawah lisensi MIT bagi organisasi dengan pendapatan tahunan atau total pendanaan kurang dari $5 juta. Di atas ambang batas tersebut, Anda memerlukan lisensi komersial untuk penggunaan produksi. Lingkungan pengembangan dan pengujian selalu gratis. Directus Cloud, layanan hosting terkelola mereka, dimulai dari $25 per bulan.

Apa Perbedaan Directus dengan Strapi?

Directus bersifat database-first, membungkus database SQL yang sudah ada tanpa mengubah skemanya. Strapi bersifat code-first, Anda mendefinisikan tipe konten dan Strapi menghasilkan tabel database. Directus mendukung 7 database, sedangkan Strapi hanya mendukung 2. Keduanya menawarkan REST API, tetapi Directus menyertakan GraphQL secara native, sedangkan Strapi memerlukan plugin.

Database apa saja yang didukung Directus?

Directus mendukung tujuh database SQL: PostgreSQL, MySQL, MariaDB, SQLite, OracleDB, CockroachDB, dan MS-SQL. Directus terhubung ke database Anda yang sudah ada dan melakukan introspeksi skema secara otomatis. Dukungan multi-database ini unik di kalangan headless CMS, karena sebagian besar kompetitor hanya mendukung satu atau dua mesin database.

Bisakah Directus Menggantikan WordPress?

Directus dapat menggantikan WordPress untuk manajemen konten, terutama untuk proyek headless atau berbasis API. Namun, Directus tidak memiliki frontend bawaan, tema, atau page builder. Anda perlu membangun frontend sendiri dengan framework seperti Next.js atau Astro. Untuk blog sederhana atau situs yang membutuhkan pengeditan visual, WordPress tetap lebih praktis.

Apakah Directus memiliki editor visual?

Directus menyertakan Data Studio, sebuah UI admin yang powerful untuk mengelola data terstruktur, membangun dasbor, dan mengonfigurasi izin. Namun, Directus tidak memiliki page builder visual atau editor situs WYSIWYG seperti Storyblok atau WordPress. Directus dirancang untuk pengelolaan data, bukan penyusunan halaman secara drag-and-drop.

Apakah Directus cocok untuk e-commerce?

Directus berfungsi dengan baik sebagai sistem Product Information Management, Anda dapat memodelkan katalog produk, mengelola atribut, dan menyajikan data melalui API. Namun, ini bukan platform e-commerce. Anda tidak akan mendapatkan keranjang belanja, alur checkout, atau pemrosesan pembayaran. Padukan dengan Shopify, Saleor, atau Medusa untuk lapisan transaksional.

Bisakah saya menggunakan Directus dengan Next.js?

Ya. Instal paket @directus/sdk, buat client yang mengarah ke instance Directus Anda, dan ambil data di Server Components menggunakan readItems(). Directus mengembalikan JSON biasa, sehingga tidak diperlukan komponen React khusus dari vendor. Pendekatan yang sama juga berfungsi dengan framework JavaScript apa pun, termasuk Astro, Nuxt, dan SvelteKit.

Apakah Directus mendukung pengeditan kolaboratif?

Ya, sejak versi 11.15 (Februari 2026). Directus memiliki pengeditan kolaboratif native dengan indikator kehadiran langsung yang menunjukkan siapa sedang mengedit apa, serta penguncian di tingkat field untuk mencegah konflik. Ini adalah fitur bawaan, bukan plugin. Dikombinasikan dengan versi draf global di v11.16, tim dapat menyiapkan dan mempratinjau perubahan sebelum dipublikasikan.

Apa itu server MCP Directus?

Directus memperkenalkan server Model Context Protocol bawaan pada v11.13 (November 2025). MCP memungkinkan perangkat AI seperti Claude dan ChatGPT untuk berinteraksi langsung dengan konten Directus Anda, membaca, membuat, dan memperbarui item melalui bahasa alami. Server MCP ini mematuhi izin RBAC Anda yang sudah ada, sehingga akses AI mengikuti aturan yang sama dengan pengguna manusia.