Next.jsをCloudflare Pagesに静的デプロイしたいんだけど、面倒だから全部やってくれ

Next.jsで作ったサイトをCloudflare Pagesに置くのって、最初の設定がちょい面倒だよね。特に静的エクスポート（output: 'export'）を使う場合、普通のデプロイとちょっと勝手が違う。

でも大丈夫。Claude Codeに雑に投げるだけで、ビルドからCloudflare Pagesへのデプロイ、おまけにsitemapや検索インデックス生成まで自動でやってくれるスクリプトを作れるんだ。

結論ファーストで、まず「こう投げろ」ってプロンプトを見せるよ。

一番雑な投げ方

Next.jsのプロジェクトがあるよ。
output:'export'で静的書き出しするように設定して、Cloudflare Pagesにデプロイするためのnpmスクリプトと、prebuildでサイトマップと検索インデックスを生成するスクリプトも全部作って。

これだけで動く。Claude Codeは、必要な設定変更から新しいnpmスクリプトの追加まで、よしなに提案してくれるはずだよ。

もうちょい具体的に投げるパターン

もう少し具体的な指示を混ぜると、ピンポイントで欲しいものが出てくるよ。

1. `next.config.js`と`package.json`をまとめて更新させたい時

next.config.jsにoutput: 'export'を追加して、package.jsonのscriptsにビルドとデプロイコマンドを組み込んだdeployコマンドを追加してって指示だよ。

Next.jsプロジェクトのnext.config.jsに output:'export' を追加して。
それからpackage.jsonのscriptsに、`npm run build`と`wrangler pages deploy out --project-name [自分のプロジェクト名]`を順番に実行する`deploy`コマンドを追加してほしい。

[自分のプロジェクト名]は、Cloudflare Pagesで設定したプロジェクト名に置き換えてね。

2. prebuildでサイトマップと検索インデックスも作りたい時

静的サイトだと、sitemapとか検索インデックスもビルド時に作っておきたいよね。そういう場合は、prebuildという名前のnpmスクリプトを作らせて、そこに生成コマンドを仕込ませるのがおすすめだよ。

Next.jsプロジェクトのpackage.jsonを更新して。
scriptsに`prebuild`というコマンドを追加して、そこで`node scripts/generate-sitemap.mjs`と`node scripts/generate-search-index.mjs`を実行するようにしてほしい。
それから、`build`コマンドは`npm run prebuild && next build`になるように変更して。

このプロンプトでは、scripts/generate-sitemap.mjsとscripts/generate-search-index.mjsという仮のスクリプトを指定してるけど、もし具体的なスクリプト名が決まってるならそれに変えてもいいし、「これらのスクリプトも新しく作って」って追加で頼んでもいいよ。

実践例 / 実録

俺たちの『IVYXON Claude Code Tips』サイトも、まさにこの方法でCloudflare Pagesにデプロイしてるんだ。投げたらこんな感じのコードが出てくるよ。

まず、next.config.jsはこうだね。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // これが大事！
  // 他の設定は省略
};

module.exports = nextConfig;

そして、package.jsonのscriptsはこんな感じ。

{
  "name": "claude-code-tips",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "prebuild": "node scripts/build-search-index.mjs && node scripts/build-sitemap.mjs",
    "build": "npm run prebuild && next build",
    "start": "next start",
    "lint": "next lint",
    "deploy": "npm run build && wrangler pages deploy out --project-name claude-code-tips"
  },
  "dependencies": {
    // 省略
  }
}

ポイントは、prebuildスクリプトでサイトマップと検索インデックスを生成して、buildスクリプトがそのprebuildを先に実行してからnext buildを走らせるようにしてることだね。

これで、npm run deployを叩けば、

scripts/build-search-index.mjsで検索インデックスを生成
scripts/build-sitemap.mjsでサイトマップを生成
next buildで静的サイトをビルド（outディレクトリに書き出し）
wrangler pages deploy out --project-name claude-code-tipsでCloudflare Pagesにデプロイ

っていう一連の流れが全部自動で動くようになる。

「投げたらこうなった」の実況だけど、まさにこのpackage.jsonとnext.config.jsの組み合わせをClaude Codeに「Cloudflare Pagesに静的サイトとしてデプロイしたいから、この機能とあの機能を追加してほしい」って伝えたら、こういう具体的なスクリプトを提案してくれたんだ。あとはコピペして、wranglerをインストールして初期設定（wrangler loginとか）しておけばOKだよ。

npx wrangler login

これを一度やっておけば、あとはコマンドを叩くだけでデプロイできるようになるから、忘れずに先に済ませておこう。

Next.jsをCloudflare Pagesに静的デプロイしたいんだけど、面倒だから全部やってくれ

一番雑な投げ方

もうちょい具体的に投げるパターン

1. `next.config.js`と`package.json`をまとめて更新させたい時

2. prebuildでサイトマップと検索インデックスも作りたい時

実践例 / 実録

つまずきポイント

1. `output: 'export'`の制限を知っとけ

2. `wrangler`の認証は最初にやっとけ