在Next.js App Router中使用MirageJS模拟接口遇404错误求助

为啥Root Layout里直接初始化会失败？ #

Next.js App Router的Root Layout默认是服务器组件，而MirageJS是运行在浏览器端的Mock工具，直接在服务器组件里调用它，会因为环境不兼容报错。

解决办法：用客户端组件全局初始化 #

我们可以把MirageJS的初始化逻辑封装成一个客户端组件，然后在Root Layout里引入，这样就能实现全局复用，不用每个组件都单独初始化。

第一步：写个专门的初始化组件 #

在app/components/下面新建MirageInit.jsx：

'use client'

import { makeServer } from '@/path/to/your/server/file'

// 只在开发环境启动Mock服务，且只初始化一次
if (process.env.NODE_ENV === 'development') {
  makeServer({ environment: 'development' })
}

export default function MirageInit() {
  // 这个组件不用渲染任何东西
  return null
}

第二步：在Root Layout里引入它 #

修改你的app/layout.js，把刚才的组件加进去：

import MirageInit from './components/MirageInit'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* 全局加载MirageJS的初始化逻辑 */}
        <MirageInit />
        {children}
      </body>
    </html>
  )
}

第三步：修复组件里的渲染bug #

你的Assets组件中，map函数没有返回元素，导致页面看不到内容，改一下：

'use client'

import { useState, useEffect } from "react"

export default function Assets(){
  const [assets, setAssets] = useState([])

  useEffect(() => {
    fetch("/api/movies")
      .then((res) => res.json())
      .then((json) => {
        setAssets(json.movies)
      })
  }, [])

  const assetElements = assets.map((asset, index) => (
    // 别忘了加key，避免React警告
    <div key={index}>
      <p>{asset.name}</p>
      <p>{asset.year}</p>
    </div>
  ))

  return (
    <>
      {assetElements}
    </>
  )
}

注意点 #

• 必须加'use client'：确保组件跑在浏览器里，MirageJS才能拦截fetch请求。
• 环境判断：别在生产环境启动Mock服务，避免冗余代码。
• 单例初始化：通过环境判断保证服务器只创建一次，不会重复实例化。

这样设置后，MirageJS会在应用启动时全局初始化，所有页面的请求都会被正确拦截，不用再每个组件单独写初始化代码了。

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