Directus vs Payload vs Supabase: 2026年にあなたのスタックに合うバックエンドはどれ?
デプロイが終わり、サイトが公開される。3週間後、コンテンツチームがあなたに連絡します。画像アップロードがタイムアウトしている、ネストされたカテゴリが保存されない、APIレスポンスが800msを超えている。過去2年間、本番プロジェクトでDirectus、Payload、Supabaseでこのシナリオを何度も経験しました。症状は同じですが、根本原因は毎回異なります。答えはランディングページが省略していることに左右されます。編集者がワークフローをどのように構成するか、あなたの関連グラフが実際にどのようなものか、Series Aが成立するときにこのスタックをまだ使用しているかどうかです。ここにあるのは、次の6スプリントでどのバックエンドが生き残るかを決定するフレームワークです。
これは機能チェックリスト比較ではありません。Social Animalでプロジェクトをスコーピングするときに実際に使用する決定フレームワークで、数十のヘッドレスビルドを通じて洗練されています。終わりまでに、二度と自分を疑うことなく、どのツールが特定の状況に適しているかを知ることができます。
目次
- 各ツールのコア・アイデンティティ
- アーキテクチャとデータモデリングの比較
- コンテンツ編集体験
- 開発者体験とAPI設計
- 認証、権限、行レベルセキュリティ
- セルフホスティング、クラウド、2026年の価格設定
- パフォーマンスとスケーラビリティベンチマーク
- 決定フレームワーク: どのツールをいつ使うか
- 実際のプロジェクトシナリオ
- マイグレーションパスとロックイン考慮事項
- FAQ
各ツールのコアアイデンティティ
詳細に入る前に、各ツールが本質的に何であるかを理解する必要があります。機能セットの重複は誤解を招く可能性があるためです。
Directusはデータベースファースト型ヘッドレスCMSです。既存のSQLデータベース(Postgres、MySQL、SQLite、MS SQL、MariaDB、CockroachDB)を自動生成されたAPIとポーランド語の管理パネルでラップします。データベースを設計し、Directusがそれを内省してUIを提供します。TypeScriptで記述されており、Node.js上で実行されます。
PayloadはCode-First型ヘッドレスCMSで、Next.js(Payload 3.0現在)上に構築されています。TypeScriptコンフィグファイルでコレクションとフィールドを定義すると、Payloadはそのコンフィグからデータベーススキーマ、管理UI、APIエンドポイント、TypeScript型を生成します。データベースレイヤーとしてMongoDBまたはPostgresを使用します。
SupabaseはオープンソースのFirebase代替品です。Postgres上に構築されたバックエンドアズアサービスです。認証、ストレージ、リアルタイムサブスクリプション、エッジ機能があります。しかし、チームはそれをCMSバックエンドとして常に使用しており、これがこれらの比較に何度も現れる理由です。
この区別はこの記事の他のどの内容よりも重要です。DirectusとPayloadは目的別に構築されたコンテンツ管理システムです。Supabaseは汎用バックエンドで、十分な努力があればコンテンツ管理システムに変形できます。
アーキテクチャとデータモデリングの比較
Directus: データベースファースト
Directusはあなたのスキーマを所有しません。既存のデータベースを指すことができ、自動的に管理パネルを生成します。これはレガシーシステムで作業しているとき、またはあなたのデータモデルがコンテンツ管理を超えて複数のアプリケーションに役立つときに本当に強力です。
Directusの関連モデリングは堅牢です。M2M、M2O、O2M、さらには翻訳も、UIで処理されます。しかし、欠点があります。Directusがコンフィグから生成するのではなくデータベースを内省するため、スキーマの変更は2つの場所で発生します。マイグレーションとDirectus管理です。チーム環境で規律を持たないとこれは煩雑になります。
# Directusスキーマスナップショット(簡略化)
collections:
- collection: articles
fields:
- field: title
type: string
interface: input
- field: content
type: text
interface: input-rich-text-md
- field: author
type: uuid
interface: select-dropdown-m2o
related_collection: authors
Payload: Code-First型
Payload 3.0(2026年現在のバージョン)はNext.jsプラグインとして実行されます。あなたのコレクションはTypeScriptで定義されます。
import { CollectionConfig } from 'payload'
export const Articles: CollectionConfig = {
slug: 'articles',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'content',
type: 'richText',
},
{
name: 'author',
type: 'relationship',
relationTo: 'authors',
},
],
}
このCode-Firstアプローチは、あなたのスキーマがバージョン管理に存在することを意味します。コンフィグから自動生成される完全なTypeScript型を取得します。TypeScript-heavy な チームにとって最良のDXです。欠点は、非開発者がコード変更なしでデータモデルを変更できないということです。
Supabase: SQLファースト
Supabaseを使用すると、生のPostgresを記述しています。テーブルを定義し、行レベルセキュリティポリシーを設定してから、自動生成されたREST API(PostgREST)またはJavaScriptクライアントを通じてやり取りします。
CREATE TABLE articles (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
content JSONB,
author_id UUID REFERENCES authors(id),
created_at TIMESTAMPTZ DEFAULT now(),
published BOOLEAN DEFAULT false
);
-- 行レベルセキュリティ
ALTER TABLE articles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Public can read published articles"
ON articles FOR SELECT
USING (published = true);
最大限の柔軟性が得られますが、すぐに使えるコンテンツ管理UIはありません。カスタム管理を構築するか、サードパーティツールを使用するか、同じPostgresインスタンスの上にDirectusのようなものを配線します(はい、人々は実際にこれを行います)。
コンテンツ編集体験
ここはCMS vs非CMS区別が最も厳しく現れるところです。
| 機能 | Directus | Payload | Supabase |
|---|---|---|---|
| 組み込み管理UI | ✅ ポーランド語、カスタマイズ可能 | ✅ Next.js ネイティブ、非常に良好 | ❌ テーブルエディタのみ |
| リッチテキストエディタ | ✅ WYSIWYG + Markdown | ✅ Lexicalベース(優れている) | ❌ なし |
| メディアライブラリ | ✅ 完全機能 | ✅ 完全機能 | ⚠️ ストレージバケット(ライブラリUIなし) |
| コンテンツプレビュー | ✅ カスタムモジュール経由 | ✅ ネイティブライブプレビュー | ❌ 自分で構築 |
| ローカライゼーション | ✅ 組み込み翻訳システム | ✅ フィールドレベルローカライゼーション | ❌ 手動実装 |
| コンテンツバージョニング | ✅ リビジョン組み込み | ✅ ドラフト+バージョン | ❌ 自分で構築 |
| ワークフロー/公開 | ✅ フローシステム | ✅ ドラフト/公開状態 | ❌ カスタムロジック必要 |
| 非開発者フレンドリー | ✅ 非常に | ✅ はい | ❌ 全くない |
あなたのプロジェクトにコンテンツエディタが関係している場合、ブログ投稿を書く人、製品カタログを管理する人、ランディングページを更新する人。Supabaseは間違ったツールです。終わり。DirectusとPayloadが初日に提供するものを構築するのに数週間を費やすことになります。
Payload のエディタ体験は3.0以来著しく改善されています。Lexicalベースのリッチテキストエディタは柔軟で、ライブプレビュー機能はNext.jsフロントエンドで美しく機能し、管理パネルは文字通りNext.jsアプリ内で実行されるため、ネイティブに見えます。
Directusは3つの中で最も成熟した管理パネルを備えています。長年にわたって改良されてきており、カスタム表示/インターフェイスシステムは、フロントエンドコードに触れずに複雑な編集ワークフローを構築できます。コンテンツが多い組織にとって、これは大切なことです。
開発者体験とAPI設計
APIスタイル
DirectusはRESTとGraphQLをすぐに提供し、JavaScriptSDKも提供します。REST APIは一貫したパターンに従い、GraphQL実装はあなたのスキーマから自動生成されます。それは機能しますが、GraphQLは複雑なネストされたクエリで制限されたように感じることができます。
PayloadはRESTおよびGraphQL APIを生成し、LocalAPI(HTTPオーバーヘッドなしの直接データベースクエリ)へのフルアクセスも取得します。Payload 3.0はNext.jsアプリ内で実行されるため、Server Componentsで直接payload.find()を呼び出すことができます。これはNext.jsプロジェクトにとって大きな利点です。
// Next.jsサーバーコンポーネントでのPayload Local API
import { getPayload } from 'payload'
import config from '@payload-config'
export default async function ArticlePage({ params }) {
const payload = await getPayload({ config })
const article = await payload.findByID({
collection: 'articles',
id: params.id,
depth: 2,
})
return <Article data={article} />
}
SupabaseのAPIはPostgRESTで自動生成されており、JavaScriptクライアントライブラリは本当に優れています。クエリビルダは自然な感じです。
const { data, error } = await supabase
.from('articles')
.select('*, author:authors(*)')
.eq('published', true)
.order('created_at', { ascending: false })
.range(0, 9)
Supabaseには、DirectusもPayloadも提供しないリアルタイムサブスクリプションもあります。ライブデータ更新(チャット、通知、協調編集)が必要な場合、Supabaseがデフォルトで勝ちます。
型安全性
Payloadは最高のTypeScript機能を備えています。型はコレクションコンフィグから生成され、すべてが端から端まで強く型指定されています。Supabaseは、CLIを通じた堅牢な型生成(supabase gen types typescript)を備えており、データベーススキーマから型を作成します。DirectusにはTypeScript SDKがありますが、型生成には追加のセットアップが必要で、密密に統合されていません。
認証、権限、行レベルセキュリティ
ここはSupabaseが本当に輝くところです。PostgresRow-Level Security(RLS)は3つの中で最も細粒度で、最も実戦テスト済みの権限モデルです。ポリシーをデータベースレベルで定義し、データがどのようにアクセスされるかに関係なく適用されます。マルチテナントSaaSアプリケーションで非常に強力です。
Directusはコレクションおよびフィールドレベルで機能するロールベースの権限システムを備えています。管理パネルでは直感的であり、ほとんどのCMS使用例に十分です。ロール別のCRUD権限を設定でき、カスタムフィルタルールも追加できます。
Payloadは、コンフィグ内の関数を通じた、フィールドレベルおよびコレクションレベルのアクセス制御を提供します。
{
slug: 'articles',
access: {
read: () => true,
create: ({ req: { user } }) => user?.role === 'editor',
update: ({ req: { user } }) => user?.role === 'editor',
delete: ({ req: { user } }) => user?.role === 'admin',
},
fields: [
{
name: 'internalNotes',
type: 'textarea',
access: {
read: ({ req: { user } }) => user?.role === 'admin',
},
},
],
}
編集者、レビュアー、管理者を備えた標準CMSの場合、3つすべてが正常に機能します。動的な権限ルールを持つ複雑なマルチテナントアプリケーションの場合、SupabaseのRLSが最も強力なオプションです。
セルフホスティング、クラウド、2026年の価格設定
3つ全てはオープンソースでセルフホスティング可能です。しかし、クラウド価格は彼らのターゲット市場について多くを語っています。
| プラン | Directus Cloud | Payload Cloud | Supabase Cloud |
|---|---|---|---|
| 無料層 | ❌ クラウド無料なし | ✅ 1プロジェクト、制限あり | ✅ 2プロジェクト、500MB DB |
| スターター/プロ | $99/月(Professional) | $35/月(Standard) | $25/月(Pro) |
| チーム/ビジネス | $399/月(Enterprise) | カスタム価格 | $599/月(Team) |
| セルフホストコスト | 無料(オープンソース) | 無料(オープンソース) | 無料(オープンソース) |
| データベース含む | ✅ マネージド | ✅ マネージドPostgres | ✅ マネージドPostgres |
| CDN/ストレージ | 含む | 含む | 制限付き含む |
2026年Q1時点での価格。現在のレートについては、各プラットフォームの価格設定ページを確認してください。
Payload CloudはSmall~Mediumプロジェクト向けの最も手頃なマネージドオプションです。Supabaseの無料層はプロトタイピングとサイドプロジェクトに最も寛大です。Directus Cloudは、保証されたSLAを必要とするポーランド語のマネージドエクスペリエンスを希望する大規模な組織を対象としています。
セルフホスティングは方程式を大きく変えます。3つ全ては$5-20/月のVPS上でよく実行されます。DirectusとSupabaseには公式のDocker Composeセットアップがあり、確実に機能します。PayloadはどこでもNext.jsを実行します。Vercel、Railway、Fly.io、独自のサーバー。
弊社のヘッドレスCMS開発プロジェクトでは、通常、コスト効率のためにRailwayまたはFly.ioでセルフホスティングをお勧めします。保証されたSLAが必要な場合のみマネージドクラウド。
パフォーマンスとスケーラビリティベンチマーク
同等のハードウェア(4 vCPU、8GB RAM、Postgres 16)で、約50,000のコンテンツレコードのデータセットを使用していくつかの非公式ベンチマークを実行しました。
| オペレーション | Directus | Payload | Supabase |
|---|---|---|---|
| シンプルリストクエリ(20アイテム) | ~45ms | ~12ms(Local API) / ~38ms(REST) | ~18ms |
| ネストされた関連クエリ(深さ3) | ~120ms | ~35ms(Local API) / ~95ms(REST) | ~55ms |
| 全文検索(1000結果) | ~180ms | ~85ms | ~40ms(pg_trgm) |
| バルク挿入(1000レコード) | ~2.1s | ~1.8s | ~0.9s |
| コールドスタート時間 | ~3.5s | ~2.8s | N/A(常に実行) |
PayloadのLocal APIはNext.jsアプリケーション用の最速オプションです。HTTPオーバーヘッドがないため、レンダリングプロセスから直接データベースをクエリしています。Supabaseの生Postgresパフォーマンスはデータが多い操作で打つのが難しいです。Directusは抽象化層を通じていくつかのオーバーヘッドを追加しますが、コンテンツ提供ワークロード用に完全に問題ありません。
特に検索については、Supabaseはプラットフォームの全文検索、trigram インデックス、さらにはセマンティック検索用のpgvector拡張を使用できるため、大きな利点があります。PayloadとDirectusの両方が検索をサポートしていますが、Postgresを直接活用するのではなく独自の実装に依存しています。
決定フレームワーク: どのツールをいつ使うか
実際のフレームワークです。これらの質問に答えると、選択肢は明白になります。
Directusを選択する場合:
- コンテンツチームが大規模で非技術的である
- 既存のデータベースを、CMSレイヤーでラップする必要がある
- Postgresではないデータベース(MySQL、MS SQL等)を使用している
- 複数のフロントエンド(Web、モバイル、キオスク)に提供する独立したCMSが必要
- フロントエンドがNext.js(おそらくAstro、Nuxt、SvelteKit)ではない
- コードに触れずに管理UIのカスタマイズで最大限の柔軟性が必要
Directusは、ビルド時レンダリングとアイランドアーキテクチャがフルReactフレームワークよりも意味のあるコンテンツが多いサイトでは、Astroと素晴らしく組み合わせられます。
Payloadを選択する場合:
- フロントエンドはNext.js(これはキラーユースケース)
- チームはTypeScript-firstでどこでも型安全が必要
- CMSとフロントエンドを1つのデプロイ可能なユニットで希望
- ライブプレビューと視覚的編集機能が必要
- コード定義スキーマがバージョン管理である必要
- コンテンツモデルが事前に十分に定義されている場合
Payloadは、コンテンツ管理がコア要件であるNext.js開発プロジェクトの推奨です。統合は比較されていません。
Supabaseを選択する場合:
- コンテンツWebサイトではなく、アプリケーション構築中
- リアルタイム機能が必要(チャット、ライブ更新、協調編集)
- 複雑なマルチテナント権限が必要(RLSが王様)
- 主要な必要性はバックエンドで、コンテンツは二次的
- Postgres拡張(pgvector、PostGIS、pg_cron)を使用したい
- チームは独自の管理インターフェイスを構築することに慣れている
- ユーザー生成データがエディトリアルコンテンツよりも重要なSaaSプロダクト構築中
実際のプロジェクトシナリオ
シナリオ1: ブログ付きマーケティングWebサイト
最適な選択: Payload(Next.js使用の場合)またはDirectus(Astro/その他の場合)
50200ページ、ブログ、小規模なコンテンツチーム(23人)のマーケティングサイト。ランディングページの柔軟性、画像最適化、SEOメタデータ管理が必要で、A/B テストもあるかもしれません。
Payloadのライブプレビュー機能は完璧です。コンテンツエディタは、公開する前にページがどのように見えるかを正確に確認できます。ブロックベースのフィールドタイプにより、エディタに十分なロープを与えることなく、柔軟なランディングページを構築できます。
シナリオ2: eコマース製品カタログ
最適な選択: DirectusまたはPayload
5,000以上のSKU、複雑な分類、複数の価格リスト、在庫システムとの統合を備えた製品カタログ。ここでの鍵はデータモデリングの柔軟性と、構造化データを効率的に処理する能力です。
Directusはデータを移行することなく既存の製品データベースに接続する必要がある場合有利です。Payloadは一からビルドする場合に勝ち、Next.jsストアフロントで型安全な製品クエリが必要です。
シナリオ3: マルチテナントSaaSプラットフォーム
最適な選択: Supabase
各顧客が独自のデータスペースを持つプラットフォーム。ロールベースのアクセス、リアルタイム通知、ユーザー生成コンテンツを備えています。ここで必要なのは行レベルセキュリティ、ビジネスロジック用エッジ関数、水平スケーリング可能性です。
これはCMSプロジェクトではありません。これはアプリケーションバックエンドプロジェクトです。Supabaseはまさにこのために構築されました。
シナリオ4: 内部ナレッジベース
最適な選択: PayloadまたはDirectus
200人の企業向けの内部Wiki/ナレッジベース。リッチテキストコンテンツ、分類、検索、ロールベースのアクセス。コンテンツエディタの範囲は技術的から非技術的です。
どちらのCMSもここでよく機能します。Directusは管理パネルがコードをカスタマイズする必要がないため、非技術的なチームに少し有利です。Payloadはポーランド語、ブランド化されたフロントエンド体験が必要な場合に優れています。
マイグレーションパスとロックイン考慮事項
ロックインは実在します。コミットする前に考えてください。
Directusはロックインが最小限です。CMSを削除してもあなたのデータベーススキーマは独立した状態です。あなたのデータは所有形式に閉じ込められていません。
Payloadはデータをstandard Postgres(またはMongoDB)テーブルに保存しますが、スキーマはPayloadの慣例に従います。マイグレーション時にいくつかのことを再構成することを意味しますが、データは標準データベースにあります。
SupabaseはPostgres。ゼロロックイン。データベースダンプを取得でき、任意のPostgresインスタンス上で実行できます。Supabaseが明日消えても、APIコールのいくつかを置き換える必要があります。データとスキーマは完全に無傷です。
3つすべてはContentfulやSanityなどのプロパイエタリCMSプラットフォームと比較してロックインでよくスコア付けされています。データはクラウド内に存在し、エクスポートは常に部分的なプロセスです。
FAQ
SupabaseをヘッドレスクMSとして使用できます?
テクニック的にはい。しかし、CMSフィーチャーをゼロから構築しています。コンテンツ編集UI、メディア管理、リビジョン履歴、公開ワークフロー。開発者のみがコンテンツを管理する小規模なプロジェクトでは、機能することができます。非技術的なエディタが関係している場合、PayloadやDirectusなどの実際のCMSを使用し、必要に応じてSupabaseをアプリケーションデータに接続してください。
Payloadは本当に無料です? 落とし穴は何?
Payload CMSは本当にMITライセンスのオープンソースです。永遠に無料で自分自身をホスト可能です。Payload Cloudは有料マネージドホスティングサービスで、$35/月から始まります。落とし穴(必要に応じて)は、Payload Cloudにはフォームビルダーおよび SEOプラグインのような一部のプレミアム機能があります。これらはホスト環境から無料ですが恩恵があります。コアCMSは何も支払うことなく完全に機能しています。
DirectusとSupabaseを一緒に使用できます?
はい、そして私は複数回このパターンを使用しました。DirectusをSupabase Postgresデータベースを指します。Directusの管理パネルでコンテンツ管理を取得し、Supabaseのリアルタイムサブスクリプション、認証、およびエッジ関数をアプリケーション機能に使用してください。2つのツールは、異なるレイヤーで動作するため互いに補完します。
Next.jsプロジェクトに最適なのは?
Payload。閉まったものではありません。Payload 3.0以来、CMSはNext.jsアプリケーション内でプラグインとして実行されます。Server ComponentsでHTTPオーバーヘッドなしのデータベースクエリにLocal APIを取得し、ネイティブライブプレビューと単一デプロイを取得します。弊社では、Next.js開発業務で常にこの組み合わせを使用しています。
これらは2026年のStrapと比較するとどうですか?
Strapi v5は実心のオプションですが、いくつかの分野で遅れています。管理パネルはPayloadと比較して古く見えます。TypeScriptサポートは強くなく、ライセンスモデルはより制限的になっています。Directusは同じデータベースラッピングアプローチをより最新のUIで提供しています。PayloadはTypeScriptチームにより良いDXを提供しています。Strapiの主な利点は、より大きなプラグインエコシステムとより大きなコミュニティですが、ギャップは閉まっています。
SanityやContentfulなどの他のSaaSCMSプラットフォームはどうですか?
SanityとContentfulはプロダクトですが、プロパイエタリSaaSプラットフォームです。データはサーバーに存在し、価格使用量でスケールし、かなり高価になることができます。Directus、Payload、Supabaseはすべてオープンソースでセルフホスティング可能です。データ所有、コスト管理、およびデプロイメント柔軟性が重要な場合、オープンソースオプションが勝ちます。ヘッドレスCMS開発ページで詳しく説明しています。
最高のプラグイン/拡張エコシステムはどれですか?
Directusはコミュニティ拡張マーケットプレイスがカスタムインターフェイス、表示、およびモジュール用です。PayloadはSEO、フォーム、ネストされたドキュメント、およびリダイレクト用の公式プラグインを備えた成長するプラグインエコシステムを備えています。Supabaseには、異なる目的で機能するPostgres拡張(数百個)があります。CMS特定プラグイン、Directusの現在大部分のオプション。
限られた予算の小規模チームにとって最適なオプションは何ですか?
Payload自家製Vercelの無料層またはRailwayのホビープランで。無料で月コストなしでフルCMSを取得します。Supabaseの無料層もプロトタイピングに優れています。Directusは無料クラウド層がありませんが(セルフホスティング必須)、$5/月のVPS上で正常に実行されます。予算が厳しく、正しいアーキテクチャを見つけるヘルプが必要な場合は、弊社に連絡してください。多くのチームが最もコスト効果的なアーキテクチャを見つけるのをお手伝いしました。