Cloudflare Pages へのデプロイ

Nextra 3 サイトを Cloudflare Pages にデプロイしましょう。特にmacOSでの開発時にはいくつかの注意点があります。

1. プロジェクト設定

静的エクスポート

next.config.js で静的エクスポートが有効になっていることを確認してください。

module.exports = withNextra({
  output: 'export', // 静的サイト生成に必須
  images: {
    unoptimized: true, // Next.js Image最適化を無効化（静的エクスポート用）
  },
})

2. GitHubへのプッシュ

コードをリポジトリにプッシュします。

git add .
git commit -m "Ready for deployment"
git push origin main

3. Cloudflare Pages の設定

1. Cloudflare Dashboard にログイン。
2. Workers & Pages > アプリケーションを作成 > Pages > Gitに接続 へ進みます。
3. リポジトリを選択します。

ビルド設定（重要）

• フレームワーク プリセット: Next.js (Static HTML Export) を選択。
• ビルド出力ディレクトリ: out（自動設定）。

⚠️ 重要な設定変更

1. ビルドコマンド: デフォルトの npx next build から以下に変更してください：

   npm install && npm run build

   理由: クロスプラットフォーム（Mac vs Linux）の依存関係エラーを防ぐため、毎回クリーンにインストールさせます。

2. ルートディレクトリ:

   • Nextraアプリがサブフォルダにある場合（例: cloudflarepages-nextra/my-nextra3）、そのパスを指定します。

4. デプロイ

「保存してデプロイ」をクリックすれば完了です！