Next.js应用因图片优化无法导出的解决方法及原因

问题原因 #

• Next.js默认的图片加载器依赖服务器端的Image Optimization API实现图片自动缩放、格式转换等优化功能
• next export 用于生成纯静态HTML/CSS/JS文件，无需服务器运行，但这种静态输出模式无法支撑需要服务器端处理的图片优化逻辑，因此触发兼容性报错

解决步骤 #

要让npm run export成功执行，最适配静态导出需求的方法是禁用图片优化功能，具体操作如下：

1. 打开项目根目录的next.config.js文件
2. 在nextConfig对象中添加images.unoptimized = true配置项，修改后的完整代码：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

3. 重新执行npm run export即可完成静态导出

注：错误提示中提到的next start方案，是通过运行服务器来支持图片优化API，但该方案仅适用于需要服务器运行的部署场景，不符合静态导出的需求。

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