cloudflare wanglerでnext.jsのstatic buildをデプロイする手順

next.js側で静的ビルドする

output: 'export'

ここで、ビルド完了後に、/outディレクトリが作成される。

npx wrangler pages project create

wanglerを実行し、プロジェクトを作成する

ブラウザが自動起動するので、ログインが成功すると以下のコンソールが出る。
プロジェクト名が聞かれるので、入力。
ブランチを選択しEnter。

Successfully logged in.
✔ Enter the name of your new project: … <project名を入力>
✔ Enter the production branch name: … main

ディレクトリを指定し、デプロイする。
ここでは、nextjsの基本エクスポート先であるoutディレクトリを指定する。

$ npx wrangler pages deploy out

▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes

  To silence this warning, pass in --commit-dirty=true


✨ Success! Uploaded 52 files (14.44 sec)

🌎 Deploying...
✨ Deployment complete! Take a peek over at https://your-site.pages.dev

これでOKです。
ビルドに時間がかかって仕方ない静的サイトはローカルでビルドしてからデプロイするのもいいかもしれませんね。