✅ 今日の振り返り

Cloudflare Pagesデプロイ設定

• やったこと
  • Cloudflare Pages に Next.js（App Router）のブログをデプロイしようとする
  • ビルドコマンド: npm run build、出力ディレクトリ: /out に設定
• つまづきポイント
  • "/out" の / が自動で入るため不安に → Cloudflareの仕様でOKと判明
  • npm run build && npm run export が export スクリプトなしで失敗

---

🔧 調査・修正

• やったこと

  • package.json に "export": "next export" を追加

  • next.config.ts に以下を設定：

    const nextConfig = {
      output: "export",
      distDir: "../out",
      compiler: { styledComponents: true },
    }
    

• 気づき

  • distDir: "../out" だと Cloudflare が認識しない可能性がある（Cloudflareは /out を期待）

---

⚠️ エラー再発 → ビルド成功しない

• エラー内容
  • next build は成功するが、next export でエラー
  • Cloudflareログで Missing script: export → スクリプト追加で解消

---

🟢 決定打：wrangler.toml の導入

• やったこと
  • wrangler.toml をプロジェクトルートに追加
  • site.outDir = "./out" を設定し、Cloudflareに出力ディレクトリを明示
• 結果
  • Cloudflare が正しく out ディレクトリを認識
  • デプロイ成功！

---

🎉 学び・気づきまとめ

学び	内容
✅ next export 必須	Static Exportを使うには next.config.ts + npm run export が必要
✅ Cloudflare Pages の仕様	/out ディレクトリを前提としている
✅ エラーログは宝	ログを見ればほとんどのヒントが書いてある
✅ 粘り強さが命	知識だけでなく、やり切る力が今日の勝因！

---

🔚 今日のまとめ

今日は Cloudflare × Next.js の壁を超えた日。
エラー地獄を一つずつ突破して、ついに本番デプロイ成功！