pitcms + Next.jsでプレビュー・フォーム・全部入りのブログを15分で作る

Next.jsやAstroでサイトを作るとき、CMS選びで悩んだことはありませんか？

• プレビュー機能がない ... 編集者が公開前に確認できない
• お問い合わせフォーム ... 別契約？管理画面がまた1つ増える
• 本格的に使うと月額料金が高い
• CMSをやめたいとき、データの移行が大変

microCMS、Contentful... どれも優れたサービスですが、上記の課題を全部解決してくれるものはなかなかありません。

この記事では、プレビュー・フォーム・AI編集が標準搭載されたヘッドレスCMS「pitcms」と、そのスターターテンプレートを使ってNext.jsブログを構築する方法を紹介します。

pitcmsとは

• https://pitcms.net

pitcmsはGitHubリポジトリをバックエンドに使う、日本製のGitベースヘッドレスCMSです。

APIベースCMSとの違い

microCMSやContentfulのようなAPIベースのCMSでは、コンテンツはCMSのサーバーに保存され、API経由で取得します。CMSをやめると、データの取り出しが必要になります。

pitcmsはコンテンツをすべてGitHubリポジトリ内のMarkdown / JSONファイルとして保存します。pitcmsをやめても、データはそのまま手元に残ります。この設計思想をpitcmsでは「はがしやすい」と呼んでいます。

他のCMSにない標準機能

機能	pitcms	microCMS	Contentful
有料プラン	¥980/月	¥4,900/月〜	$300/月〜
データ保存先	GitHub（Markdown/JSON）	SaaS（API）	SaaS（API）
ロックイン	なし	あり	あり
プレビュー	標準搭載	実装が必要	実装が必要
フォーム	標準搭載（無料）	別途契約	別途契約
AI編集	あり	なし	なし

注目すべきは、プレビュー・フォーム・AI編集がすべて無料プランから使える点です。他のCMSでは有料プランにしないと使えなかったり、そもそも機能として存在しないものが、pitcmsでは最初から揃っています。

さらに有料プランでも¥980/月。microCMSの約1/5、Contentfulと比べれば桁が違います。しかもコンテンツ量(API量)による従量課金がないので、記事が増えても料金は変わりません。

スターターテンプレートで15分セットアップ

一から構築するのは面倒なので、Next.jsで、すべてが揃ったスターターテンプレートを用意しました。

pitcms-starter-nextjs

デモ: https://pitcms-starter-nextjs-seven.vercel.app/

プロジェクト構成

pitcms-starter-nextjs/
├── content/posts/           # ブログ記事（Markdown）
│   ├── hello-world.md
│   ├── getting-started.md
│   └── how-to-edit.md
├── src/
│   ├── app/
│   │   ├── page.tsx         # トップ（最新記事3件）
│   │   ├── blog/
│   │   │   ├── page.tsx     # 記事一覧
│   │   │   └── [slug]/
│   │   │       └── page.tsx # 記事詳細（SSG）
│   │   └── contact/
│   │       └── page.tsx     # お問い合わせフォーム
│   ├── components/          # UIコンポーネント
│   └── lib/
│       └── content.ts       # Markdown解析
├── pitcms.jsonc             # pitcms設定（これで管理画面が決まる）
└── next.config.ts           # SSG出力設定

基本的にNext.jsプロジェクトですが、マークダウンでのブログ記事と、セットアップされたpitcms.jsoncが含まれています。

pitcms.jsonc

pitcms.jsoncはpitcmsダッシュボードからコンテンツを操作できるように各種設定をするファイルです。

{
  "$schema": "https://pitcms.net/schema/pitcms.schema.json",
  "schemaVersion": 1,
  "media": {
    "storagePath": "public/images",
    "publicPath": "/images",
  },
  "collections": [
    {
      "name": "posts",
      "label": "ブログ記事",
      "path": "content/posts",
      "extension": "md",
      "fields": [
        {
          "name": "title",
          "type": "text",
          "label": "タイトル",
          "required": true,
        },
        {
          "name": "description",
          "type": "textarea",
          "label": "説明文",
          "required": true,
          "ai": [
            { "label": "要約を生成", "context": "記事の内容を短く要約" },
            { "label": "SEO最適化", "context": "SEOに最適な説明文に変換" },
          ],
        },
        {
          "name": "publishedAt",
          "type": "date",
          "label": "公開日",
          "required": true,
        },
        { "name": "heroImage", "type": "image", "label": "アイキャッチ画像" },
        {
          "name": "isDraft",
          "type": "boolean",
          "label": "下書き",
          "default": false,
        },
        {
          "name": "content",
          "type": "richtext",
          "label": "本文",
          "required": true,
        },
      ],
      "pit": {
        "title": "title",
        "createdAt": "publishedAt",
        "draft": "isDraft",
        "body": "content",
      },
    },
  ],
}

