Next.js中next build不遵循webpack配置的publicPath属性问题

你遇到的核心问题是错误地通过修改webpack的output.publicPath来配置静态导出的资源前缀——Next.js在静态导出（next export）场景下，不会读取webpack的这个配置，而是有专门的内置配置项来处理资源路径前缀。

为什么直接修改webpack publicPath无效？ #

Next.js的静态导出流程有独立的资源寻址逻辑，会忽略你手动设置的webpack output.publicPath。这个webpack配置通常用于自定义服务器部署的场景（比如用next start启动的Node服务器），但不适用于静态导出到S3这类静态托管平台的情况。

正确的配置方式 #

针对你的场景，推荐使用Next.js内置的basePath或assetPrefix配置，二选一即可：

1. 使用basePath（推荐，统一处理路由与资源） #

basePath会给所有页面路由和资源路径自动添加前缀，完全匹配你部署到/container/latest/的需求。修改next.config.js如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  basePath: '/container/latest', // 注意不要末尾的斜杠，Next.js会自动处理
  output: 'export', // Next.js 12+新增，明确指定静态导出模式（可选，但推荐）
};

module.exports = nextConfig;

2. 使用assetPrefix（仅给资源加前缀） #

如果你的页面路由不需要前缀，只需要资源路径带上/container/latest/，可以用assetPrefix：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  assetPrefix: '/container/latest/', // 这里需要末尾斜杠
  output: 'export',
};

module.exports = nextConfig;

验证与部署 #

修改配置后，重新执行：

npm run build && npm run export

打开生成的out/index.html，你会看到资源链接已经自动带上/container/latest/_next/...的前缀。

部署时，将out目录下的所有文件上传到AWS S3的container/latest/路径下，CloudFront的行为配置对应这个路径即可正常加载资源。

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