next.js blog starterをCloudflare pagesを使って公開する

はじめに

• Next.jsのBlog-Starter-Kitを使用して静的なブログサイトを作成します。
• gitとNode.jsは導入済み、適当なリポジトリ(privateでもpublicでもどっちでもOK)は作成済みという体で進めます。
• ただの備忘録です。
• なんでわざわざcloudflare pagesに？←なんとなく楽だと思ったからです。あとドメインをcloudflareで買ってるから。

導入

適当な場所にプロジェクトを作成します。

npx create-next-app --example blog-starter <作成したいプロジェクト名>

パッケージのインストールがある場合yesでインストールしてください。

cloudflare pagesで動かすため静的エクスポートする必要があるため作成されたフォルダの中にnext.config.mjsというファイルを作成し、ファイルの中を編集します。

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",
    images:{unoptimized:true},
};
export default nextConfig;

あとは各自好きな方法で作成したリポジトリに入れてください。

pagesで公開しよう

cloudflareのコンピューティングとAIからWorkers&Pagesを選択。

アプリケーションを作成する→Pages→既存のgitリポジトリをインポートする→作成したリポジトリを選択し、フレームワークプリセットをNext.js(Static HTML Export)に設定しデプロイします。

デプロイが完了したら設定を開き、互換性フラグ からnodejs_compat_populate_process_envを選択して保存。

再度デプロイするとちゃんと公開されます。

おわりに

記事の作成やテーマの変更などについては別の方の記事をご覧になってください。
基本マークダウン形式なので覚えれば簡単だと思います。
僕はpagesの導入で画像が表示されなかったりアプリケーションのビルドでエラーが発生したりで2時間かかりました。つらい

参考にしたサイト(ほぼ引用)

Next.jsを使って静的なブログサイトを作成する(1)