くわしくは、ドキュメントをご覧ください。

• https://pitcms.net/docs/pitcms-jsonc

フィールドの追加・変更はpitcms.jsoncを編集してpushするだけ。コレクションを増やせば、ブログ以外のコンテンツ（お知らせ、FAQ、商品情報など）も管理できます。

pitcmsとの連携

テンプレートのクローン・依存関係のインストール・GitHubへのプッシュといった基本的なセットアップを済ませたら、pitcmsと連携します。

1. pitcmsダッシュボードログイン
2. 「 新規プロジェクト作成 」からGitHub Appのインストール
3. リポジトリを選択して新規プロジェクトの作成

これだけで、テンプレートのpitcms.jsoncを自動認識し、ブログ記事の管理画面がすぐに使えるようになります。

プレビュー機能

多くのヘッドレスCMSでは、プレビューを実現するためにプレビュー機能の実装が必要ですが、pitcmsではコードを1行も書かずにプレビューが動きます。

設定画面から、ホスティングサービスを選択するだけです。

仕組みは↓です。

1. ダッシュボードで「編集セッション」を開始
   ↓
2. 記事を追加・編集して「保存」
   ↓
3. GitHubにブランチが自動作成
   ↓
4. ホスティングサービスがブランチプレビューを自動生成
   ↓
5. ダッシュボードにプレビューURLが表示される

ポイントは、ホスティングサービスのプレビューをそのまま活用していることです。

Draft APIもプレビューモードも不要。pitcmsがホスティングサービスと連携し、ブランチデプロイの状態をリアルタイムに追跡。デプロイが完了した瞬間にプレビューURLをダッシュボードに自動表示します。

実際の動作

コンテンツを編集して保存すると、↓のように、ヘッダーの右側に プレビュー作成中... と表示されます。

少し待つと、↓のように、プレビューURLが表示されます。

このプレビューURLから追加したブログポストが確認できます。

フォーム機能

ヘッドレスCMS + SSGの構成で、お問い合わせフォームの実装は地味に面倒です。

フォーム送信のためだけにAPI Routeやサーバーレス関数をセットアップすることになります。

かといってFormSpreeなどの外部サービスをそれだけのために契約するのも微妙...。

pitcmsなら、フォーム機能が最初から組み込まれているのでその必要はありません。

セットアップ手順

1. pitcmsダッシュボードの「設定」→「フォーム」でフォームを作成

2. 発行されたエンドポイントURLをformタグのactionに設定

3. input / textareaのname属性をpitcms側のフィールド名と一致させる

<form action="{formUrl}" method="POST">
  <input name="name" type="text" placeholder="お名前" required />
  <input name="email" type="email" placeholder="メールアドレス" required />
  <textarea name="message" placeholder="メッセージ"></textarea>
  <div style="display:none">
    <input name="_hp" tabindex="-1" autocomplete="off" />
  </div>
  <button type="submit">送信</button>
</form>

HTMLのformタグだけで動作します。

送信データはpitcmsダッシュボードで確認できるほか、GitHub Issueにも自動保存されます。GitHub Actionsと組み合わせればSlack通知や自動返信メールも自由に組めます。

スパム対策としてhoneypotフィールドとレート制限がサーバー側で組み込まれているので、別途対策を実装する必要もありません。

よくある質問

Q. 既存のNext.jsプロジェクトにも導入できる？

はい。pitcms.jsoncをルートに配置してGitHub Appをインストールすれば、既存プロジェクトでも使えます。スターターは新規構築用ですが、設定ファイルやデータ取得のコードは既存プロジェクトにそのまま流用できます。

Q. Astroでも使える？

はい。pitcmsはGitベースなのでフレームワークに依存しません。Astro版のスターターも今後公開予定です。

Q. 無料プランの制限は？

無料プランでも、使用量等の制限はあるものの、主要な機能をほぼ全て利用できます。

Freeプランでは、コレクション3つ・メンバー3人・フォーム1つ・AI編集の回数などに制限があります。Pro（¥980/月）にすればすべて無制限になります。

• https://pitcms.net/pricing

Q. pitcmsをやめたらデータはどうなる？

何もする必要はありません。 コンテンツはすべてGitHubリポジトリのMarkdown/JSONファイルとしてそのまま残ります。これが「はがしやすい」の意味です。

まとめ

ヘッドレスCMSの「プレビューがない」「フォームは別契約」「料金が高い」「ロックインが心配」——これらの課題をpitcmsはまとめて解決します。

まずはテンプレートをcloneして、15分で動くブログを体験してみてください。

GitHub: https://github.com/nicofishman/pitcms-starter-nextjs
pitcms: https://app.pitcms.net/