NEXT13 i18n配置异常：访问根路径未按浏览器语言显示内容

我搭建了一个配置i18n的最小化Next.js 13项目，需求是访问localhost:3000/时，能根据浏览器的语言偏好自动跳转到对应语言的根页面。目前访问该路径时默认显示英文根页面，但浏览器语言已设置为中文，期望能按照当前浏览器的区域设置展示对应语言内容。

解决步骤 #

1. 配置Next.js多语言基础设置 #

确保next.config.js中正确配置支持的语言列表和默认语言：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
  },
};

module.exports = nextConfig;

2. 编写中间件实现语言检测与重定向 #

在项目根目录创建middleware.js，通过请求头的Accept-Language获取浏览器偏好语言，并重定向到对应语言路径：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const { pathname } = request.nextUrl;
  // 跳过已有语言前缀、静态资源和API路径
  if (pathname.startsWith('/en') || pathname.startsWith('/zh') || pathname.startsWith('/_next') || pathname.startsWith('/api')) {
    return NextResponse.next();
  }

  // 解析浏览器优先语言
  const acceptLanguage = request.headers.get('accept-language');
  const preferredLang = acceptLanguage ? acceptLanguage.split(',')[0].split('-')[0] : 'en';
  // 限定为支持的语言列表
  const supportedLangs = ['en', 'zh'];
  const targetLang = supportedLangs.includes(preferredLang) ? preferredLang : 'en';

  // 重定向到目标语言页面
  return NextResponse.redirect(new URL(`/${targetLang}`, request.url));
}

// 指定中间件仅对根路径生效
export const config = {
  matcher: '/',
};

3. 确认多语言页面路由结构 #

在app目录下创建对应语言的页面文件夹：

• app/en/page.js：英文首页内容
• app/zh/page.js：中文首页内容

这样当访问localhost:3000/时，中间件会自动检测浏览器语言偏好，跳转到/zh或/en路径，展示对应语言的页面内容。

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