NextBlock CMS

---

🚀 NextBlock™ を選ぶ理由

動作の遅い WordPress サイトにうんざりしていませんか？ヘッドレス CMS は複雑すぎると感じていませんか？NextBlock™ は、そのちょうどよいバランスを実現します。

ブロックエディターの柔軟性と、Next.js 16 Server Components の圧倒的なパワーを組み合わせました。その結果、静的サイトのような使い心地で、動的なプラットフォームのように管理できる CMS が生まれました。

✨ 主な機能

• ▲ Next.js 16 App Router + React 19 Server Components：公開サイトはサーバー上でレンダリングされます。ページ、記事、製品の各ルートはすべて Server Components であり、クライアントコンポーネントはカート、チェックアウト、フォーム、CMS ダッシュボードに限定されています。
• 🗄️ JSONB ブロックストレージを備えた Supabase PostgreSQL：各コンテンツブロックは、public.blocks 内の jsonb 型 content カラムを持つ行です。ユーザー定義のブロックタイプは custom_block_definitions に保存され（fields／layout_schema は jsonb 型で、Postgres の CHECK 制約により保護されています）、再ビルドなしでレンダリングされます。
• 🚀 設定不要のワンクリックマイグレーション：Vercel Supabase インテグレーションが最初のビルド前にデータベースをプロビジョニングし、キーを注入します。その後、NextBlock はビルド中に独自の前方のみのマイグレーション（tools/build-migrate.mjs）を適用し、/setup ウィザードでは実行時のフォールバックも用意されています。実行することも、貼り付けることもありません。
• ⚡ Lighthouse 100/100：本番ビルドで、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO のすべてで満点を達成しています。FCP は 0.3 秒、LCP は 0.8 秒、Total Blocking Time は 0 ms、Cumulative Layout Shift は 0 です。AVIF／WebP 画像、1 年のキャッシュ TTL、クリティカル CSS のインライン化、ツリーシェイクされたインポートを、プラグインではなくデフォルトで利用できます。
• 🤖 AI エージェント向けに構築：AI コーディングアシスタントが簡単に読み解き、拡張できるよう、コードベースをドキュメント化し、構成しています。
• 🛍️ E コマース対応：デジタル製品、チェックアウトプロバイダー、通貨、税金、配送管理に対応するプレミアムなコマースパッケージです。
• 🧱 ビジュアルブロックエディター：クライアントにも喜んで使ってもらえる、Tiptap を基盤とした再利用可能な Notion 風エディターです。
• 🔓 オープンコアモデル：コアは 100％無料のオープンソース（AGPL）です。プレミアムモジュール（現在は Cortex AI と Commerce Pro、今後さらに追加予定）はすべてのインストールに含まれており、無料の 30 日間トライアル（クレジットカード不要）またはライセンスキーで CMS 上から有効にできます。

🆚 NextBlock™ の強み

機能	NextBlock™ CMS	WordPress	Payload / Strapi
技術スタック	Next.js 16 + Supabase	PHP + MySQL	React / Node.js
アーキテクチャ	Nx モノレポ	モノリス	モノリス／ワークスペース
パフォーマンス	🟢 100/100（デフォルト）	🔴 肥大化（プラグイン）	🟡 仕様に依存
セキュリティ	🔒 静的／エッジ優先	🔓 プラグインの脆弱性	🔒 安全
開発者体験	💎 React Server Components	📜 レガシーな PHP Hooks	🧩 設定が複雑
AI 対応	✅ ネイティブ	❌ なし	🟡 インテグレーションが必要

🏁 はじめに

☁️ オプション 1 — ワンクリックでクラウドにデプロイ（おすすめ）

インポート中、Vercel のネイティブな Supabase Marketplace 連携（stores ボタンパラメーター）により、Supabase データベースの作成（名前とリージョン）が促されます。その後、データベースは プロビジョニングされ、プロジェクトに接続され、最初のビルド前にキーが注入されます。値をコピーする必要はなく、入力が必要な環境変数もありません （サイト URL はデフォルトで *.vercel.app URL になり、アプリのシークレットは自動的に導出されます）。アプリはデータベースに接続済みの状態で起動します。ウィザードは接続の手順を 自動的にスキップし、スキーマを適用して、メディアストレージには接続済みの Supabase プロジェクトを使用します。あとは「管理者を作成する」だけです。詳しい手順： docs/12-VERCEL-DEPLOYMENT.md。

