Payload CMSとは?使い方・Next.js統合・Strapiとの違いを解説
Payload CMS(ペイロード シーエムエス)は、Next.jsアプリに直接組み込めるTypeScript製のヘッドレスCMSです。管理画面もAPIも自分のコードとして扱えるコードファースト設計が特徴で、2024年末のPayload 3.0以降はNext.jsのappディレクトリへ1行で組み込めるようになりました。本記事では読み方・インストールからコレクション定義、REST/GraphQL API、管理画面の日本語化、Strapiとの違い、料金までを、公式の最新仕様に沿ってコード例つきで整理します。ヘッドレスCMSと従来型CMSの大きな違いを先に押さえておくと理解が早いです。
まとめ:Payload CMSはどんな時に選ぶか
Payload CMSは、Next.js+TypeScriptで開発するチームが「CMSをアプリのコードの一部として持ちたい」場合に向きます。設定をGUIではなくpayload.config.tsに書くため、Git管理・型安全・独自ロジックの拡張がしやすい反面、管理画面だけで完結させたい非エンジニア主導の運用には過剰です。ライセンスはMITで、セルフホストなら無料。マネージドの「Payload Cloud」はFigmaによる買収(2025年6月)以降、新規受付が停止しているため、現状の本番運用は基本的にセルフホストになります。GUI重視・実績重視ならStrapiが有力で、選定軸は後半の比較で詳しく扱います。
Payload CMSとは:Next.jsネイティブなヘッドレスCMS
PayloadはコンテンツをJSONで配信するヘッドレスCMSであり、同時にTypeScriptで書く「バックエンドフレームワーク」でもあります。管理画面(Admin Panel)とREST/GraphQL/Local APIが一体で生成され、認証・アクセス制御・バージョン管理・下書きプレビューを標準装備します。読み方は英語発音どおり「ペイロード」で、GitHubスターは40,000超(2026年時点)です。ライセンスはMITのため、商用の受託開発や自社プロダクトに組み込んでもソフトウェア使用料は発生しません。
Payload 3.0で変わった点:/appへの直接インストール
2024年末のPayload 3.0は「Next.jsのappフォルダに直接インストールできる初のCMS」を掲げ、独立サーバーを立てずに既存のNext.jsプロジェクトへ同居できるようになりました。依存パッケージは2.0の88個から27個へ絞られ、Astro・SvelteKit・Remixなど他のNode環境でも動きます。リリースは頻繁で、2026年2月18日にv3.77.0が公開され、Next.js 16(TurbopackのHMR・ビルド)にも対応しています。バージョンは変動が速いため、採用時は公式の最新リリースを確認してください。
Figmaによる買収と今後の位置づけ
2025年6月17日、FigmaはPayloadチームの参画を発表しました。発表時点でMITライセンスのリポジトリとセルフホストの提供に変更はなく、オープンソースとしての開発継続が明言されています。実務上の注意は、前述のとおりマネージドの「Payload Cloud」新規受付が停止したことで、ホスティングは自前のインフラ(VercelやコンテナへのデプロイなどNode実行環境)で用意する前提になります。
Payload CMSのインストールと初期設定
新規プロジェクトはCLIひとつで生成できます。テンプレート選択(blank/website など)とデータベースの選択がプロンプトで進みます。
npx create-payload-app@latest
テンプレートを指定するならフラグを付けます(プロジェクト名やデータベースは対話プロンプトで選びます)。既存のNext.jsアプリへ後付けする場合も同じCLIから統合できます。
npx create-payload-app@latest -t website
対応データベースと選び方(MongoDB / PostgreSQL / SQLite)
Payload 3.0はデータベースをアダプタで差し替える設計で、MongoDB・PostgreSQL・SQLiteに対応します。ドキュメント指向で柔軟にモデルを変えたいならMongoDB、リレーショナルな整合性やSQL資産を活かすならPostgreSQL、ローカル検証や小規模ならSQLiteが目安です。payload.config.tsで使うアダプタを指定します。
import { buildConfig } from 'payload'
import { postgresAdapter } from '@payloadcms/db-postgres'
export default buildConfig({
db: postgresAdapter({ pool: { connectionString: process.env.DATABASE_URI } }),
collections: [Posts],
})
コンテンツ設計:コレクション・フィールド・ブロック
Payloadのデータモデルは、GUIで作るのではなく設定ファイルにコードで定義します。定義した時点で型・管理画面・APIが自動生成されるため、モデルとフロントエンドの型ズレが起きにくいのが利点です。
コレクションとフィールドの定義
コレクションは投稿やユーザーなどの「入れ物」で、slugがAPIパスやDBテーブル名になります。フィールドはtext・richText・relationshipなど型を指定します。
import type { CollectionConfig } from 'payload'
export const Posts: CollectionConfig = {
slug: 'posts',
admin: { useAsTitle: 'title' },
fields: [
{ name: 'title', type: 'text', required: true },
{ name: 'body', type: 'richText' },
{ name: 'author', type: 'relationship', relationTo: 'users' },
],
}
ブロックフィールドによる可変レイアウト
ランディングページのように「見出し」「画像」「CTA」を編集者が自由に積み替えたい場合はblocks型を使います。編集者は用意したブロックを選んで並べるだけで、フロント側は種類ごとに描画を分岐します。固定フォームでは対応しづらい、記事や特集ページの可変構成に向いた仕組みです。
データ取得:Local API・REST・GraphQL の使い分け
Payloadは同じデータに3つの経路でアクセスできます。ここが独自の強みで、用途で使い分けると無駄な通信を減らせます。
| 取得方法 | 呼び出し | 主な用途 |
|---|---|---|
| Local API | payload.find() | 同一サーバー内でHTTPを経ず直接取得(SSR・スクリプト) |
| REST API | /api/posts | 外部クライアント・汎用連携 |
| GraphQL | /api/graphql | 必要フィールドだけを1リクエストで取得 |
Next.jsと同居する構成では、サーバーコンポーネントからpayload.find()を直接呼ぶLocal APIが最速で、ネットワーク往復もCORS設定も不要です。クライアントからの取得やモバイル・他システム連携ではREST/GraphQLを使い分けます。
管理画面(Admin Panel)の日本語化設定
PayloadのAdmin Panelは多言語対応で、日本語の翻訳を標準で同梱しています。payload.config.tsのi18nで対応言語とフォールバックを指定すると、管理画面のラベルやメニューが日本語で表示されます。ログインユーザーはアカウント設定から表示言語を個別に切り替えることもできます。
import { en } from '@payloadcms/translations/languages/en'
import { ja } from '@payloadcms/translations/languages/ja'
i18n: {
supportedLanguages: { en, ja },
fallbackLanguage: 'ja',
},
なお、これは管理画面UIの言語設定です。記事本文そのものを多言語で持ちたい場合は、別途localizationオプションでフィールド単位の多言語化を設定します。
Payload CMSとStrapiの違い:どちらを選ぶか
同じオープンソースのヘッドレスCMSでも、両者は狙いが異なります。Payloadは「コードでバックエンドを組む開発者向けフレームワーク」、Strapiは「管理画面から使い始められる成熟プラットフォーム」です。
| 観点 | Payload CMS | Strapi |
|---|---|---|
| 設計思想 | コードファースト(設定=TypeScript) | GUI中心で管理画面から構築 |
| 言語 | TypeScriptネイティブ | JavaScript(型は後付け) |
| Next.js統合 | appへ直接インストール可 | 別サーバーとして連携 |
| 成熟度・実績 | 新しく拡張が速い | 実績・エコシステムが豊富 |
判断軸はシンプルです。Next.js+TypeScriptで型安全にCMSをコードへ取り込みたいならPayload、非エンジニアを含む運用や豊富なプラグイン・広いDB対応を重視するならStrapiが無難です。Strapi側の詳細はStrapiとは?読み方・使い方とメリット・デメリット、最新のv5事情はStrapi v5が注目される背景と基本アーキテクチャで扱っています。
料金とホスティング(セルフホスト前提)
Payload本体はMITライセンスで無料です。ユーザー数課金やコンテンツ件数の上限、API従量課金はなく、支払うのは実行するインフラ費用のみです。前述のとおりマネージドのPayload Cloudは買収以降新規受付が停止しているため、本番はVercelやコンテナ環境などへ自前でデプロイするのが基本になります。実質的なコストは、実装・移行・カスタム開発・保守といった構築側に寄る点を見込んでおくとよいでしょう。
よくある質問
Payload CMSの読み方は?
「ペイロード(シーエムエス)」と読みます。payloadは「積載物・データ本体」を意味する英単語です。
Payload CMSは無料で使えますか?
本体はMITライセンスで無料、商用利用も可能です。費用は動かすサーバーなどのインフラ分だけで、ライセンス料や人数・件数課金はありません。
管理画面は日本語化できますか?
できます。日本語翻訳が標準で同梱されており、i18n設定で対応言語を指定するか、各ユーザーがアカウント設定で表示言語を切り替えます。
Payload CMSにNext.jsは必須ですか?
Payload 3.0はNext.jsへの統合を前提に作られていますが、Node環境で動くためAstro・SvelteKit・Remixなどとも併用できます。とはいえNext.jsと同居させるのが最も導入しやすい構成です。
PayloadとStrapiはどちらを選ぶべきですか?
Next.js+TypeScriptでコードとしてCMSを扱いたいならPayload、GUI中心の運用や実績・プラグインの多さを重視するならStrapiが向きます。