この構成を選んだ理由

YATA-NODE サイトは Next.js App Router × Cloudflare Pages で構築している。この組み合わせを選んだ理由は3つだ。

  1. 固定費ゼロ — Cloudflare Pages の無料枠でトラフィックをほぼカバーできる
  2. CDN性能 — Cloudflareのグローバルネットワークで高速配信
  3. Edge Runtime対応 — Contact フォームのServer Actionsが Edge で動作する

セットアップの全体像

# Cloudflare対応ビルド
npx @cloudflare/next-on-pages

# ローカルプレビュー
npx wrangler pages dev .vercel/output/static

@cloudflare/next-on-pages が Next.js のビルド出力を Cloudflare Workers 互換の形式に変換する。

ハマりポイント1: next/image

Cloudflare Pages 上では next/image のデフォルト最適化が動作しない。

// next.config.ts
const nextConfig = {
  images: {
    unoptimized: true,
  },
}

unoptimized: true を設定するか、事前に最適化済みの画像を配置する運用にする。

ハマりポイント2: Edge Runtime

Server Actions を使う場合、該当ページに runtime = 'edge' を明示する必要がある。

// src/app/contact/page.tsx
export const runtime = 'edge'

nodejs_compat フラグを wrangler.toml に追加することで、Node.js APIの一部も利用可能になる。

# wrangler.toml
compatibility_flags = ["nodejs_compat"]

デプロイフロー

GitHub連携でCI/CDを自動化している。

  1. dev ブランチへのプッシュ → プレビューデプロイ
  2. main ブランチへのマージ → 本番デプロイ

環境変数（RESEND_API_KEY等）は Cloudflare Pages のダッシュボードから設定する。

まとめ

この構成の最大のメリットはインフラ管理コストのほぼゼロ化だ。ソロ運用でも十分にスケールし、将来的に Cloudflare Workers や R2 に機能を追加しやすい。