CloudflareでNext.jsを試す。

個人開発のサイトのDBをD1にし始めたので、Next.jsのデプロイ環境をCloudflareにしてみる。

今回の個人開発はローカルに情報を貯めたSQLiteからサイトを作るので、SSGでやってみる。

create-next-appから、SSGのサンプルアプリをローカルに作る。

$ npx create-next-app --example with-static-export my-app

githubリポジトリを作成してpushしていおく。

git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>
git branch -M main
git push -u origin main

Cloudflareのダッシュボードへログインする。
サイドバーのWorkers & Pages/概要をクリック。
下記の画面が表示されるので、「アプリケーションの作成」をクリック。

タブからPagesを選択して、Githubと接続をクリック

Githubと接続し、さっき作成したリポジトリと連携する。

ビルドの設定で、Next.js(Static HTML Export)を選択。
(ビルドコマンドなどは自動入力される。変えている場合は変更しておく)

ビルドが開始するので、暫く待つとビルドが成功する。

表示されるURLをクリックすると、ビルドされたページに飛ぶ。