Next.js如何将public目录子文件夹打包至_nex/static/media目录

核心原因 #

Next.js构建时会自动忽略未被代码显式引用的静态资源，导致public下的子文件夹未被打包到_next/static/media或构建产物的对应目录，进而生产环境无法访问。以下是无需逐个导入文件的解决方案：

具体方案 #

方案1：禁用图片优化保留原目录结构（最简单） #

在项目根目录的next.config.js中开启unoptimized配置，让public目录下所有文件（含子文件夹）原封不动保留结构复制到构建产物：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

配置后，生产环境可直接通过src='/subfolder/image.png'访问图片，无需修改原有路径。

方案2：用Webpack插件强制复制子文件夹 #

安装copy-webpack-plugin插件，手动指定需要复制的子文件夹，确保构建时完整迁移：

1. 安装依赖：

npm install copy-webpack-plugin --save-dev

2. 修改next.config.js：

const CopyWebpackPlugin = require('copy-webpack-plugin')

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'public/subfolder',
            to: 'subfolder' // 构建后保持与原目录一致的结构
          }
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

方案3：创建资源清单让构建工具识别 #

在子文件夹下创建一个导出所有资源的文件，无需业务代码使用，仅让Webpack扫描到资源存在：

1. 在public/subfolder下创建index.js：

// 批量导出所有图片，可根据文件名规则动态生成
export const subfolderImages = [
  require('./image1.png'),
  require('./image2.jpg'),
  ...Array.from({ length: 5 }, (_, i) => require(`./pic${i+1}.png`))
]

2. 在项目入口文件（如app/layout.js或pages/_app.js）中导入该文件：

import '../public/subfolder/index.js'

此方法会让Webpack将子文件夹资源打包到_next/static/media，但访问路径会带有哈希后缀（如_next/static/media/image1.abc123.png），若需保持原路径，建议配合方案1使用。

注意事项 #

• 访问路径必须以斜杠开头：/subfolder/image.png，而非subfolder/image.png
• 若使用App Router，所有静态资源务必放在public目录下，不要放在app目录内

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