Next.js13でMSWを使うためにmswjs/http-middlewareで対応した話
みなさんはMSW使っていますか? 弊社ではモックデータの扱いにMSWはなくてはならない存在となりました。
しかし、Next.js 13だとMSWがうまく動作しません(2023年10月25日現在)。
storybook、テストにもMSWを使っているのに、Next.jsで使えないのはまずい。
ということでなんとかNext.js 13でもMSWを使えないか模索してみたので、対処方法を紹介します。
記事の続編として「Viteで快適!MSWサーバーを個別に建てる」を書きましたので合わせてご覧ください。
mswjs/http-middlewareでサーバーを立てる
mswjs/http-middlewareは、mswの定義ファイルを使ってサーバーを立てるためのライブラリーです。
https:/github.com/mswjs/http-middlewar
これを使用すると、実際のサーバーがない状況で、APIリクエストをモックできます。
mswjs/http-middlewareを使った実装
mswjs/http-middlewareを使った実装方法紹介します。
実際に弊社で開発時に使ったコードです。
mswjs/http-middlewareはexpressを併用しなくても使うことはできますが、CORS対策のためにexpressのmiddlewareとして設定しました。
起動スクリプトを設定する
実装できたらpackage.jsonのscriptに追加して起動できるようにします。
まずは必要なパッケージをインストール。
使用の用途は下記です。
- ts-node: TypeScriptを実行
- tsconfig-paths: ts-node使用時にパスのエイリアスエラーを有効にする
- nodemon: コード変更時にサーバーを再起動
必要なパッケージがインストールできたらpackage.jsonに設定します。
- tsconfig-msw.json:msw用のtsconfig.jsonが必要であれば作成してください。
- src/mocks/mock.ts:上でサーバーを立てるコードのファイル。
このスクリプトを実行することで、MSWのモックサーバーが起動し、コードの変更が自動的に反映されるようになります。
これにより開発プロセスがスムーズに進行し、APIリクエストのモックが簡単に管理できます。
まとめ
今回Next.js 13でMSWの使用に制約が生まれたのは最初大きな課題となりましたが、今回紹介した方法で対処できたので一安心しました。
Next.js 13はリリースされてしばらく経ち、利用頻度も上がってきてい同じ問題に直面している人も多いのではないでしょうか。
別途サーバーを立てないといけない制約はありますが、よければ試してみてください。