Next.jsでのモックの使い方とは？

Next.jsではMSW（Mock Service Worker）を使うことで、ブラウザやサーバー側でAPIリクエストをモックできます。これにより、開発やテスト時にリアルなAPIサーバーを用意せずに擬似データで処理を行うことが可能です。

MSWをNext.jsでセットアップする手順は？

MSWをセットアップするには、mswをインストールし、ブラウザとサーバー用のハンドラーを設定します。Service Workerを利用するために、クライアントサイドとサーバーサイドでの初期化スクリプトを分けて設定します。

モックを利用するメリットは何ですか？

モックを利用することで、開発初期段階やテスト環境でのAPI通信を安定させることができます。サーバーが未完成でもフロントエンド開発を進められる他、テストの再現性が高まり、デプロイ環境でも動作確認が容易になります。

【Next.js】モックの効果的な使い方 - 開発・テスト環境でのモック利用

概要

Next.jsでの開発やテスト環境では、APIが完成していない場合や依存サーバーが利用できない場合でもモックを活用することで、効率的に開発を進めることができます。ここでは、モックサーバーとして広く使われているMSW（Mock Service Worker）を利用して、効果的にモックを実装する方法を紹介します。

MSWとは？

MSWは、クライアントサイドやサーバーサイドでのAPIリクエストをインターセプトし、擬似的なレスポンスを返すことができるモックツールです。これにより、フロントエンド開発中にバックエンドが未完成でも擬似データを使用して開発やテストを進めることができます。 MSWの利点は、開発環境・テスト環境で使用でき、APIサーバーの動作に依存せずに動作確認が行える点です。また、ローカル環境に限らず、StorybookやE2Eテストなどでも活用可能です。

MSWのセットアップ手順

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

まず、MSWをインストールします。

npm install msw --save-dev

次に、MSWで使用するService Workerを初期化します。

npx msw init public/ --save

これで、publicディレクトリにmockServiceWorker.jsが作成されます。このService Workerはクライアントサイドのリクエストをモックするために使われます。

ハンドラーの設定

ハンドラーはAPIリクエストに対するレスポンスを定義する場所です。たとえば、以下のように/api/userエンドポイントへのGETリクエストをモックするハンドラーを定義します。

import { rest } from 'msw';
export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ username: 'admin' })
    );
  }),
];

クライアントとサーバーのモック設定

クライアントサイドのモックはService Workerを使って行い、サーバーサイドではNode.js環境でリクエストをモックします。これにより、SSR（サーバーサイドレンダリング）やCSR（クライアントサイドレンダリング）両方に対応できます。

クライアントサイド設定

import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);

サーバーサイド設定

import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);

`_app.tsx`でモックの起動

開発環境でのみモックを起動するために、環境変数を使用してモックを有効化します。

if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
  if (typeof window === 'undefined') {
    const { server } = require('../mocks/server');
    server.listen();
  } else {
    const { worker } = require('../mocks/browser');
    worker.start();
  }
}

これにより、APIリクエストはモックハンドラーで処理されるようになります。

MSWの活用例

開発中のAPIモック
APIが未実装でも、モックを使用してデータの送受信を再現し、UIの動作確認を行えます。
テスト環境での再現性向上
モックを利用することで、テストの再現性が高まり、APIサーバーが動作しない場合でもテストを正確に実行可能です。
Storybookでのモック利用
MSWを使用すれば、StorybookでAPIをモックしながらUIコンポーネントを確認できます。

結論

Next.jsの開発やテストにおいてMSWを使うことで、APIの完成を待たずに作業を進めることができ、開発効率を向上させることができます。モックを効果的に利用することで、プロジェクトのスピードと品質を両立させることが可能です。ぜひMSWを活用して、APIモックの設定を行ってみてください。

概要