Next.js应用打包后处于.next文件夹时如何访问public目录的图片？

• 你执行npm run build打包Next.js应用时，构建流程只会处理构建节点已存在于public目录的资源做静态优化，后续新增到public目录的图片无需重新打包，直接通过/[图片相对public目录的路径]即可正常访问，不需要额外从.next目录寻址。
• 只要你生产环境用next start启动服务时，保持public目录与.next目录处于同级位置，Next.js会自动处理public目录下的所有静态资源请求，无需额外配置。

如果需要调整文件夹结构，可通过修改next.config.js实现自定义静态资源路径配置：

1. 自定义静态资源路由映射

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/img/:path*',
        // 填写自定义图片存放目录的路径，示例为根目录下的upload文件夹
        destination: '/upload/:path*'
      }
    ]
  }
}

2. 修改默认public目录路径（Next.js 13及以上版本支持）

// next.config.js
module.exports = {
  experimental: {
    // 将默认public目录修改为根目录下的custom-public目录
    publicDir: 'custom-public'
  }
}

若你使用Serverless平台部署（如Vercel、Netlify），平台不支持运行时修改部署包内的目录文件，建议将动态新增的图片存储到对象存储服务，直接访问CDN地址即可，不需要调整本地目录配置。

内容的提问来源于stack exchange，提问作者Mr.Guardian