🚀

Next.js SSR を Cloudflare Pages で公開する手順

2024/02/18に公開

🎯ゴール

Next.jsで作成されたプロジェクトを Cloudflare Pages のインフラ構成で公開する

💡前提

🏃手順

1. next-on-pages をインストールする

Next.js のプロジェクトに next-on-pages をインストールします。

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

2. Cloudflare Pages に登録する

https://pages.cloudflare.com/

3. デプロイする

フィールド名 入力値
フレームワークプリセット Next.js
ビルドコマンド npx @cloudflare/next-on-pages --experimental-minify
ビルド出力ディレクトリ .vercel/output/static

ここでデプロイすると、エラーになるので以下の設定をします。

再度デプロイするとビルドされ、デプロイされます。

4. 独自ドメインでアクセスする

独自ドメインでアクセスできるようにするには、ドメインを購入し、Cloudflare に設定します。この記事では AWS Route 53 で購入したドメインを設定する方法をまとめます。

購入方法は下記が参考になります。
https://zenn.dev/taiyou/articles/6dc3b1b6d7ebc9

WIP

https://zenn.dev/a24k/articles/20220527-cloudflare-dns

https://footprints.link/articles/ja/n-machida/web-application-architecture-using-heroku-and-cloudflare-and-own-domain-and-route53

🔗APPENDIX

https://zenn.dev/microcms/articles/1b4331eca6e512

https://dev.classmethod.jp/articles/cloudflare-pages-support-nextjs-edge-runtime/

https://zenn.dev/laiso/articles/c086dd115f5d4e

Discussion