PayloadCMS 入門
このガイドについて
Next.js + TypeScript を触ったことがある人 を対象に、PayloadCMS の全体像と主要機能を 7 章で解説するガイドです。「自分の DB を持って、自分のコードで CMS を組みたい」という人が、読了後に自分のプロジェクトに導入判断できる状態を目指します。
このガイドの特徴
- 概念中心 + 抜粋コード: 動くチュートリアルではなく、各機能の「何ができて、どう書くか」を最小コードで示します
- Next.js 同居構成 (3.x) を主軸: PayloadCMS の最大の特徴を 1 章まるまる使って深掘り
- Postgres メイン: 2024 年に stable 化した Postgres adapter を前提に解説 (Mongo / SQLite は補足)
- OSS / Self-hosted 視点: 「自分でホストする」立場での設計判断・運用ポイントを通底
- 照合時点: 本ガイドの主要記述は 2026-07 に Payload v3.85 時点の公式 doc と照合済み (それ以降の機能追加は反映されていない可能性があります)
ガイドの構造
各章のリンクと概要
| 章 | テーマ | 概要 |
|---|---|---|
| 01 PayloadCMS とは / なぜ今 | 全体像 | Headless CMS としての位置付け / 3.x で何が変わったか / Figma 買収・OSS の文脈 / 他 CMS との比較 |
| 02 Core Concepts | Config-First | payload.config.ts 中心の設計 / Collections と Globals の使い分け |
| 03 Data Modeling | Fields / Lexical | フィールド型カタログ / Blocks / Lexical Rich Text / Localization / Versions & Drafts |
| 04 Security & Lifecycle | Auth / Hooks | 内蔵 Users と JWT / 関数ベース Access Control / Hooks ライフサイクル |
| 05 APIs | 3 層 API | Local API / REST / GraphQL の関係と使い分け / 自動生成型 |
| 06 Next.js 統合 ★ | 同居構成 | route group / Server Components から Local API / Live Preview / Draft Preview |
| 07 Admin / Media / Deploy | 運用 | Admin UI カスタマイズ / Plugins / Media (uploads + S3) / Postgres adapter / Migration / Jobs Queue / Vercel デプロイ |
★ = 本シリーズの目玉章。3.x の Next.js 同居構成を集中解説します。
対象読者
- Next.js (App Router) と TypeScript の基礎がある人
- Headless CMS を「自分のインフラ・自分の DB」で動かしたい人
- Strapi / Sanity / Contentful 等から PayloadCMS への乗り換えを検討している人
前提知識
| 必須度 | 知識 |
|---|---|
| 必須 | TypeScript の基本文法 / Next.js App Router の基礎 |
| 推奨 | Postgres (または別の RDB) の基本操作 / REST API の設計感覚 |
| あれば | Headless CMS を 1 つ触ったことがある (Strapi / Sanity / Contentful 等) |
推奨される読み方
- PayloadCMS 初見: 01 章から順番に読み、概念を固めてから 06 章 (Next.js 同居構成) で実装の全体像を掴む
- Next.js 経験があり、導入是非を急ぎたい: まず 01 章 (なぜ今) と 06 章 (同居構成) を先に読み、必要に応じて 02-05 章へ戻る
- 辞書的に使いたい: 上の章テーブルから該当する章を直接開く
このガイドで扱わないこと
- React そのものの入門 / Next.js App Router の入門 (公式ドキュメントを推奨)
- PayloadCMS の エンタープライズ機能 の深掘り (SSO / Multi-Tenancy など。概観のみ 07 章で言及)
- 動くサンプルアプリのデプロイ手順 (公式テンプレートが多数あるため、本書では設計判断にフォーカス)
参考リンク
- 公式 doc: https://payloadcms.com/docs/getting-started/what-is-payload
- 3.0 リリースポスト: Payload 3.0: The first CMS that installs directly into any Next.js app
- GitHub: payloadcms/payload
それでは 01 章 PayloadCMS とは / なぜ今 から始めましょう。