はじめに
自社サイトやイベントサイトを作っていると、FAQ（よくある質問） を更新しやすい仕組みが必要になります。
- コードにベタ書きしたくない
- 非エンジニアでも更新できるようにしたい
- 表示側はNext.jsなどで自由にデザインしたい
そこで今回は microCMSでFAQ管理を行い、さらに Cloudflare Pages 上でNext.jsサイトとして公開するところまで構築した内容をまとめます。
結論：microCMS × Cloudflare Pages の相性は最高
Cloudflare Pagesは以下の理由でmicroCMSとの相性がとても良いです。
- 静的サイトとして爆速で配信できる
- SSR/ISR が Cloudflare Functions（edge）で動作する
- microCMSのAPIへグローバルな低レイテンシでアクセス可能
- APIキーを Cloudflare Pages の環境変数として安全に管理できる
- デプロイもGit pushだけで完結
→ 「ヘッドレスCMS × 先端ホスティング」の最強組み合わせでした。
実装の全体像
実装フローは以下の4ステップです。
- microCMSでFAQスキーマを作成
- FAQデータを登録
- Next.js（App Router）でFAQページを作成
- Cloudflare Pagesにデプロイ
1. microCMSでFAQ APIモデルを作成
スキーマ例
| フィールド名 | タイプ | 用途 |
|---|---|---|
| question | テキスト | 質問 |
| answer | リッチエディタ | 回答 |
| category | セレクト or テキスト | カテゴリ（任意） |
GUIでポチポチ作れます。
2. FAQエントリを登録する
例：
- Q: サイトの対応ブラウザを教えてください
- A: 最新のChrome/Edge/Safariを推奨します。
3. Next.js（App Router）で実装
/app
└ faq/
└ page.tsx
/app/faq/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "FAQ",
};
type FAQ = {
id: string;
question: string;
answer: string;
category?: string;
};
export default async function FAQPage() {
const res = await fetch(
"https://YOUR_SERVICE.microcms.io/api/v1/faq",
{
headers: {
"X-MICROCMS-API-KEY": process.env.MICROCMS_API_KEY!,
},
// Cloudflare Pages では "force-cache" or "no-store" が安定
cache: "no-store",
}
);
const data: { contents: FAQ[] } = await res.json();
return (
<main className="max-w-3xl mx-auto p-6">
<h1 className="text-3xl font-bold mb-6">FAQ</h1>
<div className="space-y-4">
{data.contents.map((faq) => (
<details key={faq.id} className="border rounded p-4">
<summary className="cursor-pointer font-semibold">
{faq.question}
</summary>
<div
className="mt-2 prose"
dangerouslySetInnerHTML={{ __html: faq.answer }}
/>
</details>
))}
</div>
</main>
);
}
4. Cloudflare Pages にデプロイする
① GitHub と Cloudflare Pages を連携する
Cloudflare Pages → Create Project
→ GitHubリポジトリを選択
→ ビルド設定：
| 設定項目 | 値 |
|---|---|
| Framework preset | Next.js |
| Build command |
npm run build or bun run build
|
| Build output |
.vercel/output（自動設定されることが多い） |
| Node バージョン | 18 or 20 |
② microCMS APIキーを環境変数に設定
Pages → Settings → Environment Variables に設定：
MICROCMS_API_KEY = xxxxxxxxxxxxx
Next.js 側では process.env.MICROCMS_API_KEY で参照できます。
③ Edge Runtime との相性
App Router かつ cache: 'no-store' を使うと、Cloudflare Functions（Edge）上で動作します。
メリット：
- microCMS がグローバルCDNなので edge と相性抜群
- 毎回フレッシュなFAQを取得できる
Cloudflare Pagesで運用してみた感想
よかった点
- デプロイが速い（10秒〜20秒）
- microCMS の API が edge 経由でかなり高速に取得できる
- APIキーが環境変数にしっかり隠せる
- 動的・静的どちらも対応できる
- Preview URL が自動で生成され、確認が楽
注意点
- fetch の cache モードを
force-cacheやno-storeに合わせる必要がある - preview と production で環境変数を分けておくのが良い
まとめ：microCMS × Cloudflare Pages × Next.js はFAQに最適
今回の構成で感じたのは、
FAQの「変更頻度の高さ」×「Web表示自由度の高さ」×「高速配信」をすべて満たす最高の組み合わせ
ということです。
- microCMS → FAQ 更新が最も楽
- Next.js → フロントの柔軟性が高い
- Cloudflare Pages → 高速・安い・デプロイが楽
👉 FAQページをCMS運用したいなら、この構成だけで十分戦える と実感しました。