最小構成のNext.jsサイトをCloudflare Pagesにデプロイして、独自ドメインを設定するまでの手順を解説します。
Next.jsは開発元であるVercel(旧Zeit)にデプロイすることが推奨されていますが、今回は普段の個人開発でよく利用しているCloudFlare Pagesをデプロイ先に選択しました。
下記は構築したNext.jsサイトをGithubのPrivateリポジトリにPushしたあとの手順です。
Cloudflare Pagesにプロジェクトを追加
まずはCloudflareのダッシュボードから新規プロジェクトを作成し、GithubのPrivateリポジトリと連携させます。
ダッシュボード左側の「Compute(Workers)」を選択して、「Workers&Pages」画面を開きます。※CloudFlareは頻繁に機能拡張を行っているので、項目の名称が変更されている場合があります。似た項目を見つけてください
「Create」ボタンを押してください。
「Create an application」画面になったら、「Pages」タブに切り替えて、Connect to Gitボタンを押します。
GithubかGitLabのリポジトリとの連携画面が表示されます。
Add accountからGithubアカウントを連携させると、Select a repositoryにリポジトリのリストが表示されます
プライベートリポジトリのアクセス許可
アカウント連携をしても、リストにリポジトリが表示されない場合は、GithubプロフィールのSettingsからApplicationsを選択して、CloudFlareに対してアクセスを許可する必要があります。
Cloudflareと連携していると、Installed Github Appsに「Cloudflare Workers and Pages」が表示されているはずなのでクリックしてください。
ここでRepository Accessを「Only select repositories」に設定します。そもそも前段階でリストに全リポジトリが表示された場合は、ここが「All repositories」になっているはずです。CloudFlareなら大丈夫だとは思いますが、リストに不要なリポジトリまで表示されてしまう+セキュリティの観点からも必要なリポジトリにだけ選択するのをオススメします。
この状態でCloudflareの画面に戻ると、リストにリポジトリが表示されているはずです。選択して「Begin Setup」を押しましょう。
ビルド設定 & Node.js バージョン注意点
今回は2025年1月末時点のNext.js version15.1.6をインストールして、ほぼそのままの状態でCloudflareにデプロイしてみます。
まずはBuild SettingsのPresetから「Next.js」を選択します。
Build CommandとBuild output directoryに自動的に設定が入力されます。output directoryは.vercelとなっていますが、とりあえずデプロイするうえでは特に問題ではありません。
Node.jsバージョンエラー
BeginSetupを実行するとビルドエラーが発生します。
これはCloudflareが使っているNode.jsバージョン(18.17.1)が、Next.js の要件を満たしていないのが原因です。
You are using Node.js 18.17.1.
For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.
最も簡単な対応策は、CloudflareプロジェクトのSettingsの「Variables and Secrets」でNODE_VERSIONを指定することです。
Cloudflare Pages の「Compatibility Flags」を設定する
これでビルド自体は完了しますが、サイトにアクセスすると下記のように「Node.JS Compatibility Error」なっているはずです。
Cloudflare Pages + @cloudflare/next-on-pagesの組み合わせでNext.jsアプリを動作させる場合は、Node.js互換モードを有効化する必要があります。
CloudflareプロジェクトのSettingsのRuntime項目にあるCompatibility flagsに「nodejs_compat」と入力してください。これでサイトが表示されます。
独自ドメインの設定
最後に、独自ドメインをCloudflare Pagesに 割り当てます。以下の手順が基本です。
- Cloudflare Pages → 対象プロジェクト → 「Settings」 → 「Custom domains」
- 「Set up a custom domain」で、取得済みドメイン(例:
example.com)を入力 - 画面の案内に従い、お名前ドットコムなどレジストラのネームサーバーをCloudflare指定のNSに変更
例:clint.ns.cloudflare.com,paris.ns.cloudflare.com - 数時間〜1日かけてネームサーバーの変更が反映される
- ドメインがCloudflare管理下に入ると、Pagesと自動連携され、
https://example.comでアクセス可能になる
今回は「お名前ドットコム」で契約したドメインをCloudflareに紐づけていきます。
カスタムドメインの追加
CloudflareプロジェクトのCustom Domainsページから「Set up a custom domain」をクリックする。
Add a custom domainに契約したドメイン (例: example.com)を入力してContinue。
Transfer DNS management画面になるので「Begin DNS Transfer」をクリック。
下記の画面で再度ドメインを入力し、Quick scan for DNS recordsを選択してContinue。これでCloudflareが対象ドメインの状態を検査してくれます。
価格ページが表示されたら、画面下部の「Free Plan」を選択して次へ。
調査結果は状態によって異なると思いますが、このように「Records we found: 0」などという結果になったとしても、気にせず次へ進んでください。
ポップアップが表示されますが、Confirmを選択して次へ進みます。
ここでCloudflareのネームサーバーが２つ表示されるはずです。これをお名前ドッ トコムのドメイン側に設定します。
お名前ドットコムのドメイン管理画面に移動して、ネームサーバーをCloudflareのものに書き換えます。
ネームサーバーの更新には多少の時間がかかるので、のんびり待ちましょう。
更新が完了したらCloudflareがそれを検知してメールを送ってくれるはずです。
改めてCloudflareプロジェクトのカスタムドメインに連携させたドメインを設定する。
ネームサーバーの更新が完了すると、ドメイン画面は下記のようになるはずです。今回はお名前ドットコムのネームサーバーを書き換えて5分ほどで反映されました。
再度プロジェクト画面のCustom Domainsページに戻り、今回追加したドメインを入力します。
前回とは異なり、Cloudflareがドメインを認識しているため、Confirm new DNS recordという画面が表示されるはずです。Activate domainを押しましょう。
しばらく認証中の状態になったあと、「Activate」表示に変わったら、カスタムドメインでサイトにアクセスできるようになります。
まとめ
以上が、「Next.jsをCloudflare Pagesにデプロイ→独自ドメイン運用」までの流れです。
簡単に振り返ると、
- GitHubにNext.jsプロジェクトをpush
- Cloudflare Pagesでリポジトリと連携
- プライベートリポジトリならアクセス許可を追加
- 必要に応じてNode.jsバージョンや
nodejs_compatを設定 - カスタムドメインを設定し、お名前ドットコムでネームサーバーをCloudflareへ切り替え
これで、◯◯◯.pages.devではなく、https://example.comといった独自ドメインでサイトが動くようになります。ビルドエラーやDNS設定の反映タイミングに気をつければ、初心者でも比較的簡単に運 用を開始できるはずです。ぜひ試してみてください！
また、今回の手順は「とりあえずサイトをデプロイしてみる」ものなので、サイト内容によってはビルド設定等で細かい調整が必要になることがあるので、いろいろ調べてみてください。