Next.js 13.4+I18n环境下图片加载400错误求助

以下是针对问题的具体排查和解决步骤：

1. 修正路由中间件配置（最常见原因） #

如果项目用middleware.js处理i18n路由重定向，必须确保它不会拦截Next.js的图片优化请求（/_next/image路径）。

修正后的中间件示例： #

import { NextResponse } from 'next/server'
import { i18n } from './i18n.config' // 你的i18n配置文件

export function middleware(request) {
  const pathname = request.nextUrl.pathname

  // 跳过静态资源和图片优化请求
  if (pathname.startsWith('/_next/') || pathname.startsWith('/favicon.ico')) {
    return NextResponse.next()
  }

  // 处理i18n路由重定向逻辑
  const pathnameHasLocale = i18n.locales.some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (!pathnameHasLocale) {
    const locale = request.cookies.get('NEXT_LOCALE')?.value || i18n.defaultLocale
    return NextResponse.redirect(
      new URL(`/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`, request.url)
    )
  }
}

// 关键：匹配规则排除图片优化和静态资源路径
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

2. 确认图片文件和路径正确性 #

• 确保imagentest.jpg确实存放在项目根目录的public文件夹下，文件名完全匹配（注意大小写，Imagentest.jpg和imagentest.jpg会被视为不同文件）。
• 直接访问http://localhost:3000/imagentest.jpg，如果能正常显示，说明图片本身无问题，问题出在Image组件的优化流程上。

3. 检查next.config.js配置 #

确保i18n和images配置正确，没有限制本地图片加载：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['zh', 'en'], // 你的语言列表
    defaultLocale: 'zh',
    localeDetection: false,
  },
  images: {
    // 本地图片无需配置remotePatterns，保持默认即可
    unoptimized: false, // 请勿随意开启，否则会关闭Next.js图片优化
  },
}

module.exports = nextConfig

4. 验证Image组件使用方式 #

确保Image组件的src路径正确，且width/height参数有效：

import Image from 'next/image'

export default function TestPage() {
  return (
    <div className="p-4">
      <Image
        src="/imagentest.jpg"
        alt="测试图片"
        width={128}
        height={128}
      />
    </div>
  )
}

5. 清除缓存并重启服务 #

• 删除项目根目录下的.next文件夹
• 重启开发服务器：npm run dev

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