修改Next.js 13.4图片优化API的错误提示信息

针对你遇到的Next.js图片优化请求400错误时暴露技术细节的问题，以下是几种可行的解决方法：

1. 封装自定义Image组件拦截错误 #

在组件层面捕获图片加载失败的情况，替换成无敏感信息的自定义占位内容，彻底避免Next.js默认错误提示的展示。

创建一个全局可用的CustomImage组件：

// components/CustomImage.jsx
'use client';
import { useState } from 'react';
import Image from 'next/image';

export default function CustomImage(props) {
  const [loadFailed, setLoadFailed] = useState(false);

  return loadFailed ? (
    // 自定义错误占位，可替换成图标、空白或通用提示
    <div className="bg-gray-100 flex items-center justify-center w-full h-full">
      <span>图片加载失败</span>
    </div>
  ) : (
    <Image
      {...props}
      onError={() => setLoadFailed(true)}
      alt={props.alt || '图片'}
    />
  );
}

之后项目中所有使用Image组件的地方，替换为这个CustomImage即可。

2. 自定义服务器拦截图片优化请求（Windows自定义服务器场景） #

因为你部署在Windows自定义服务器上，可以通过拦截/_next/image路径的请求，修改错误响应内容，替换敏感提示。

假设你用Express搭建自定义服务器，修改server.js如下：

const express = require('express');
const next = require('next');

const isProd = process.env.NODE_ENV === 'production';
const app = next({ dev: !isProd });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 拦截所有图片优化请求
  server.all('/_next/image*', (req, res, next) => {
    const originalSend = res.send;
    // 重写send方法，替换错误内容
    res.send = function(body) {
      if (res.statusCode === 400 && typeof body === 'string') {
        // 匹配Next.js默认错误文本，替换为自定义内容
        if (body.includes('unable to optimize image')) {
          body = '图片加载失败';
          res.statusCode = 400; // 保留原始状态码
        }
      }
      originalSend.call(this, body);
    };
    handle(req, res, next);
  });

  // 处理其他所有请求
  server.all('*', (req, res) => handle(req, res));

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> 服务器已启动: http://localhost:3000');
  });
});

启动服务器时确保设置NODE_ENV=production，生产环境下该拦截逻辑会自动生效。

3. 确保生产环境配置正确 #

检查next.config.js中的生产环境配置，避免客户端暴露错误细节：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: false, // 禁用生产环境源码映射
  logging: {
    fetches: {
      fullUrl: false, // 不打印完整请求URL到日志
    },
  },
};

module.exports = nextConfig;

生产环境下Next.js默认会隐藏详细错误，但结合前两种方法可以完全避免敏感信息泄露。

注意：之前尝试的缓存错误方案无效，是因为图片优化请求是独立的API请求，不属于页面缓存的覆盖范围，需要针对图片请求或组件单独处理。

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