NextJS中MongoDB连接代码复用的正确存放路径及报错解决

核心问题原因 #

你遇到的dns模块解析错误，本质是NextJS误将dbConnect.js的代码打包到了客户端环境，而浏览器没有Node.js的dns核心模块（MongoDB驱动依赖该模块做域名解析）。

目录选择建议 #

辅助文件不需要局限于/pages或/api目录，推荐在项目根目录下创建自定义目录（比如/utils、/helpers）来存放dbConnect.js，这样更符合代码结构规范。

当然，你也可以放在/pages/api目录下——这个目录下的文件默认只会在服务端运行，但该目录主要用于编写API路由，放工具函数并不太贴合其设计初衷。

关键解决要点：确保仅在服务端执行 #

getStaticProps和getStaticPaths本身就是仅在服务端运行的函数，只要你只在这两个函数内部导入并调用dbConnect，就不会被打包到客户端代码中：

• 不要在组件的顶层（NextJS 12及之前的页面组件）导入dbConnect.js，避免被客户端打包；
• NextJS 13+的App Router模式下，服务端组件可以直接导入该文件，因为服务端组件全程在服务端运行。

标准dbConnect.js示例 #

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('请在环境变量中配置MONGODB_URI');
}

// 缓存连接，避免重复创建数据库连接
let cached = global.mongoose;
if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };
    cached.promise = mongoose.connect(MONGODB_URI, opts).then(mongoose => mongoose);
  }
  
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

在getStaticProps中的使用示例 #

export async function getStaticProps() {
  // 仅在服务端函数内部导入并调用
  const dbConnect = require('../utils/dbConnect').default;
  await dbConnect();

  // 执行数据库查询操作
  const data = await YourMongoModel.find({});
  
  return {
    props: { data: JSON.parse(JSON.stringify(data)) }
  };
}

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