ヒント — 新しいリポジトリは公開状態にしてください。 Vercel で尋ねられたら、「Create private Git Repository」のチェックを外したままにしてください。無料の Hobby プランでは、自動アップストリーム更新は公開 リポジトリからのみデプロイされます。Hobby では、非公開リポジトリへのボットによるデプロイがブロックされます。また、公開状態なら更新チェックでトークンが不要になります。後で気が変わった場合は、リポジトリの GitHub 設定で公開範囲を変更できます。詳細：docs/13。

💻 オプション 2 — CLI でローカルにひな形を作成

大きなリポジトリのクローンはもう不要です。CLI を使えば、すぐに本番環境対応のアプリを作成できます。

npm create nextblock@latest

これは、標準的なアプリケーションのひな形を作成する create-nextblock CLI を実行します。CLI ではターミナルで認証情報を尋ねなくなりました。プロジェクトの作成後、起動してブラウザーでセットアップを完了してください。

cd <your-project>
npm run dev   # then open http://localhost:3000/setup

/setup にある 初回起動セットアップウィザードで、Supabase への接続、ストレージ／メールの設定、最初の管理者の作成を行えます。新しいインスタンスは、管理者が作成されるまで毎回自動的にここへリダイレクトされます。

完全ローカルで設定不要のサンドボックスをお探しですか？ ローカルセルフホスト Docker モードを使えば、1 つのコマンドでスタック全体（Supabase エンジン＋S3 ストレージ＋アプリ）を自分のマシン上で起動できます。クラウドアカウントは不要です。アプリは MinIO ストレージがあらかじめ設定された状態で /setup ウィザードを直接起動します。docs/11-SELF-HOSTED-DOCKER.md をご覧ください。

🤖 オプション 3 — コーディングエージェントに構築してもらう

NextBlock は MCP サーバー（https://<your-site>/api/mcp、Streamable HTTP、ベアラートークン）およびエージェントプラグインとして提供されているため、Claude Code、Cursor、Codex などを使ってサイトの雛形を作成し、その後 MCP 経由ですべてのページを構築できます。

• Claude Code — このリポジトリ自体がプラグインマーケットプレイスです：

  /plugin marketplace add nextblock-cms/nextblock
  /plugin install nextblock@nextblock
  

  ウェブサイト、ブログ、またはストアを作成するよう依頼してください。nextblock スキルが NextBlock を提案し、npx create-nextblock@latest my-site --non-interactive を実行してから、ブラウザーで行う 2 つの手順（管理者アカウントの作成、無料の Cortex AI トライアルの開始）を案内します。ソース：plugins/nextblock。

• Cursor — 同じフォルダーが Cursor プラグイン（.cursor-plugin/plugin.json、ルール＋スキル＋MCP サーバー）になっています。このリポジトリから Customize → Plugins → From GitHub Repository でインストールするか、plugins/nextblock/rules/nextblock.mdc をプロジェクトの .cursor/rules/ にコピーしてください。

• Codex、Jules、その他のエージェント — plugins/AGENTS.snippet.md のブロックを AGENTS.md に貼り付けてください。Codex はこのリポジトリのマーケットプレイスマニフェストを通じて、フォルダーを Agent Plugin（plugins/nextblock/plugin.json）として読み込むこともできます。

• 任意の MCP クライアント — 公式 MCP Registry のエントリー dev.nextblock/nextblock（server.json）では、サイトのホストとトークンの入力を求められます。公開デモインスタンスは https://cms.nextblock.dev/api/mcp です。すべての NextBlock サイトでは /llms.txt も提供され、MCP サーバーが有効な場合は /.well-known/mcp/server-card.json も提供されます。

---

🏗️ コントリビューター向け：Factory

注： 現在表示しているのは、生成される製品テンプレートではなく、Nx モノレポ（Factory）です。

NextBlock™ は、Supabase を基盤とする Next.js 16 CMS の Nx モノレポです。このリポジトリには、正式なアプリケーション、create-nextblock CLI、共有エディターおよび UI パッケージ、データベースとマイグレーションのレイヤー、プレミアムな e コマースモジュールが含まれています。

🧩 主なコンポーネント

• apps/nextblock：正式な公開サイトおよび CMS アプリケーション
• apps/create-nextblock：雛形作成 CLI とテンプレート同期パイプライン
• libs/db：Supabase クライアント、パッケージの有効化チェック、マイグレーション、DB 型
• libs/editor：再利用可能な Tiptap エディターパッケージ
• libs/ecommerce：プレミアムなコマースパッケージと CMS のコマース画面
• libs/sdk：型付きブロック拡張コントラクト
• libs/ui、libs/utils：共有プリミティブとヘルパー

