Next.js中Unsplash图片配置无效问题求助

• 若你的Next.js版本是12及更早，改用domains配置项（你参考的旧视频大概率用的是这个方案）：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
      domains: ['images.unsplash.com']
    }
  }
  module.exports = nextConfig
  

  remotePatterns是Next.js 13才推出的新配置，旧版本不支持该语法。

• 修改配置后必须重启开发服务器，热重载不会自动读取next.config.js的变更，这是很多人忽略的关键细节。

• 若使用Next.js 13+，确认remotePatterns配置格式无误，可尝试更明确的路径匹配：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'images.unsplash.com',
          pathname: '/**'
        }
      ]
    }
  }
  module.exports = nextConfig
  

  同时检查配置文件的语法，比如引号、逗号是否正确，避免因语法错误导致配置不生效。

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