はじめに

Next.jsとClerkを使用したアプリをCloudflare Pagesにデプロイした際に発生したエラーについてまとめます。

こちらは前回の記事の続きになります。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

現象

前回の対応でSSRのディレクトリにEdge Runtimeを設定しました。

export const runtime = "edge";

するとビルド時に以下のエラーが発生しました。
今回は認証に Clerk を使用していますが、その内部で path が参照されてしまい失敗しています。

Failed to compile.
▲  ./node_modules/@clerk/nextjs/dist/esm/server/keyless-telemetry.js:2:1
▲  Module not found: Can't resolve 'path'
▲  1 | import "../chunk-BUSYA2B4.js";
▲  > 2 | import { dirname, join } from "path";
▲    | ^
▲  3 | import { canUseKeyless } from "../utils/feature-flags";
▲  4 | import { createClerkClientWithOptions } from "./createClerkClient";
▲  5 | import { nodeFsOrThrow } from "./fs/utils";
▲  
▲  > Build failed because of webpack errors
▲  Error: Command "npm run build" exited with 1

原因

Edge RuntimeではNode.js固有のモジュール（fsやpathなど）が利用できません。
Clerkの内部処理でpathが使われているため、そのままでは動作しないのが原因でした。

解決方法

今回のページは「常に最新の情報を返す必要がない」ためSSRではなくSSG (Static Site Generation)に切り替えることにしました。

Next.jsではgenerateStaticParamsを使って静的にページを生成できます。

export async function generateStaticParams() {

//省略

}

終わりに

Cloudflare Pagesでは基本的にEdge Runtimeを使う必要がありますが、内部でNode.jsモジュールを利用しているライブラリ（今回の例だとClerk）を組み合わせると制約に引っかかることがあります。

今回のように必ずしもSSRが不要なケースでは、SSGに切り替えるのも解決策の一つだと学びました。
別のケースではまた違う対応が必要になると思うので、そのときも記録を残していきたいです。

参考