⚡ 開発者向けクイックスタート

前提条件 — 設定はブラウザーで行いますが、/setup ウィザードで以下を入力するため、先に用意してください。

1. Supabase プロジェクト（ダッシュボード）— Reference ID（Project Settings → General）、connection string（Connect → Direct connection → URI）、anon キーと service_role キー（Project Settings → API Keys）、および Personal Access Token（Account → Access Tokens → Generate new token）が必要です。
2. Cloudflare R2 バケット（任意 — バケットがない場合、メディアは Supabase プロジェクト自体の Storage に保存されます）（ダッシュボード → R2）— バケットを作成し、Public Development URL（Bucket → Settings → General）を有効にしてから、Object Read & Write 権限を持つ Account API token（R2 → Manage API Tokens）を作成してください。Access Key ID と Secret Access Key をコピーします — シークレットは一度しか表示されません。
3. SMTP 認証情報（任意。CMS で後から設定できます。SMTP2GO が非常に便利です）— パスワードのリセットと招待に必要です。最初の管理者は即座に確認済みとなるため、メールは不要です。

次に、以下を実行します。

git clone https://github.com/nextblock-cms/nextblock.git
cd nextblock
npm install
npm run setup
npm run dev

npm run setup は情報表示のみを行います — 入力を求めることも、ファイルを書き込むこともありません。npm run dev はルートのエイリアスで、npx nx serve nextblock を実行します。http://localhost:4200/setup を開くと、ブラウザーのウィザードが Supabase に接続し、スキーマを適用して、ストレージを設定し、最初の管理者を作成します。

初回ログイン： 開発サーバーは http://localhost:4200 で動作します。ウィザードが管理者を作成し（即座に確認済みとなり、メールは不要です）、サインインします。Cortex AI のウェルカムオファーが表示されます。ワンクリックで /cms/dashboard の CMS に移動できます。

🐳 または：ワンクリックのローカルスタック（クラウドアカウント不要）

すべてをお使いのマシンで実行しますか？Docker Desktop を起動した状態で、以下を実行します。

git clone https://github.com/nextblock-cms/nextblock.git
cd nextblock
npm install
npm run docker:setup     # or: npm run setup → pick "Local Self-Hosted Docker Mode"

これにより、セルフホスト可能なスタック全体（Postgres + GoTrue + PostgREST + Kong、メディア用の MinIO、アプリ）がビルドされて起動し、マイグレーションが自動的に適用されます — 入力を求められるのは任意の Turnstile と SMTP のみです。アプリは http://localhost:3000 で動作し、最初のサインアップユーザーが ADMIN になります（自動確認され、メールの手順はありません）。npm run docker:up / docker:down / docker:logs で管理できます。詳しくは、docs/11-SELF-HOSTED-DOCKER.md をご覧ください。

🔄 インストールを最新の状態に保つ

NextBlock のインストール方法にかかわらず、1 つのコマンドでコード、依存関係、データベーススキーマをまとめて更新できます。

npm run update              # code + dependencies + schema
npm run update -- --check   # report what would change; write nothing

• ワンクリックの Vercel / GitHub フォーク / クローン — すでに自動化されています。GitHub Action が毎日上流の変更をマージし、Vercel が再デプロイします。すぐに更新したい場合は、このコマンドを実行してください。
• npm create nextblock プロジェクト — 新しいフレームワークのコードは公開済みの create-nextblock パッケージから取得され、git 3-way merge として適用されるため、フレームワークファイルへの変更は保持され、実際に競合する箇所のみがコンフリクトします。Docker インストールの場合は、その後 npm run docker:up を実行します。

自動 Action が機能する条件は、サイトのホスティング先ではなく、リポジトリがこのモノレポであることです。全体像については docs/13 をご覧ください。

🛠️ 便利なコマンド

