Next Export搭配next/image报错 自定义服务部署503错误如何解决

报错原因 #

Next.js默认的next/image优化能力依赖服务端运行时处理，而next export会导出完全脱离Next.js服务的纯静态文件，二者天然不兼容。

解决方案 #

方案A：保留next export静态导出能力（需调整图片配置） #

如果你的场景确实需要纯静态导出，不需要Node服务运行，可以选择以下任意一种方式：

• 给Image组件添加unoptimized={true}属性，关闭单张图片的优化能力：

<Image 
    src={process.env.website_url ? (process.env.website_url + "/img/logo/logo1.png") : "/img/logo/logo1.png" } 
    width={width} 
    height={height}
    alt="logo"
    unoptimized={true}
/>

• 在next.config.js中全局配置关闭所有图片优化，无需逐个修改组件：

module.exports = {
  images: {
    unoptimized: true,
  },
}

• 更换为第三方图片优化loader：如果使用七牛、阿里云OSS、Cloudflare等支持图片优化的图床，可以在next.config.js中配置对应loader，替换默认的服务端loader，也可兼容静态导出。
• 直接替换为原生<img>标签，完全放弃Next.js的图片优化能力。

方案B：放弃next export，使用Node服务运行（无需更换loader） #

也就是你后续调整的自定义Express服务方案，去掉构建脚本里的next export即可，默认的图片优化能力可以正常在Node服务中运行，无需修改Image组件配置。

503错误本质是反向代理层找不到对应的上游服务，按以下顺序排查即可：

• 修正端口硬编码配置：大部分托管平台会通过PORT环境变量指定服务监听端口，不能硬写3000，修改端口配置为：

const port = process.env.PORT || 3000

• 检查服务启动状态：登录部署主机，查看Node进程是否正常运行，查看启动日志是否有报错，确认部署流程是否执行了npm run build之后才执行npm run start，确认express、next等依赖是否放在dependencies而非devDependencies中，避免生产环境部署时依赖缺失。
• 检查反向代理配置：如果主机使用Nginx等反向代理，确认代理规则是否正确转发到Node服务监听的端口，转发请求头是否符合要求，超时配置是否合理。
• 检查端口占用情况：确认服务监听的端口没有被主机上的其他进程占用，导致Node服务启动失败。
• 检查系统资源限制：确认主机内存足够支撑Next.js服务运行，内存不足时Node进程会被系统主动杀掉，导致服务不可用返回503。
• 检查环境变量配置：确认部署环境中配置了代码中用到的所有环境变量（如website_url、NODE_ENV等），避免因为环境变量缺失导致服务启动异常。

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