Next.js 13.2.1集成msw 1.1.0报错：无法在服务端调用worker.start

问题根源 #

你遇到的错误是因为Next.js App目录下的page.tsx默认是服务器组件，而src/mocks/browser.ts是带有"use client"的客户端组件。服务器组件不允许直接调用客户端模块的方法（比如worker.start()），只能传递导入的模块本身，不能通过.访问其属性或方法。

正确启动方案 #

不需要修改现有handler.ts和browser.ts，只需新增一个专门的客户端组件来启动MSW，再在页面中引入该组件即可：

1. 创建MSW启动客户端组件 #

在src/mocks目录下新建msw-start.tsx：

'use client';

import { worker } from './browser';

// 仅在开发环境启动MSW
if (process.env.NODE_ENV === 'development') {
  worker.start({
    onUnhandledRequest: 'bypass', // 可选：让未被Mock的请求正常转发到真实接口
  });
}

// 该组件无需渲染任何内容
export default function MSWStart() {
  return null;
}

2. 在页面组件中引入启动组件 #

修改src/app/(user)/live-view/page.tsx，导入并渲染MSWStart组件：

import MSWStart from '@/mocks/msw-start';

async function getMessages() {
  const res = await fetch('/api/messages');
  return res.json();
}

export default async function LiveViewPage() {
  const messages = await getMessages();

  return (
    <>
      {/* 引入MSW启动组件，仅在客户端执行启动逻辑 */}
      <MSWStart />
      
      {/* 你的聊天框UI渲染代码 */}
      <div className="chat-container">
        {messages.map((msg) => (
          <div key={msg.id} className="message-item">
            <img src={msg.avatar} alt={msg.username} className="avatar" />
            <div className="message-content">
              <span className="username">{msg.username}</span>
              <p className="text">{msg.message}</p>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

关键说明 #

• MSWStart是客户端组件，其代码只会在浏览器环境执行，避免了服务器端访问客户端模块方法的错误。
• 通过process.env.NODE_ENV判断，确保MSW只在开发环境启动，不会影响生产构建。
• 原有的browser.ts和handler.ts保持不变，继续负责Mock请求的定义和Worker实例创建。

内容的提问来源于stack exchange，提问作者Mahijendra