如何在Next.js构建过程中排除指定文件夹？

针对你的需求，这里有几个实用的最佳实践方案：

• 将配置文件夹移出客户端代码目录
  Next.js 默认只会打包 app/、pages/、components/ 这类客户端相关目录的代码。你可以直接把 /src/config 移到项目根目录下（比如改为 /config），这样打包器（Webpack/Turbopack）会自动忽略它——只要不在客户端组件里显式导入，就完全不会被打包到客户端包中。后端代码依然能在 API 路由、服务器组件、Server Actions 里正常导入使用。

• 用server-only包强制隔离服务器代码
  安装server-only包：

  npm install server-only
  

  在/src/config的入口文件（比如config/index.ts）顶部添加一行：

  import 'server-only'
  

  这样如果有人不小心在客户端组件里导入这个文件夹的代码，Next.js 会在构建时直接抛出错误，从根源阻止客户端导入。服务器端代码则不受影响，依然可以正常使用该文件夹的内容。

• 配置打包器排除特定目录（兜底方案）
  如果必须保留/src/config在当前路径，可以修改 Next.js 的打包配置。在next.config.js中添加：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { isServer }) => {
      // 仅在客户端打包时排除config文件夹
      if (!isServer) {
        config.module.rules.push({
          test: /src\/config\/.*/,
          use: 'null-loader',
        });
      }
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  记得先安装null-loader：

  npm install null-loader --save-dev
  

  这个方案让 Webpack 在客户端打包时忽略该目录的所有文件，但操作相对繁琐，建议优先用前两种方案。

• 严格控制导入范围
  确保所有对/src/config的导入只出现在服务器组件（带'use server'标记）、API 路由、Server Actions 或者getServerSideProps/getStaticProps这些仅在服务器端运行的代码里。客户端组件绝对不要导入该文件夹的任何内容，Next.js 打包器会自动识别并排除这类服务器专属代码。

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