Next.js MSW 2 Mock API 만들기

React 컴포넌트·TypeScript·async/await를 알고 시작합니다. Next.js 환경 준비의 루트 app/ TypeScript App Router 프로젝트를 별도 연습 폴더에서 사용합니다. 이 글의 기존 실습 기준은 Next.js 16.3.5이며 Cache Components는 끈 구성입니다. 생성된 app/layout.tsx는 유지합니다. 아래 파일은 TaskFlow·인증·DB 없이 실행하는 독립 예제입니다.

npm install -D msw, npx msw init public/ --save 후 npm run dev를 실행합니다. localhost /practice에서 버튼을 누릅니다. /api/practice-mock 실제 Route Handler는 만들지 않습니다.

app/practice/worker.ts 전체 코드

import { http, HttpResponse } from 'msw';
import { setupWorker } from 'msw/browser';
export const worker = setupWorker(
  http.get('/api/practice-mock', () => HttpResponse.json({ message: 'Mock 성공' })),
);

let startPromise: ReturnType<typeof worker.start> | undefined;

export function startMockWorker() {
  if (!startPromise) {
    startPromise = worker.start({ onUnhandledRequest: "bypass" }).catch((error) => {
      startPromise = undefined;
      throw error;
    });
  }
  return startPromise;
}

app/practice/page.tsx 전체 코드

"use client";
import { useState } from 'react';
export default function Page() {
  const [message, setMessage] = useState('대기');
  const [pending, setPending] = useState(false);
  async function load() {
    if (process.env.NODE_ENV !== 'development') { setMessage('개발 모드 전용'); return; }
    setPending(true);
    try {
      const { startMockWorker } = await import('./worker');
      await startMockWorker();
      const response = await fetch('/api/practice-mock');
      if (!response.ok) throw new Error('응답 오류');
      const data: { message: string } = await response.json();
      setMessage(data.message);
    } catch { setMessage('worker 또는 요청 실패'); }
    finally { setPending(false); }
  }
  return <main><button disabled={pending} onClick={load}>Mock 조회</button><p>{message}</p></main>;
}

자가 확인: handler 경로를 요청과 다르게 바꿨을 때 Mock과 실제 404를 구분하고 복구합니다.