はじめに
はじめまして！ e-dash株式会社でフロントエンドエンジニアをしているKaiです。
弊社ではNext.js 13.5.6 を用いて開発しており、モックサーバには MSW 1.3.2を利用しています。
今回は、この MSW を動かすのに1日ほど時間を溶かしてしまったので、備忘録も兼ねて解決法を残します！
開発環境
- nextjs@13.5.6
- msw@1.3.2
- @mswjs/interceptors@0.17.10
- node-fetch@2.7.0
ハマりどころ
Next.js 13 と MSW を利用しているエンジニアにとってはご存じの方も多いかもしれませんが、この2つは相性が良くありません・・・
具体的に言うと、SSRを用いて MSW で用意したAPIを叩いてもmsw/interceptorが動作しないので、結果を取得することができません😭
issueの情報を参考に、藁にもすがる思いでmsw/interceptorを最新にアップデートしたり、MSW v2に更新したりしましたが解決には至りませんでした・・・
※ この辺りの問題は、開発者側も既知であり、Next.js 14では諸々対応されるようです。
解決法
色々試しているうちに、undiciに対して割り込みが動作していないことが分かったので、弊社ではfetchをラップした関数を用意する方法で解決しました！
こうすることで、CSRでもSSRでも問題無くmsw/interceptorが動作します。
export function wrappedFetch(url: string, options?: RequestInit): Promise<any> {
if (!isBrowser()) {
const fetch = require('node-fetch');
return fetch(url, options);
}
return fetch(url, options);
}
※1 mswjs/http-middlewareを用いることも考えましたが、準備が面倒なのでやめました
※2 上記のコードであれば、cross-fetchやisomorphic-unfetchを用いれば良いはずなのですが、何故か動作が不安定だったので以下のようにしています・・・謎すぎる・・・
まとめ
MSW v1は、Next.js 13のSSRをサポートしていないので、このような小細工を弄することで動かすことに成功しました・・・
色々なissueを調べてみると、msw/interceptorをアップデートしたら動いたよ！と言っている方もおられたので、パッケージの依存関係のバージョンでも左右されるのかもしれません。
MSW v2以降では、Next.js 14以上に対してSSRをサポートすると明言されているので、今後はこちらに期待していきたいと思います！
また、弊社ではNext.js 13.5.6を用いて開発していますが、今後も継続的にアップデートを予定しております！
弊社の開発に興味を持ってくださった方は、下記の採用情報に目を通して頂けると幸いです！
採用情報
e-dashエンジニアチームは現在一緒にはたらく仲間を募集中です！
同じ夢について語り合える仲間と一緒に、環境問題を解決するプロダクトを作りませんか？
Discussion