Next.js连接MongoDB报错：Module not found: Can't resolve 'fs'

原因说明 #

1. "Module not found: Can't resolve 'fs'" 错误 #

MongoDB的Node.js驱动依赖fs这类Node.js核心模块，但Next.js在浏览器环境的代码打包过程中不支持这些模块——浏览器本身没有fs的实现。你在package.json里加的browser字段无效，是因为驱动内部的导入逻辑没被这个配置覆盖，或者你错误地在客户端代码里直接引入了驱动。

2. webpack.config.js 找不到 #

Next.js默认使用内置的webpack配置，不会自动读取根目录的webpack.config.js。要自定义webpack配置，必须使用Next.js指定的next.config.js文件，而非标准的webpack配置文件名。

3. 缓存重命名失败 #

一般是缓存目录（.next）的文件被占用或权限不足导致的——比如之前的开发服务器进程没彻底关掉，锁定了缓存文件，导致无法重命名更新。

解决方案 #

解决 "Can't resolve 'fs'" #

• 核心方案：仅在服务器环境使用MongoDB驱动
  把所有MongoDB连接、数据操作的代码放到以下位置：

  • API路由（pages/api/下的文件）
  • Next.js 13+ App Router中标记'use server'的组件/函数
  • getServerSideProps/getStaticProps这类服务器端渲染函数
    这些代码只会在Node.js环境执行，不会被打包到浏览器，自然不会触发fs相关错误。

• 临时兜底方案：配置webpack忽略fs（不推荐）
  如果非要在客户端引入相关依赖（存在运行时风险），可以在next.config.js中添加webpack配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { isServer }) => {
      if (!isServer) {
        config.resolve.fallback = {
          ...config.resolve.fallback,
          fs: false
        };
      }
      return config;
    }
  };
  
  module.exports = nextConfig;
  

  注意：这个配置只是让webpack不报错，如果代码实际调用fs方法，浏览器里会直接运行失败。

解决 webpack.config.js 找不到 #

如果要自定义webpack配置，创建next.config.js文件（不是webpack.config.js），把配置写在这里，Next.js会自动读取。

解决缓存重命名失败 #

• 彻底关闭所有Next.js开发进程，删除项目根目录的.next文件夹，再重新运行npm run dev。
• 检查.next目录的权限，确保当前用户有读写权限。

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