编辑“︁Next.js路由国际化”︁（章节）

= Next.js路由国际化 =

== 介绍 ==  
'''Next.js路由国际化'''（Route Internationalization）是Next.js框架提供的核心功能之一，允许开发者根据用户的语言偏好动态调整路由结构，从而实现多语言网站的构建。通过配置路由前缀（如<code>/en</code>、<code>/fr</code>）或子域名（如<code>en.example.com</code>），Next.js自动匹配并渲染对应语言的内容。此功能与[[Next.js国际化（i18n）]]深度集成，支持静态生成（SSG）和服务端渲染（SSR）。

== 核心概念 ==  
=== 1. 路由策略 ===  
Next.js支持两种路由国际化策略：  
* '''前缀路由'''：在URL路径中添加语言代码（如<code>/es/about</code>）。  
* '''域名路由'''：通过不同子域名区分语言（如<code>fr.example.com</code>）。  

=== 2. 配置i18n ===  
在<code>next.config.js</code>中定义语言配置：  
<syntaxhighlight lang="javascript">  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'], // 支持的语言列表  
    defaultLocale: 'en',         // 默认语言  
    domains: [                   // 域名路由配置（可选）  
      {  
        domain: 'example.com',  
        defaultLocale: 'en',  
      },  
      {  
        domain: 'fr.example.com',  
        defaultLocale: 'fr',  
      },  
    ],  
  },  
};  
</syntaxhighlight>  

=== 3. 动态路由匹配 ===  
Next.js自动将路径如<code>/about</code>重定向到<code>/[locale]/about</code>，并根据用户浏览器语言或手动选择切换语言。

== 代码示例 ==  
=== 基本页面结构 ===  
创建多语言页面时，文件结构通常为：  
<pre>  
pages/  
  ├── [locale]/  
  │   ├── about.js  
  │   └── index.js  
  └── api/  
</pre>  

=== 获取当前语言 ===  
在页面中使用<code>useRouter</code>获取当前语言：  
<syntaxhighlight lang="javascript">  
// pages/[locale]/about.js  
import { useRouter } from 'next/router';  

export default function About() {  
  const router = useRouter();  
  const { locale } = router;  

  return <h1>About Page ({locale})</h1>;  
}  
</syntaxhighlight>  

'''输出示例'''：  
访问<code>/fr/about</code>时，页面显示：  
<pre>About Page (fr)</pre>  

== 进阶功能 ==  
=== 语言切换 ===  
通过<code>next/link</code>实现语言切换按钮：  
<syntaxhighlight lang="javascript">  
import Link from 'next/link';  

function LanguageSwitcher() {  
  return (  
    <div>  
      <Link href="/about" locale="en">English</Link>  
      <Link href="/about" locale="fr">Français</Link>  
    </div>  
  );  
}  
</syntaxhighlight>  

=== 静态生成多语言页面 ===  
使用<code>getStaticPaths</code>为所有语言生成静态页面：  
<syntaxhighlight lang="javascript">  
export async function getStaticPaths() {  
  return {  
    paths: [  
      { params: { locale: 'en' } },  
      { params: { locale: 'fr' } },  
    ],  
    fallback: false,  
  };  
}  
</syntaxhighlight>  

== 实际案例 ==  
假设构建一个电商网站，需支持英语、法语：  
1. 用户访问<code>example.com</code>时，自动重定向到<code>example.com/en</code>。  
2. 通过导航栏切换至法语时，URL变为<code>example.com/fr</code>，所有文本内容同步更新。  

<mermaid>  
graph LR  
  A[用户访问 /] --> B{检测浏览器语言}  
  B -->|en| C[/en]  
  B -->|fr| D[/fr]  
  C --> E[渲染英语内容]  
  D --> F[渲染法语内容]  
</mermaid>  

== 常见问题 ==  
'''Q: 如何禁用自动语言检测？'''  
在<code>next.config.js</code>中设置<code>localeDetection: false</code>。  

'''Q: 动态路由参数如何与语言前缀共存？'''  
路径格式应为<code>/[locale]/[dynamic]</code>，例如<code>/fr/products/1</code>。  

== 数学公式支持（可选） ==  
若需计算语言权重（如多语言SEO优化），可使用：  
<math>  
\text{Weight}(L) = \frac{\text{Visits}(L)}{\sum \text{Visits}}  
</math>  

== 总结 ==  
Next.js路由国际化通过配置驱动的方式简化了多语言网站开发，支持动态路由、静态生成及域名级本地化。开发者只需关注内容翻译，框架自动处理路由逻辑。

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