🚀
pnpmでNext.js App RouterなプロジェクトをCloudflare Pagesにdeployする
はじめに
pnpmなNext.jsプロジェクトをCloudflare Pagesでそのままdeployしようとしていたとき、普通にpnpmのエラーが出てbuildできずに終わり進めなくなってお亡くなりしたのでその時の備忘録。
元々はpnpm-lock.yamlを消して対応してたけど、それだとあんま良くないよね〜と思って試行錯誤したらいけたので皆さんに共有。幸あれ。
Edge Runtimeの設定
RuntimeをEdge Runtimeにしないといけませんので、page.tsxにこれを追記しましょう。
詳しくはNext.jsのページを参照してね。
app/page.tsx
export const runtime = "edge";
Cloudflare Pagesの設定
ビルド設定
まずはビルド設定から。以下のような設定にしましょう。
フレームワーク プリセット: None
ビルド コマンド
npm i -g pnpm && pnpm install --no-frozen-lockfile && pnpx @cloudflare/next-on-pages --experimental-minify
ビルド出力ディレクトリ
/.vercel/output/static
環境変数
NODE_VERSION = 16
互換性フラグの設定
次に、互換性フラグの設定をしましょう。
[設定→Functions→互換性フラグ→プロダクションの互換性フラグを構成する]からnodejs_compatを追加しましょう。
（追記 2023/07/19）
GitHubなどにて管理している場合、勝手にcloudflare-pagesのbotがPull requestsのPreviewを作ってくれる機能があります。それを使用する場合は[プレビューの互換性フラグ]にもnodejs_compatを追加してください。
deployする
幸せパラダイス
さいごに
そろそろCloudflare Pagesもpnpmをいい感じに対応してくれればいいんですけどね。
Discussion