Next.js 14をCloudflare Pagesにデプロイする手順
初めまして！初投稿です。
軽く自己紹介しておくと、ITとは無縁な製造業で働きながら自分の時間で主にReactを使ってプログラミングをしている27歳です。
普段は自身で制作したブログの方で、プログラミングの学びをアウトプットしています。
今回は僭越ながらZennにて記事を書かせていただきました！
この記事ではこの一ヶ月こつこつと個人開発していたNext.jsアプリをCloudflare Pagesにデプロイした時のハマりポイントを忘れぬよう備忘録として書きました！
はじめに
今回の記事は以下のような方を対象にしています。
- Cloudflare Pages にデプロイする方法を知りたい方
- Next.js 14 App Router で開発したアプリを Cloudflare Pages にデプロイしたい方
- Windows で Cloudflare Pages にデプロイする時に詰まった点を知りたい方
また、以下の技術については当記事では解説しませんので、あらかじめご了承ください。
- Next.js の基本的な使い方
- Windows で Linux 環境を構築する手順 (当記事では WSL(Ubuntu) を使っています)
当記事では Windows での手順を紹介しています。
Mac での注意点などについては分かりかねますが、当記事で解説する内容は Mac ユーザーもほとんど同じなので、そこまで大きくは変わらないと思います。
環境構築
まず、Next.js のプロジェクトを作成するところから始めます。
通常は npx create-next-app@latest コマンドを使ってプロジェクトを作成しますが、今回は Cloudflare が公開している Next.js を Cloudflare Pages にデプロイするためのテンプレートを使ってプロジェクトを作成します。
npm create cloudflare@latest -- my-next-app --framework=next
実行すると create-next-app 実行時と同じように TypeScript 等の使用の有無を聞かれるので、それに答えていきます。
その後、next-on-pages用のESLintプラグインをインストールするか聞かれるので、インストールします。
├ Do you want to use the next-on-pages eslint-plugin?
│ yes
これで Cloudflare Pages に最適化された Next.js プロジェクトのセットアップがあっという間に完成します。とても簡単ですね🥰
my-next-app
├─ node_modules
├─ public
├─ src
├─ .eslintrc.json
├─ .gitignore
├─ env.d.ts
├─ next-env.d.ts
├─ next.config.mjs
├─ package-lock.json
├─ package.json
├─ postcss.config.mjs
├─ README.md
├─ tailwind.config.ts
├─ tsconfig.json
└─ wrangler.toml
こちらのパッケージでインストールすると Next.js のバージョンは 14.2.5 となっています。
これより新しいバージョンの Next.js を使いたい場合は、
npm install --save-dev @cloudflare/next-on-pages
を実行してパッケージをインストールしてください。
ですが、Cloudflare Pages 上で、どのバージョンの Next.js まで動作するかは不明な部分があるので、確実に動作させたい場合は、フルパッケージをインストールした方が無難でしょう。(ただでさえデプロイは面倒くさいので)
なので、当記事でもフルパッケージをインストールした前提で解説していきます。
また、後述しますが、Windows の PowerShell 環境ではビルドできないので、Linux 環境を構築する必要があります。
後から面倒なことになりたくない方は、この段階で Linux 環境で開発を始めるのがおすすめです。
Node.js のバージョンは v18.17.0 以上 にしてください。
私は、ビルド以外の時は PowerShell から dev モードを立ち上げて開発をしています。
開発中
アプリ開発中は殆ど変更点はありません。
next dev コマンドを実行して開発を進めていきます。
ただし、いくつか注意点があります。
まず、全ての page.tsx や route.tsx に
export const runtime = 'edge';
を追加してください。
これは、Cloudflare Pages が Edge ランタイムを使用するために必要なコードです。
先にこれを書いておけば、edgeランタイムでは動かない実装は開発段階で気づけるので、デプロイ時にエラーが出るのを防ぐことができます。
あとは、コンポーネント作成ごとに
npm run lint
で next-on-pages 用の ESLint を実行して、エラーが出ないか確認すればだいたいOKです。
あと、デプロイするときには GitHub のリポジトリが必要なので、GitHub にリポジトリを作成しておきましょう。
デプロイ
さて、いよいよビルドデプロイです。
ここで私はいくつかのハマりポイントがあったので、それを書いていきます。
Windows でデプロイする時の注意点
next-on-pages をビルドデプロイする時は、PowerShell では実行できません。
これは Cloudflare の公式ドキュメントでも記載されていて、
「PowerShell環境では確実に動作しないことが分かっている」とまで書かれています。
なので、Windows でデプロイする時は Linux 環境で実行しましょう。
私の場合は WSL(Ubuntu) を使っているので、そちらで実行しました。
Linux で実行する場合は、一から Node.js をインストールする必要があるので、その手順を書いていきます。
このあたりは記事の本質ではないので簡単に解説します。
Windows環境でWSLからNode.jsをインストールする方法
Node.js のバージョンは v18.17.0 未満である場合、ビルドしようとするとエラーが出ます。
なので、Node.js のバージョンを v18.17.0 以上にしてください。
まずは WSL に nvm をインストールします。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
次に nvm を有効化します。
ターミナルで以下のコマンドを実行してください。
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
このコマンドは WSL を再起動すると消えてしまうので、.bashrc や .zshrc に追記しておくと便利です。
echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
これで nvm の設定は完了です。
指定の Node.js のバージョンをインストールします。
公式ドキュメントでは v18.17.0 以上と書かれているので、最新バージョンでも大丈夫かもしれないですが、念の為 v18.17.0 をインストールしました。
nvm install 18.17.0
nvm use 18.17.0
ビルドコマンド実行
これでようやくビルドする準備が整いました。
以下のコマンドを実行しましょう。
npm run pages:build
上記のコマンドは、フルパッケージをインストールしていれば package.json に記載されているので、それを実行するだけです。
もしフルパッケージをインストールしていない場合は、npx @cloudflare/next-on-pages を実行してください。
プロジェクトに問題がなければ、以下のようなログが出力され、ビルドが成功するはずです。(以下のログは私が個人開発しているアプリをビルドした時のログです)
⚡️ Completed `npx vercel build`.
⚡️ Build Summary (@cloudflare/next-on-pages v1.13.5)
⚡️
⚡️ Edge Function Routes (5)
⚡️ ┌ /
⚡️ ├ /_not-found
⚡️ ├ /api/generateAlt
⚡️ ├ /privacy
⚡️ └ /terms
⚡️
⚡️ Prerendered Routes (2)
⚡️ ┌ /favicon.ico
⚡️ └ /opengraph-image.png
⚡️
⚡️ Other Static Assets (431)
⚡️ ┌ /_app.rsc.json
⚡️ ├ /_document.rsc.json
⚡️ ├ /_error.rsc.json
⚡️ ├ /500.html
⚡️ └ ... 427 more
⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
⚡️ Build completed in 5.97s
デプロイ
ビルドが成功したので、Cloudflare Pages にデプロイしていきましょう。
Cloudflare にユーザー登録してない場合は、ユーザー登録しておいてください。
ユーザー登録が済んでいる場合は、以下のコマンドを実行してください。
npm run deploy
もしくは、以下のコマンドでもデプロイできます。
npm run wrangler pages deploy
上手くいけば、Cloudflare に登録しているアカウントと連携するかどうかの確認が入るので、連携してください。
その後、デプロイが開始され、デプロイが完了すると以下のようなログが出力されます。
✨ Success! Uploaded 434 files (3.60 sec)
✨ Uploading _headers
Attaching additional modules:
┌─────────────────────────────────────────────────────────────────────┬──────┬─────────────┐
│ Name │ Type │ Size │
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ __next-on-pages-dist__/cache/adaptor.js │ esm │ 2.29 KiB │
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ __next-on-pages-dist__/cache/cache-api.js │ esm │ 0.43 KiB │
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ __next-on-pages-dist__/cache/kv.js │ esm │ 0.35 KiB │
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ __next-on-pages-dist__/functions/_not-found.func.js │ esm │ 23.25 KiB │
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ ...
├─────────────────────────────────────────────────────────────────────┼──────┼─────────────┤
│ Total (12 modules) │ │ 1684.02 KiB │
└─────────────────────────────────────────────────────────────────────┴──────┴─────────────┘
✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
🌎 Deploying...
✨ Deployment complete! Take a peek over at ~~~~~~~~~~~~~
これでデプロイが完了です。✨️
あとは、.envなどの環境変数を使っている場合は、Cloudflare のダッシュボードから環境変数を設定してください。
① ダッシュボードからデプロイしたプロジェクトを選択
② 「設定」タブを選択後、「変数とシークレット」の「追加」から環境変数を設定してください。
NEXT_PUBLIC_BASE_URL などでホームURLを設定している場合は、プロジェクトが既にデプロイされているので、そちらのURLに変更すればOKです。
これまでの手順は公式ドキュメントにも書かれているので、詳しくは公式ドキュメントをご参照ください！(ドキュメント読む人はこの記事読まないかもしれませんが)
個人的にハマったポイント
最初は、Cloudflare のダッシュボードからGithubのリポジトリをデプロイしようとしていたのですが、どうもうまくいかなかったので、wrangler コマンドを使ってデプロイするようにしました。
CLIでデプロイしたら特に問題なくデプロイできたので、今後もCLIでデプロイするようにします。
後は、Windows 環境ではビルドできないという点もドキュメントに記載されていることですが、気づかなかったので、Windows をお使いの方は注意してください。
おわりに
今回はCloudflare Pages に Next.js 14 App Router をデプロイする方法を紹介しました。
Cloudflare Pages はVercel と違い、無料プランでも商用利用可能なので、広告収入などを得たい場合は Cloudflare Pages を使うのがおすすめです。
流石に Next.js の親である Vercel と比べると、少しデプロイが面倒ですが、慣れればVercel と同じくらい気軽にデプロイできるので、非常にオススメです！
それでは、お疲れ様でした🔥
もしよければNext.jsで作成したブログの方も覗いていただけると嬉しいです。
Discussion
とても丁寧で実践的な記事ですね！Cloudflare Pagesへのデプロイ手順が具体的に説明されているので、これから挑戦する方には参考になると思います。
Windows環境での注意点や、
runtime: 'edge'の指定が必要な点など、実際に経験したハマりポイントを共有しているところが素晴らしいです。この記事を読めば、Cloudflare Pagesを使ったデプロイに関する多くの課題が事前に解決できそうです！ありがとうございます。