语言检测中间件
基于用户偏好的自动语言检测与 URL 路由
中间件会自动检测用户的语言偏好，并将其重定向到你的网站相应的本地化版本。它会在任何内容加载之前，根据浏览器设置、地理位置以及用户偏好提供合适的语言。
文件位置： 将 middleware.ts 放在项目根目录，与 app/ 目录同级——不要放在 app/ 内。
设置
第一步：创建动态路由
在 app/ 文件夹中创建一个 [locale] 目录，并将所有页面移入其中：
middleware.ts
layout.tsx
page.tsx
next.config.js
步骤 2：添加中间件
在项目根目录下创建 middleware.ts：
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// 匹配除 API 路由、静态文件和 Next.js 内部文件以外的所有路径
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};这将启用自动语言检测，并使用带有 locale 前缀的 URL 路由，例如 /en/about、/es/about。
语言检测
中间件按以下顺序检测用户语言偏好：
- URL locale -
/es/about→ 西班牙语 - 用户 Cookie - 先前的语言选择
- 浏览器标头 -
Accept-Language标头 - 默认 locale - 配置的 fallback 语言
中间件无需额外配置即可自动处理浏览器语言检测和 Cookie 的持久化。
本地化路径
为不同语言定制 URL 路径：
export default createNextMiddleware({
pathConfig: {
// 英文：/en/products，中文：/zh/产品
"/products": {
"zh": "/产品"
},
// 动态路由：/en/product/123，/zh/产品/123
"/product/[id]": {
"zh": "/产品/[id]"
}
}
});URL 结构
默认情况下，你的默认 locale 不会带有语言代码前缀：
/about → /about (默认语言区域：英语)
/about → /es/about (西班牙语)
/about → /fr/about (法语)为默认 locale 添加前缀
要为所有 locale（包括默认 locale）添加前缀：
export default createNextMiddleware({
prefixDefaultLocale: true
});结果：
/about → /en/about (英语，带前缀)
/about → /es/about (西班牙语，带前缀)
/about → /fr/about (法语，带前缀)常见问题
缺少动态路由
所有页面都必须放在 [locale]/ 目录下：
❌ 错误：
app/
├── page.tsx
└── about/page.tsx
✅ 正确：
app/
└── [locale]/
├── page.tsx
└── about/page.tsxMatcher 配置
排除 API 路由与静态资源：
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};彻底测试你的 middleware 配置——错误的匹配器可能导致无限重定向或损坏静态资源。
下一步
这份指南怎么样？