MSW（Mock Service Worker）をNext.jsプロジェクトにセットアップする手順と推奨ディレクトリ構造。

必要なパッケージのインストール:

npm install --save-dev msw @mswjs/data @faker-js/faker
npx msw init public/ --save

推奨ディレクトリ構造:

src/mocks/
├── browser.ts          # ブラウザ用MSW設定
├── server.ts           # Node.js用MSW設定
├── handlers/
│   ├── index.ts        # ハンドラー集約
│   ├── auth.ts         # 認証系API
│   ├── [feature].ts    # 機能別ハンドラー
├── data/
│   └── factories/      # データファクトリー
│       └── [model].ts  # モデル別ファクトリー
└── initMocks.ts        # MSW初期化

browser.tsの基本実装:

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

環境変数による制御を実装する場合のinitMocks.ts:

export async function initMocks() {
  if (typeof window === 'undefined') {
    const { server } = await import('./server')
    server.listen({ onUnhandledRequest: 'bypass' })
  } else {
    const { worker } = await import('./browser')
    await worker.start({
      onUnhandledRequest: 'bypass',
      serviceWorker: { url: '/mockServiceWorker.js' }
    })
  }
}

export async function initMocksIfEnabled() {
  if (process.env.NEXT_PUBLIC_ENABLE_MSW === 'true') {
    await initMocks()
  }
}

ハンドラーの構成パターン:

// handlers/index.ts
export const handlers = [...authHandlers, ...userHandlers]

export const createHandlers = (overrides = []) => {
  return [...overrides, ...handlers]
}

この構造により、テスト時のハンドラー切り替えやモックデータの管理が容易になる。