Zenn
🚀

Next.js を Cloudflare Pages にデプロイする

に公開
Next.js
Cloudflare
Cloudflare Pages
tech

はじめに

Next.jsのデプロイ先にVercelを基本使ってきましたが、商用利用のサイトをデプロイする機会があり、無料で使えるCloudflare Pagesを使ってみました。
ドメインもCloudflareにて取得できて、完結できる感じがよかったです。

手順

準備

Next.js のプロジェクトを作成

Next.jsのプロジェクトを作成する。

npx create-next-app@latest

GitHubリポジトリにPushする。

@cloudflare/next-on-pages インストール

@cloudflare/next-on-pages をインストールする。

npm install -D @cloudflare/next-on-pages

Cloudflare Pagesにプロジェクト作成

Cloudflareの Workers&Pages で 作成 を押す。

アプリケーションを作成する の Pages タブで Gitに接続 を押す

該当のリポジトリを選択し セットアップの開始 を押す。

以下を設定

  • フレームワークプリセット: Next.js
  • ビルドコマンド: npx @cloudflare/next-on-pages@1 (デフォルトのはず)
  • ビルド出力ディレクトリ: .vercel/output/static (デフォルトのはず)
  • 環境変数 変数名: NODE_VERSION = 22

一度デプロイする。

エラーの解消

デプロイするとエラーになると思うので、
設定タブ > ランタイム の 互換性フラグ に nodejs_compat を設定する。

また、自分の場合は以下のエラーも出た。

sh: 1: vc: not found

以下インストールしてPushしたら解消した。

npm install -D vercel

カスタムドメインの設定

Cloudflareの ドメイン登録 > ドメインの登録 にてお好みのドメインを購入する。

Cloudflare Pagesの対象プロジェクトの カスタムドメイン タブで カスタムドメインを設定 を押す。
フォームに購入したドメインを入力して続行すれば、検証が始まり少し待つとドメインが設定される。
完了したら実際にアクセスしてみて表示されればOK！

さいごに

以前個人開発でHonoをCloudflare workersにデプロイしたりしたことはあったが、今回はCloudflare PagesにNext.jsをデプロイしてみた。
GitHub連携で自動デプロイされるし、ドメインもCloudflareで取れてとても手軽だった。

Discussion