Next/image生产环境频繁出现502错误，求排查原因

核心配置错误修正 #

你的next.config.js导出格式有误，images配置应该嵌套在nextConfig对象内，而非作为独立导出项。错误的导出方式会导致Next.js无法正确识别图片域名白名单，进而引发代理请求失败。

修正后的配置文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: ["s3.us-west-2.amazonaws.com", "raw.githubusercontent.com"],
    },
};

module.exports = nextConfig;

502错误的常见原因与解决方案 #

1. Notion图片临时URL限制 #

Notion返回的图片URL多为带签名的临时链接，存在过期时间，且Next.js的内置图片优化服务可能无法稳定代理这类链接。解决方法是自建图片代理接口：

• 在pages/api目录下创建proxy-image.js：

import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req, res) {
  const { url } = req.query;
  if (!url || typeof url !== 'string') {
    return res.status(400).send('无效URL');
  }

  try {
    const response = await axios.get(url, { responseType: 'stream' });
    // 添加缓存头，减少重复请求
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    res.setHeader('Content-Type', response.headers['content-type']);
    response.data.pipe(res);
  } catch (error) {
    res.status(500).send('图片获取失败');
  }
}

• 使用next/image时通过代理接口加载图片：

import Image from 'next/image';

export default function NotionImage({ imageUrl }) {
  return (
    <Image
      src={`/api/proxy-image?url=${encodeURIComponent(imageUrl)}`}
      alt="Notion 内容图片"
      width={800}
      height={600}
    />
  );
}

2. Vercel图片优化服务并发限制 #

Vercel免费版的图片优化服务存在并发请求上限，高并发场景下会触发502错误。可通过以下方式缓解：

• 为代理接口添加强缓存（如上述代码中的Cache-Control头），让浏览器和CDN缓存图片资源
• 对页面中的图片进行懒加载，避免一次性发起大量图片请求

3. Sharp包兼容性问题 #

尽管已安装Sharp，若版本与Next.js不匹配，可能导致图片优化失败。确保两者版本兼容，可执行以下命令重新安装Sharp：

npm install sharp

无效错误链接处理 #

Next.js默认错误页面的"learn how to fix the error"链接失效是官方默认页面的问题，可通过自定义错误页面（pages/_error.js或app/error.js，依Next.js版本而定）替换默认内容，或忽略该问题（不影响核心功能）。

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