フロントエンド

Cloudflare Pages × Next.js で作る個人ブログ構成

Cloudflare Pages × Next.js で作る個人ブログ構成

TL;DR

  • Next.js + TypeScript で静的生成を中心に、必要最小限の動的機能だけを載せる。
  • Cloudflare Pages にデプロイ。Git 連携が高速で無料枠が厚く、CDN による配信が高速。
  • microCMS で記事管理。直感的な管理画面や予約公開、プレビューなど運用に便利な機能が揃っている。
  • 問い合わせは SSGForm を使用し、サーバーレスでフォーム送信を完結させる。
  • Tailwind CSS でデザインの一貫性を保ちつつ実装スピードを向上させる。

読者対象

  • 個人ブログを“速く・安く・壊れにくく”運用したいフロントエンド／マークアップエンジニア。
  • microCMS や Cloudflare Pages の採用感・実務感を知りたい人。

なぜこの構成？

Next.js + TypeScript

Next.js は静的サイト生成（SSG）やインクリメンタル静的再生成（ISR）に対応しており、動的ページも必要に応じて追加できます。TypeScript を併用することで、静的型チェックによって実装時にバグを防ぎやすくなり、長期的に保守しやすくなりますtypescriptlang.org。

Cloudflare Pages

Cloudflare Pages は、GitHub／GitLab リポジトリと連携し、コミットやプルリクエストに応じて自動的にビルドとデプロイを行う JAMstack プラットフォームです。公式サイトでは「開発者向けで Git 連携が容易」「無制限のシートでコラボレーション可能」「Cloudflare のエッジネットワークで高いパフォーマンス」を特長として紹介していますpages.cloudflare.com。無料プランでも 1 ビルド同時実行・月 500 回のビルド・無制限のサイトと静的リクエスト・無制限の帯域幅が提供されますpages.cloudflare.com。

microCMS

microCMS は API ベースの日本製ヘッドレス CMS です。公式サイトによると、直感的に使える管理画面で予約公開や編集履歴管理、コンテンツプレビューなどが用意されており、最新技術との連携も柔軟に行えるとされていますmicrocms.io。API でデータを取得するため、Next.js のビルド時に記事一覧や詳細を取得し、ISR で定期的に再生成することが可能です。

Tailwind CSS

Tailwind CSS はユーティリティファーストの CSS フレームワークで、「flex」「pt‑4」「text-center」などのクラスを組み合わせることで、マークアップ内に直接スタイルを記述できますtailwindcss.com。デザインシステムに沿ったクラス群を使うことで、見た目の一貫性を保ちながら開発スピードを高められます。

SSGForm

SSGForm は静的サイト向けのフォームサービスです。公式サイトでは、POST する URL を発行し、既存フォームの action 属性をその URL に変更するだけで利用できる点が強調されていますssgform.com。フォーム内容はサービス側にログとして残らず、送信内容はそのまま通知メールとなって届けられるため、プライバシー面でも安心できるとの説明がありますssgform.com。GitHub Pages や Netlify、Render、Cloudflare Pages などさまざまなデプロイ先に対応しているため、今回の構成とも相性が良いです。

全体アーキテクチャ

microCMS (Headless CMS)
      │ REST/GraphQL
      ▼
Next.js (SSG/ISR, TypeScript)
      │ build 時にフェッチ
      ▼
静的アセット (Tailwind CSS)
      │
Cloudflare Pages (CDN 配信)
      │
SSGForm (問い合わせ送信)

プロジェクト構成（例）

/
├─ app/ または src/
│  ├─ (routes)   # 記事一覧/詳細ページ、固定ページ
│  ├─ components # 再利用コンポーネント
│  ├─ lib        # microCMS クライアント、型定義、ユーティリティ
│  └─ styles     # グローバルスタイルや Tailwind 設定
├─ public/
├─ tailwind.config.ts
├─ package.json
├─ .env（MICROCMS_SERVICE_DOMAIN, MICROCMS_API_KEY など）
└─ wrangler.toml（Workers へ移行する場合）

microCMS：スキーマと取得

microCMS ではモデルを自由に設計できます。ブログの場合は post モデルに title、slug、body、eyecatch、tags、publishedAt などのフィールドを用意するのが一般的です。タグを別モデルにすることで多対多の関係も実現できます。記事一覧では必要なフィールドのみを取得してビルド時間を短縮し、詳細ページでは本文を取得します。ISR を利用すれば再生成のタイミングを柔軟に設定でき、更新内容を早く反映できます。

