Next.js生产构建时未打包public文件夹问题求助

针对你执行next build && next export后，out目录仅生成_next文件夹、public目录未被打包的问题，以下是几个实用的解决办法：

1. 确保public资源被代码正确引用 #

Next.js的静态导出机制只会自动打包代码中实际引用到的public目录资源。如果public里的文件没有在组件或页面中被引用，就不会被复制到out目录。
比如引用public下的logo.png，要使用绝对路径：

// 正确写法
<img src="/logo.png" alt="Logo" />
// 或者使用next/image组件
import Image from 'next/image';
<Image src="/logo.png" alt="Logo" width={100} height={100} />

2. 手动添加复制命令到构建脚本 #

如果需要将整个public目录（包括未被代码引用的文件）都打包到out中，可以修改package.json的build脚本，在next export之后添加复制操作：

• Linux/macOS 环境：

  "scripts": {
    "build": "next build && next export && cp -r public/* out/"
  }
  

• Windows 环境：

  "scripts": {
    "build": "next build && next export && xcopy public out\\public /E /I /Y"
  }
  

• 跨平台兼容方案：
  先安装copyfiles依赖：

  npm install copyfiles --save-dev
  

  再修改build脚本：

  "scripts": {
    "build": "next build && next export && copyfiles -u 1 public/**/* out/"
  }
  

3. 检查next.config.js的配置 #

如果项目中有自定义的next.config.js，确认没有设置影响静态资源导出的配置项。比如exportPathMap如果配置不当，可能导致资源未被正确收集。Next.js 12.x默认配置下，只要资源被代码引用，就会被自动打包到out目录，无需额外配置。

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