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を使った実装方法紹介します。
実際に弊社で開発時に使ったコードです。

import { createMiddleware } from '@mswjs/http-middleware'
import express from 'express'
import cors from 'cors'
import { handlers } from './handlers'

const app = express()

app.use(cors())
app.use(express.json())
app.use(createMiddleware(...handlers)) // mswjs/http-middlewareを使う

app.listen(9090) // 任意のポート

mswjs/http-middlewareはexpressを併用しなくても使うことはできますが、CORS対策のためにexpressのmiddlewareとして設定しました。

起動スクリプトを設定する

実装できたらpackage.jsonのscriptに追加して起動できるようにします。

まずは必要なパッケージをインストール。

$ npm install -D ts-node nodemon tsconfig-paths

使用の用途は下記です。

• ts-node: TypeScriptを実行
• tsconfig-paths: ts-node使用時にパスのエイリアスエラーを有効にする
• nodemon: コード変更時にサーバーを再起動

必要なパッケージがインストールできたらpackage.jsonに設定します。

"script": {
  "msw": "nodemon --exec ts-node -r tsconfig-paths --project tsconfig-msw.json src/mocks/mock.ts"
}

• tsconfig-msw.json：msw用のtsconfig.jsonが必要であれば作成してください。
• src/mocks/mock.ts：上でサーバーを立てるコードのファイル。

このスクリプトを実行することで、MSWのモックサーバーが起動し、コードの変更が自動的に反映されるようになります。
これにより開発プロセスがスムーズに進行し、APIリクエストのモックが簡単に管理できます。

まとめ

今回Next.js 13でMSWの使用に制約が生まれたのは最初大きな課題となりましたが、今回紹介した方法で対処できたので一安心しました。

Next.js 13はリリースされてしばらく経ち、利用頻度も上がってきてい同じ問題に直面している人も多いのではないでしょうか。
別途サーバーを立てないといけない制約はありますが、よければ試してみてください。