何の記事？
Next.jsで作った静的サイトをcloudflare pageでデプロイする記事。
公式の説明は以下
開発環境の構築
まずはNext.jsの開発環境を整えます。Node.jsをインストールし、npxコマンドが実行できるようにします。
やり方は色々あるので、個々人の好きな方法を使ってください。私はwindows使いなので、wingetで入れました。macの人はhomebrewだと思います。
npx -v
が通れば一旦OK。私の環境では 10.2.4です。
2. プロジェクトの作成
公式ドキュメントに従って、Next.jsのプロジェクトを作成します。今回はNext.js: 14.0.4です。
基本的には以下を実行して、指示に従って選択すればOK。わからなければ全部Yesで良いと思います。
npx create-next-app@latest
cloudflare pages用の設定
このままではcloudflare pagesで実行したときに動かないので、next.config.jsに変更を加えます。
以下のようにstatic exportの設定をします。
/** @type {import('next').NextConfig} */
const nextConfig = {
output: `export`
}
module.exports = nextConfig
これでcloudflare pagesにデプロイした際に、buildでコケません(これがないとbuildでコケます)。
GitHubの設定
cloudflare PagesはGithubと連携させる事で、自動でデプロイさせることが出来ます。
Githubにログインして、新しいrepositoryを作ります。privateで大丈夫です。
作成したら、画面に出てる指示に従って、咲くほど作成したnext.jsプロジェクトをgithubにpushします。
cloudflare pagesの設定
さて、次はcloudflare pagesでの設定です。
cloudflare pagesに移動すると、以下のような画面が出てくるかと思います。
ここで、Connect to Gitを選択するとGitHubと連携出来ます。とりあえず、先ほど作ったレポジトリだけ選べばよいと思います。
その次がこのような画面になるので、先ほど作成したrepositoryを選択します。自分は2つありますが、気にしないでください。
そして選択後に begin setupで設定をしていきます。
以下のような画面が開いたかと思います。ここで具体的な設定をしていきます。
branchは恐らくmainでしょう。もし違う設定をしていれば変えてください。基本的に、このブランチにpushすると、自動でデプロイが走ります。
Framework presetでNext.js(static HTML Export)を選択します。
すると、下のフォームは自動で埋まります。
で、画面下部の「Save & Deploy」をぽちっとすれば、デプロイが走って、ローンチされます。
やったね！