Next.js 13在Amplify Compute Hosting上自动语言区域检测失效问题

问题说明 #

Amplify官方提到支持Next.js SSR的自动语言区域检测，但按要求在next.config.js中开启localeDetection: true后完全失效——Next.js无法读取Accept-Language请求头，自动重定向到用户偏好语言的逻辑无法运行，大概率是该请求头被Amplify拦截了。

我的配置如下：

// next.config.js
i18n: {
    locales: ["en", "sv"],
    defaultLocale: "en",
    localeDetection: true
}

无论是依赖Next.js自带的检测逻辑，还是自定义中间件做重定向，都拿不到Accept-Language头。

解决步骤 #

1. 配置Amplify转发Accept-Language请求头 #

登录Amplify控制台，进入目标应用的应用设置 > 重定向和转发：

• 确保重定向规则中，将所有非静态资源的请求（如页面路由）转发到/index.html（类型选200 (Rewrite)），这是Next.js SSR的基础配置
• 在页面下方的转发请求头列表中添加Accept-Language，保存配置后重新部署应用

2. 自定义中间件实现语言检测 #

如果上述配置仍无效，直接手动编写中间件处理语言检测和重定向，比依赖Next.js自带逻辑更可靠：

// middleware.js
import { NextResponse } from 'next/server'
import acceptLanguage from 'accept-language'

// 配置支持的语言列表
acceptLanguage.languages(['en', 'sv'])

export function middleware(req) {
  let userLocale
  
  // 优先读取cookie中保存的用户已选语言（如果有）
  const savedLocale = req.cookies.get('NEXT_LOCALE')
  if (savedLocale) {
    userLocale = savedLocale.value
  } else {
    // 从请求头读取用户偏好语言，无匹配则用默认值
    userLocale = acceptLanguage.get(req.headers.get('Accept-Language')) || 'en'
  }

  // 如果当前路径没有语言前缀，重定向到对应语言的路径
  const currentPath = req.nextUrl.pathname
  if (!currentPath.startsWith(`/${userLocale}`)) {
    return NextResponse.redirect(new URL(`/${userLocale}${currentPath}`, req.url))
  }
}

// 配置中间件生效范围（排除API、静态资源等路径）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}

注意需要先安装依赖包：npm install accept-language

3. 验证请求头是否正常传递 #

可以在任意SSR页面中添加日志，确认Accept-Language头是否被正确接收：

// pages/[locale]/index.js（或其他SSR页面）
export async function getServerSideProps(context) {
  console.log('Accept-Language:', context.req.headers['accept-language'])
  return { props: {} }
}

部署后查看Amplify的应用日志，若能看到对应的请求头信息，说明配置已生效。

问题原因 #

Amplify默认的请求转发规则会过滤部分非标准请求头，Accept-Language恰好被包含在内，因此需要手动配置才能让它传递到Next.js服务。官方文档提到的自动检测功能依赖该请求头，但未明确说明需要额外配置转发，这是容易踩坑的点。

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