Next.js getStaticPaths拉取数据库数据配置动态路由报Can't resolve 'dns'错误

该报错并非MongoDB连接串配置错误导致，本质是Next.js打包边界失效：官方mongodb驱动完全基于Node.js环境开发，依赖dns、net等Node专属核心模块，当代码被打包器错误判定为需要打入浏览器端的客户端包时，由于浏览器环境不存在这类原生模块，就会抛出Can't resolve 'dns'的异常。

• 排查代码运行边界
  getStaticPaths本身是仅在构建阶段（Node.js运行环境）执行的方法，不会运行在浏览器端。触发该错误最常见的原因是，把MongoClient的初始化逻辑、连接工具函数写在了页面组件的顶层模块作用域，而非包裹在getStaticPaths、getStaticProps这类纯服务端方法内部，导致打包器无差别把mongodb依赖扫描进客户端打包产物。
• 显式标记服务端外部依赖
  在next.config.js配置中，将mongodb标记为仅服务端加载的外部包，避免打包器强行把Node原生依赖打进客户端包。对应配置代码：

  // next.config.js
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    serverExternalPackages: ['mongodb']
  }
  module.exports = nextConfig
  

  注：如果使用的是Next.js 13.4之前的版本，该配置项需要放在experimental配置下，即experimental: { serverComponentsExternalPackages: ['mongodb'] }。
• 调整数据库调用写法
  所有和MongoDB交互的逻辑，必须完全收敛在getStaticPaths这类服务端专属函数内部，不要把数据库操作逻辑暴露到客户端可访问的作用域。参考正确写法：

  import { MongoClient } from 'mongodb'
  
  export async function getStaticPaths() {
    const client = await MongoClient.connect('你的MongoDB连接串')
    const db = client.db()
    // 仅查询构建路径需要的id字段，减少构建阶段的数据库查询开销
    const recordList = await db.collection('你的集合名')
      .find({}, { projection: { id: 1 } })
      .toArray()
    await client.close()
  
    const paths = recordList.map(record => ({
      params: { id: record.id.toString() }
    }))
  
    return {
      paths,
      fallback: false
    }
  }
  
  // 页面组件内不要出现任何MongoDB驱动的调用逻辑
  export default function DynamicPage() {
    return <div>动态页面内容</div>
  }
  

• 补漏排查常见边界问题
  • 不要给带'use client'标记的客户端组件，传递携带数据库操作逻辑的props，避免冲破服务端/客户端的依赖边界
  • 不要在客户端代码（包括客户端组件、浏览器端交互逻辑）中导入任何MongoDB驱动的方法或类型
  • 开发环境下不要把MongoClient实例挂到全局window对象上，避免触发打包器的客户端依赖扫描

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