Next.js 13静态资源构建前缀配置：修改图片路径方法问询

在Next.js 13中配置静态资源前缀修改组件的图片路径 #

可以通过next.config.js结合webpack自定义配置实现需求，以下是具体方案：

核心配置步骤 #

确保开启静态导出模式（对应你生成out文件夹的场景），同时自定义webpack规则修改静态资源输出路径，再配置next/image的路径前缀让组件生成正确的图片链接：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  webpack: (config) => {
    // 遍历webpack规则，修改静态资源的输出目录
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.type === 'asset/resource') {
            // 将输出路径从默认的static/media改为static/asset
            oneOfRule.generator = {
              filename: 'static/asset/[name].[hash][ext]'
            };
          }
        });
      }
    });
    return config;
  },
  // 配置next/image组件生成的图片路径前缀
  images: {
    path: '/_next/static/asset/'
  }
};

module.exports = nextConfig;

自定义其他路径的调整 #

如果想改成/_next/images/myimage.svg这类形式，只需修改两处：

• 将webpack配置中的filename改为static/images/[name].[hash][ext]
• 将images.path改为'/\_next/images/'

验证效果 #

执行npm run build后，你会看到out/_next/static/asset（或你自定义的目录）下生成了静态图片资源，同时页面中<Image>组件渲染出的图片链接会自动指向新路径。

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