Tailwind CSS：デザイン方針

  • ベースは @tailwindcss/typography の prose クラスを使い、ブログ記事用のタイポグラフィを適用。
  • 共通コンポーネント（見出し、パンくず、タグ、カードなど）を最小限にまとめ、Utility クラスで細かく調整。
  • ダークモード対応は dark: プレフィックスまたは class トグルで実装し、拡張しやすくします。

フォーム：SSGForm の採用理由

  • 簡単設置：SSGform に登録するとフォーム送信先用の URL が発行されます。その URL へ POST するだけでメール通知が行われ、既存フォームの送信先を書き換えるだけで使えますssgform.com。
  • プライバシー重視：送信された内容はログに残さず、そのまま通知メールとして送信されるため、開発者でも内容を閲覧できない仕様ですssgform.com。
  • 幅広い対応：GitHub Pages や Netlify、Render、Cloudflare Pages など、デプロイ先を選びませんssgform.com。

Cloudflare Pages へのデプロイ

  • GitHub／GitLab リポジトリを連携し、main ブランチへ push するだけで自動ビルドとデプロイが実行されますpages.cloudflare.com。
  • 環境変数に MICROCMS_SERVICE_DOMAIN、MICROCMS_API_KEY、SITE_URL などを設定します。
  • 無料プランでも月 500 回までビルドが可能で、サイト数や静的リクエスト数、帯域幅は無制限ですpages.cloudflare.com。
  • 動的な API が必要になった場合はまず Pages Functions を利用し、要件が増えれば Cloudflare Workers へ移行することもできます。

つまずき＆学び

  1. 再生成タイミング（ISR）：記事更新の即時反映には数十秒～数分の遅延があります。執筆が頻繁な時期は再検証時間を短めに設定すると良いでしょう。
  2. OGP 画像：記事数が増えるとアイキャッチの用意が手間になるので、独自の /api/og エンドポイントなどで OGP 画像を自動生成すると効率的です。
  3. 型の境界：microCMS のレスポンスは Zod などでスキーマを定義して型安全に扱うと、後日の変更に強くなります。
  4. Cloudflare 特有のキャッシュ：HTML や画像のキャッシュポリシーを決めて運用メモを残しておくと、キャッシュに関するトラブルを防ぎやすくなります。

運用の自動化メモ

  • GitHub Actions で Lint や Type Check、ビルドを CI 化して品質を担保。
  • 毎日深夜にサイトマップを検索エンジンへ Ping するなど、SEO を意識した自動化を行う。
  • microCMS の webhook を利用し、コンテンツ更新時に自動で再ビルド＆デプロイをトリガーして反映を早める。

今後（Workers 化するなら）

  • Edge に軽量な BFF（バックエンド for フロントエンド）を置き、A/B テストや段階的キャッシュ制御など高度な配信を実現。
  • R2 や KV を利用し、ランキングやフィードなど軽い動的機能を追加。
  • Hono などで API を整理し、ログ出力やレート制限、フェイルセーフなどを実装することで、より堅牢なサイト運用が可能になります。

参考コスト（概算）

項目費用の目安Cloudflare Pages無料プランで運用可能（500 ビルド/月、無制限のサイト・帯域幅）pages.cloudflare.commicroCMS無料プランは API 5 個まで利用可能。画像数やAPI数が増える場合は有料プランを検討microcms.io独自ドメイン年間 1,500〜3,000 円程度デザインTailwind CSS そのものは無料。デザインに追加コストは不要

仕上げチェックリスト

  • タイトル・Description・OGP・canonical の設定
  • 構造化データ（BlogPosting）の追加
  • RSS/Atom の有無確認
  • 404・500 ページの体裁確認
  • ページ速度（CLS/LCP）の簡易計測　
  • お問い合わせフォーム（SSGForm）の送信テスト

まとめ

この構成の強みは、小さく潔く始められることです。Next.js と Cloudflare Pages によって高速な配信基盤が手に入り、microCMS の直感的な管理画面で記事の更新・公開が楽になります。運用が回り出して「やりたいこと」が増えてきたら、Pages Functions や Workers などを段階的に導入して拡張していく戦略が現実的で精神的にもコスト的にも健全だと感じました。