如何在Next.js中排除文件夹出构建包但仍可读取其中文件？

针对你的需求，这里有几个可行的实现方案，解决构建体积过大同时保留数据读取能力：

方案1：将JSON文件夹移至public目录 #

Next.js的public目录下的文件会作为静态资源直接部署，不会被打包进JS bundle中，完美满足排除构建包的需求。

• 读取方式：
  • 客户端：通过fetch请求静态资源URL，比如你的JSON文件夹是public/json-data，读取单个文件的代码：

    async function fetchJsonFile(filename) {
      const res = await fetch(`/json-data/${filename}`)
      return res.json()
    }
    

  • 服务器端（API路由、getServerSideProps等）：用Node.js的fs模块读取绝对路径，避免路径错误：

    import fs from 'fs/promises'
    import path from 'path'
    
    async function getServerJsonData(filename) {
      const filePath = path.join(process.cwd(), 'public/json-data', filename)
      const rawData = await fs.readFile(filePath, 'utf8')
      return JSON.parse(rawData)
    }
    

方案2：配置next.config.js排除文件追踪 #

如果不想把JSON文件放在public目录，可以通过Next.js的实验性配置outputFileTracingExcludes排除该文件夹的打包追踪，之前配置无效可能是路径写法不对。

• 配置示例：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      outputFileTracingExcludes: {
        // 替换为你的JSON文件夹相对路径，**/*匹配所有子文件
        '*': ['./your-json-folder/**/*']
      }
    }
  }
  
  module.exports = nextConfig
  

• 读取限制：排除后客户端无法通过import读取，只能在服务器端环境（API路由、服务器组件、getStaticProps等）用fs模块读取，再将数据传递给客户端组件。

注意事项 #

• 服务器端读取时必须用process.cwd()拼接绝对路径，避免部署时因工作目录变化导致路径错误。
• 若使用public目录，更新JSON文件后建议修改文件名或添加URL参数（如?v=2），避免CDN缓存旧数据。
• 不要在客户端组件中直接使用fs模块，该模块仅在Node.js环境可用。

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