NextJS中getServerSideProps在index.js生效但[id].js报fs缺失错误是什么原因？

问题原因 #

Can't resolve 'fs' 报错的根本原因是：fs 是 Node.js 专属的服务端核心模块，浏览器运行环境不存在该模块。该报错说明仅能在服务端运行的 mongodb 依赖，被 NextJS 打包到了客户端代码中。

为什么 index.js 正常、[id].js 报错 #

和动态路由没有关系，看报错的导入链路可知，[id].js 导入了 ./lib/items.js 文件，而 index.js 没有导入该文件。大概率是 items.js 内同时存在服务端数据库操作逻辑和客户端用到的导出内容，导致 NextJS 把整个 items.js 连带 mongodb 依赖都打包进了客户端 bundle。

解决方案 #

• 给服务端专属文件加 .server.js 后缀：将 lib/mongodb.js 重命名为 lib/mongodb.server.js，如果 lib/items.js 仅包含服务端逻辑，也重命名为 lib/items.server.js。NextJS 会自动识别该后缀，确保这些文件仅在服务端执行，不会被打包进客户端。
• 检查 [id].js 的导入逻辑：确保所有数据库相关的导入、方法调用仅出现在 getServerSideProps 内部，不要在页面的组件函数中调用任何数据库相关方法。

另外你当前的商品查询逻辑存在两个问题，可以顺便优化：

1. 拉取全量库存再遍历筛选性能极低，直接通过 MongoDB 的查询方法筛选对应 id 的商品即可
2. 现有逻辑中初始化 item = null，第一次循环访问 item.id 会触发空指针错误

优化后的 getServerSideProps 参考：

export async function getServerSideProps({params}) {
  const { db } = await connectToDatabase();
  // 直接查询对应id的商品，注意替换为你实际的字段名
  const rawItem = await db
    .collection("stock")
    .findOne({ id: params.id })

  return {
    props: {
      item: rawItem ? convertFromMongoJSON(rawItem) : null
    }
  }
}

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