Cloudflare Pages にデプロイする方法

Cloudflare Pages とは

Cloudflare Pages は Cloudflare が提供する静的サイトホスティングサービスです。 無料枠が大きく、CDN による高速配信が特徴です。

デプロイ手順

1. GitHub にリポジトリを作成

まず GitHub にリポジトリをプッシュします。

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your-name/my-blog.git
git push -u origin main

2. Cloudflare Pages の設定

1. Cloudflare Dashboard にログイン
2. Workers & Pages → Create application → Pages を選択
3. GitHub リポジトリを接続
4. ビルド設定を入力：
   • Framework preset: Next.js (Static HTML Export)
   • Build command: npm run build
   • Build output directory: out

3. デプロイ完了

設定を保存すると自動でビルドが走り、数分でデプロイ完了です。 以降は main ブランチへのプッシュで自動デプロイされます。

next.config.ts の設定

Cloudflare Pages (静的エクスポート) に対応するため、以下の設定が必要です。

const nextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

これだけで準備完了です！