2024/3/24 Cloudflare Pagesの設定諸々①: Next.jsのSSR(Server Side Rendering)を利用する

本記事は、Cloudflare PagesでNext.jsのSSR(Server Side Rendering)を利用する改修した際のメモです。

きっかけ

このサイトでは、以前までSSG(Static Site Generation)を利用していました。その際、本来SSRで生成されるであろうページは事前にgenerateStaticParamsを活用していました。

ブログページ作成の記事

このままでも記事更新はそれなりに出来るのですが、更新の度に再デプロイしなきゃいけないのはなんだかなあという感じです。 そこで、SSRを有効活用してみます。

※本記事時点ではNext.jsのプロジェクト内に種となるファイルを配置しているが、最終的には外部に置く予定。

ざっくり前提

• 必要なファイルは全部public配下にぶち込む

1. next-on-pagesの導入

yarn add @cloudflare/next-on-pages

2. next.config.jsを編集

const nextConfig = {
　　 // output: `export`は不要になるので削除
    output: `export`,
    images: { unoptimized: true }
}

3. 記事詳細ページを修正

無いページに対してのアクセスが発生するようになるのでエラーハンドリングはしておく。

// src/app/blog/[blogid]/page.tsx
import { notFound } from 'next/navigation'
//　~~~中略~~~
// ランタイム指定
export const runtime = 'edge'

export default async function BlogPage({ params }: { params: { blogid: string } }) {
    // ランタイム変更の影響でパスの指定方法が変わるので、本番環境のものを指定
    // 環境変数で指定がbetterな感触もする
    const path = "https://huriko-poral.pages.dev/" + "blog_md/" + params.blogid + ".md"
    try {
        data = await fetch(path)
            .then((f => f.blob()))
            .then(blob => blob.text())
        return (
            <>
                <article className="prose flex-1">
                    <ReactMarkdown>{data}</ReactMarkdown>
                </article>
            </>
        )
    } catch (e: unknown) {
        if (e instanceof Error) {
            console.error(e.message)
        }
        return notFound()
    }

4. デプロイする

コードは弄れたのでデプロイ…するとコケます。

ので以下設定を変更。

ビルドコマンド: npx @cloudflare/next-on-pages --experimental-minify

ビルド出力ディレクトリ: .vercel/output/static

また、環境変数にnodejs_compatを指定します。

これで再度デプロイ実行すれば成功するはずです。

おわりに

デメリットはNode.js依存の実装が使えなくなることですかね。(今回の場合fsだけど、そもそも外部化するなら微妙な実装だったかも)

これからブログ用データの外部配置化していきます。