next.jsにmswを入れる

ここら辺参考に実装してく

• https://zenn.dev/akky1991/articles/37d03fc1b5f25e
• https://github.com/vercel/next.js/tree/canary/examples/with-msw

edgeで使えるかわからんかったけど、async_hooksしかnodeのAPI使ってなさそうだからいけるかな

• https://github.com/mswjs/msw/blob/main/src/node/SetupServerApi.ts
• https://nextjs.org/docs/app/api-reference/edge#unsupported-apis

App routerだとできなそう
Server ComponentとかRouter Hndlerとかどう対応するんだろう

• https://scrapbox.io/kii-cafe/検証:_Next.js_App_Routerで、MSW使いたい
• https://37108.dev/articles/2024-02-02-talk/#msw-が使えない問題への対処

fetchのインターセプト系のmockじゃ無いprismとか使うしか無いのか、、、

https://x.com/apimocking/status/1654933684212957185

Next.jsのプロセス周りの話してる

ここで結構議論されてる
https://github.com/mswjs/msw/issues/1644

https://github.com/mswjs/examples/pull/101

このサンプルで動いてる感じする

サンプルの if (process.env.NEXT_RUNTIME === "nodejs")が重要なんだな。
これがあることによって、importの解決タイミングを意図的に遅延させてる。

RUNTIMEが結果的にnodejsで他のRUNTIMEが来ないとしても必要だ。

export async function register() {
  console.log("[i] %s %d", process.env.NEXT_RUNTIME, process.pid);
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { initMocks } = await import("@/lib/msw");
    initMocks();
  }
}

ここにも書いてあった
https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation#importing-runtime-specific-code

他の参考資料

• https://nextjs.org/docs/app/api-reference/next-config-js/instrumentationHook
• https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation
• https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation

https://github.com/salvage0707/app-router-msw

とりあえずこれでサーバー側もmswで実行できた。
vercelのデプロイも通って、vercel上でも実行できてるので機能上の問題はなさそう。

ブラウザ側はいつも通り設定すればいけそうなので、問題なさそう

middlewareはprocess.env.NEXT_RUNTIMEがedgeだから./nodeがインポートできないエラーがmswの内部で発生して、どうしようもなさそう