编辑“︁Next.js语言检测”︁

= Next.js语言检测 =

== 介绍 ==  
'''Next.js语言检测'''是国际化（i18n）与本地化（l10n）流程中的关键步骤，它允许应用根据用户偏好或浏览器设置自动选择合适的语言版本。Next.js通过内置的国际化路由和第三方库（如`next-intl`或`i18next`）简化了这一过程，支持静态生成（SSG）和服务器端渲染（SSR）场景下的动态语言适配。

== 工作原理 ==  
Next.js语言检测通常基于以下优先级顺序：  
1. '''URL路径'''（如`/en/about`中的`en`）  
2. '''Cookie或本地存储'''（用户手动选择的语言）  
3. '''浏览器`Accept-Language`头部'''（HTTP请求中携带的语言偏好）  
4. '''默认语言'''（配置中的后备选项）

<mermaid>  
flowchart LR  
    A[请求到达] --> B{路径含语言?}  
    B -->|是| C[使用路径语言]  
    B -->|否| D{存在Cookie?}  
    D -->|是| E[使用Cookie语言]  
    D -->|否| F[解析浏览器头部]  
    F --> G[匹配支持的语言]  
    G --> H[使用默认语言]  
</mermaid>  

== 配置方法 ==  

=== 基础配置 ===  
在`next.config.js`中启用国际化：  
<syntaxhighlight lang="javascript">  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'], // 支持的语言  
    defaultLocale: 'en',         // 默认语言  
  },  
}  
</syntaxhighlight>  

=== 高级检测逻辑 ===  
通过中间件实现自定义检测（Next.js 12+）：  
<syntaxhighlight lang="javascript">  
// middleware.js  
import { NextResponse } from 'next/server'  

export function middleware(request) {  
  const locale = request.cookies.get('locale')?.value ||  
                 request.headers.get('accept-language')?.split(',')[0] ||  
                 'en'  
  return NextResponse.rewrite(new URL(`/${locale}${request.nextUrl.pathname}`, request.url))  
}  
</syntaxhighlight>  

== 实际案例 ==  

=== 案例1：电商网站语言切换 ===  
用户从法国访问时：  
1. 浏览器发送`Accept-Language: fr-FR,fr;q=0.9`  
2. 中间件检测到`fr`在支持列表中  
3. 自动重定向到`/fr/products`  

=== 案例2：用户手动覆盖 ===  
即使用户浏览器偏好是西班牙语（`es`），但通过UI选择英语后：  
1. 设置Cookie: `locale=en`  
2. 后续请求优先使用Cookie值  

== 数学建模 ==  
语言匹配优先级可通过权重公式表示：  
<math>  
L_{final} = \begin{cases}  
L_{path} & \text{if } L_{path} \in S \\  
L_{cookie} & \text{else if } L_{cookie} \in S \\  
\underset{l \in S}{\operatorname{argmax}}(Q(l)) & \text{else}  
\end{cases}  
</math>  
其中：  
- <math>S</math> = 支持的语言集合  
- <math>Q(l)</math> = 浏览器头部中语言`l`的权重  

== 常见问题 ==  

'''Q: 如何禁用路径路由检测？'''  
A: 在中间件中跳过路径解析，仅依赖Cookie/头部：  
<syntaxhighlight lang="javascript">  
if (request.nextUrl.pathname.startsWith('/_next')) return  
</syntaxhighlight>  

'''Q: 搜索引擎如何识别多语言？'''  
A: 添加`hreflang`标签并在`sitemap.xml`中声明多语言URL。  

== 最佳实践 ==  
1. 始终提供语言切换UI，不依赖自动检测  
2. 对SSG页面使用`getStaticPaths`生成所有语言版本  
3. 测试边缘情况（如不受支持的语言代码`zh-CN` vs `zh`）  

== 参见 ==  
* [[Next.js国际化路由]]  
* [[Next.js中间件高级用法]]  

本内容最后更新于：2023年11月

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js国际化与本地化]]