cloudflare pagesにNext.js製の静的サイトをデプロイする #Next.js

何の記事？

Next.jsで作った静的サイトをcloudflare pageでデプロイする記事。
公式の説明は以下

まずはNext.jsの開発環境を整えます。Node.jsをインストールし、npxコマンドが実行できるようにします。
やり方は色々あるので、個々人の好きな方法を使ってください。私はwindows使いなので、wingetで入れました。macの人はhomebrewだと思います。

npx -v

が通れば一旦OK。私の環境では 10.2.4です。

公式ドキュメントに従って、Next.jsのプロジェクトを作成します。今回はNext.js: 14.0.4です。

基本的には以下を実行して、指示に従って選択すればOK。わからなければ全部Yesで良いと思います。

npx create-next-app@latest

このままではcloudflare pagesで実行したときに動かないので、next.config.jsに変更を加えます。

以下のようにstatic exportの設定をします。

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: `export`
}

module.exports = nextConfig

これでcloudflare pagesにデプロイした際に、buildでコケません(これがないとbuildでコケます)。

cloudflare PagesはGithubと連携させる事で、自動でデプロイさせることが出来ます。
Githubにログインして、新しいrepositoryを作ります。privateで大丈夫です。

作成したら、画面に出てる指示に従って、咲くほど作成したnext.jsプロジェクトをgithubにpushします。

さて、次はcloudflare pagesでの設定です。
cloudflare pagesに移動すると、以下のような画面が出てくるかと思います。

ここで、Connect to Gitを選択するとGitHubと連携出来ます。とりあえず、先ほど作ったレポジトリだけ選べばよいと思います。

その次がこのような画面になるので、先ほど作成したrepositoryを選択します。自分は2つありますが、気にしないでください。

そして選択後に begin setupで設定をしていきます。

以下のような画面が開いたかと思います。ここで具体的な設定をしていきます。

branchは恐らくmainでしょう。もし違う設定をしていれば変えてください。基本的に、このブランチにpushすると、自動でデプロイが走ります。

Framework presetでNext.js(static HTML Export)を選択します。
すると、下のフォームは自動で埋まります。

で、画面下部の「Save & Deploy」をぽちっとすれば、デプロイが走って、ローンチされます。

やったね！