Next.js 13配置next.config.js允许外网图片加载报错求助

问题根源 #

你的配置报错是因为withNextIntl的参数传递格式错误，导致Next.js无法正确读取images配置项。withNextIntl需要直接接收Next.js配置对象，而非嵌套在nextConfig属性中。

修正后的完整配置代码 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    experiments: {
      topLevelAwait: true,
    },
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        // 简化路径匹配，** 覆盖该域名下所有子路径
        pathname: '/**',
      },
    ],
  },
  webpack(config) {
    return config;
  },
  i18n: {
    locales: ["en", "fa"],
    defaultLocale: "en",
    localeDetection: false,
  },
};

const withNextIntl = require("next-intl/plugin")("./i18n.js");

// 直接传递配置对象，而非嵌套结构
module.exports = withNextIntl(nextConfig);

关键说明 #

• 修正插件调用方式：原代码withNextIntl({ nextConfig })是错误写法，改为withNextIntl(nextConfig)后，插件才能正确合并配置项。
• 优化路径匹配规则：原pathname: '/**/**'可简化为/**，单个**已能匹配域名下所有层级的子路径，符合Next.js的路径匹配规范。
• 重启开发服务器：修改next.config.js后必须重启Next.js服务，否则新配置不会生效。

额外验证点 #

• 确认图片URL的hostname确实是lh3.googleusercontent.com，无拼写错误。
• 若使用App Router（appDir: true），确保<Image>组件的src属性完全符合配置的域名规则，没有额外的路径前缀问题。

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