我在开发一个使用App Router的 Next.js应用，发现开发过程中我的API路由会被调用两次。

我在useEffect里面放了一个简单的fetch：

useEffect(() => {
  fetchUsers()
}, [])

在 fetchUsers() 里我调用了我的API路由：

const fetchUsers = async () => {
  const res = await fetch('/api/users')
  const data = await res.json()
  console.log(data)
}

问题是API路由在终端里日志显示两次，尽管界面在视觉上只渲染了一次。

我检查了：

• 依赖项数组为空
• 没有重复的组件
• 生产构建中API路由工作正常

这是与Next.js开发模式中的React Strict Mode有关，还是我还遗漏了其他什么？

正在使用：

• Next.js 14
• React 18
• App Router

解决方案

当开启严格模式时，React会在第一次真正的设置之前再运行一次仅在开发环境下的额外设置+清理周期。这是一种压力测试，确保你的清理逻辑“镜像”你的设置逻辑，并且它会停止或撤销设置所做的一切（官方文档）。

你可以在next.config.js里禁用严格模式

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

你可以在这里了解更多信息：

https://react.dev/reference/react/useEffect