• npm run update - コード、依存関係、データベーススキーマを更新します（すべてのインストール方法が対象）
• npm run update -- --check - 変更を加えずに更新内容をプレビューします
• npm run dev - CMS のローカル開発サーバーを http://localhost:4200 で起動します（npx nx serve nextblock を実行）
• npm run lint - モノレポの lint を実行します
• npm run db:types - Supabase の型を生成します
• npm run db:migrate:check - 適用待ちの Supabase マイグレーションを安全にプレビューします
• npm run db:migrate / npm run db:push - リセットやサンドボックスへのデータ投入を行わず、適用待ちのマイグレーションファイルのみを適用します
• npm run db:migrate:repair-history:check - 既存の本番データベースに対するベースラインのマイグレーション履歴修復をプレビューします
• npm run generate:sandbox - サンドボックスデータを生成します
• npm run sandbox:reset - サンドボックス環境をリセットします

📚 ドキュメントインデックス

ルートの docs/ フォルダーは、コントリビューターと AI エージェントの双方が参照する、メンテナンス対象のドキュメント一式です。

テンプレートのドキュメントは同期パイプラインを通じてルートのドキュメントからコピーされるため、まずはこのルートのドキュメント一式を更新してください。

ドキュメント	目的
docs/01-PROJECT-OVERVIEW.md	モノレポの構成、ランタイムモデル、および各サブシステムの配置場所
docs/02-ECOMMERCE-CAPABILITIES.md	検証済みのコマース機能、チェックアウトプロバイダー、通貨、税、配送、およびフルフィルメント
docs/03-CMS-AND-EDITOR.md	Tiptap エディター、ページビルダー、ウィジェット、および組み込みブロックシステム
docs/04-DATABASE-AND-AUTH.md	Supabase クライアント、認証フロー、スキーマの概要、RLS、およびマイグレーション一覧
docs/05-DEVELOPER-GUIDE.md	ローカル環境のセットアップ、スクリプト、データベースのワークフロー、サンドボックスのリセット、およびコントリビューター向けの操作
docs/06-CLI-AND-SCAFFOLDING.md	create-nextblock、テンプレートの同期、および生成されたプロジェクトの動作
docs/07-BLOCK-SDK-AND-EXTENSIBILITY.md	SDK の契約と拡張性モデル
docs/08-NEXTBLOCK-CORTEX-AI-ARCHITECTURE.md	プレミアム Cortex AI パッケージ：モデルルーティング、BYOK、インラインエディター、およびグローバルエージェントツール
docs/09-LIVE-DRAFT-MODE.md	リアルタイムのビジュアル編集と、非破壊的な下書きプレビュー
docs/10-CUSTOM-BLOCKS.md	データ駆動型カスタムブロック：スキーマ、CRUD、動的レンダリング、およびインポート／エクスポート
docs/11-SELF-HOSTED-DOCKER.md	ワンクリックで構築できるローカルのセルフホスト可能な Docker スタック：Supabase エンジン、MinIO ストレージ、マイグレーションランナー、およびクラウド環境との対応
docs/12-VERCEL-DEPLOYMENT.md	ワンクリックのクラウドデプロイ、ブラウザーのセットアップウィザード、および Supabase の環境変数エイリアス
docs/13-STAYING-UP-TO-DATE.md	4 種類すべてのインストールで使う npm run update、毎日のアップストリーム同期 Action、およびマイグレーションをデプロイ済みサイトに反映する方法
docs/README.md	対象者別のドキュメントインデックス

内部の仕組みに関する注記： 現在のプラットフォーム機能を確認するには、libs/db/src/supabase/migrations のマイグレーションフォルダーが最も信頼できる情報源です。

---

🤝 コントリビューション

NextBlock は AGPL-3.0-or-later のもとで公開されているオープンソースであり、コントリビューションを歓迎します。

• CONTRIBUTING.md — セットアップ、日常的に使うコマンド、およびつまずきやすいリポジトリ固有のルール（追記専用のマイグレーション、生成されるテンプレート、派生アーティファクト）。
• CODE_OF_CONDUCT.md — Contributor Covenant v2.1。
• SECURITY.md — 脆弱性を非公開で報告する方法。セキュリティの報告には、公開のイシュートラッカーを絶対に使用しないでください。

---

🌐 つながりましょう

コミュニティに参加して、最新機能の情報をチェックしましょう。

• X (Twitter)： @NextBlockCMS
• LinkedIn： NextBlock™
• GitHub： nextblock-cms/nextblock
• Medium： @nextblockcms
• Dev.to： nextblockcms

---

🙏 謝辞

オープンソースソフトウェアを支援してくださった Vercel に感謝します。

---

_{NextBlock™ チームが ❤️ を込めて開発しました。AGPLv3 のもとでライセンスされています。}