Next.js14でMSWを使う

Next.js14のCSRでMSWを使ってみました。
結論としては Chrome では使えたのですが、Safari では使えませんでした。

APIレスポンスをモックできるMSW（Mock Service Worker）ですが、Next.jsとは相性がよくないことで知られています。

GitHub

Support Next.js 13 (App Router) · Issue #1644 · mswjs/msw Scope Adds a new behavior Compatibility This is a breaking change Feature description As of 1.2.2, MSW does not support the newest addition to Next.js being the...

とか

Zenn

Next.js 13.5.6でMSWを使う際のハマりどころと解決法

とか。。。

いまは Next.js14 がリリースされていますし用途もCSRだし、ということでMSWを使ってみましたが、なかなか動かず小一時間溶かしました。

「Mocking enabled」とコンソールに出力されるので、ServiceWorker はちゃんと動いているはずなのですが、いざAPIを叩いてみると404エラーになってしまいます。
パスも合ってるので、モックできず存在しないAPIを呼んでいるから404なのは明らかなのですが・・・。

今日はもう諦めるか・・・と、片付け始めていたら「ん？ブラウザか？」と思い、SafariからChromeに変えて試してみたらすんなり成功しました。

私の端末（MacBook Air M1）はしばらくOSアップデートしていないので、まだSafariは15なのですが、アップデートしたらうまくいくのかな。。

ともかく、これではこの先心もとないのでMSWは使わないでおこうと思います。
Reactレシピシリーズで使いたかったのですが、入門系コンテンツなのに見てみたら動かない、というようでは話になりませんからね。。。

そのうちOS新しい方の端末で試してみたいと思います。