如何合并Next.js基础配置与@next/bundle-analyzer插件配置

问题原因 #

你先后两次对module.exports赋值，第二次导出的withBundleAnalyzer({})直接覆盖了第一次写的所有配置项，因此图片域名限制、重定向规则、严格模式这些配置都不会生效。

正确合并写法 #

把你写好的完整配置对象作为参数直接传入withBundleAnalyzer方法即可，无需分开两次导出：

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  images: {
    domains: [
      "ticket-t01.s3.eu-central-1.amazonaws.com",
      "media.istockphoto.com",
    ],
    deviceSizes: [320, 375, 450, 540, 640, 750, 828, 1080, 1200, 1920],
  },
  reactStrictMode: true,
  poweredByHeader: false,
  async redirects() {
    return [
      {
        source: "/",
        destination: "/hu",
        permanent: true,
      },
    ];
  },
});

补充说明 #

如果后续需要接入其他Next.js生态的插件，也是同样的逻辑，将最终的全量配置对象传入最外层的插件包装函数即可。

内容的提问来源于stack exchange，提问作者János