Next.js路由国际化[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

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

核心概念[编辑 | 编辑源代码]

1. 路由策略[编辑 | 编辑源代码]

Next.js支持两种路由国际化策略：

前缀路由：在URL路径中添加语言代码（如/es/about）。
域名路由：通过不同子域名区分语言（如fr.example.com）。

2. 配置i18n[编辑 | 编辑源代码]

在next.config.js中定义语言配置：

  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'], // 支持的语言列表  
    defaultLocale: 'en',         // 默认语言  
    domains: [                   // 域名路由配置（可选）  
      {  
        domain: 'example.com',  
        defaultLocale: 'en',  
      },  
      {  
        domain: 'fr.example.com',  
        defaultLocale: 'fr',  
      },  
    ],  
  },  
};

3. 动态路由匹配[编辑 | 编辑源代码]

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

代码示例[编辑 | 编辑源代码]

基本页面结构[编辑 | 编辑源代码]

创建多语言页面时，文件结构通常为：

  
pages/  
  ├── [locale]/  
  │   ├── about.js  
  │   └── index.js  
  └── api/

获取当前语言[编辑 | 编辑源代码]

在页面中使用useRouter获取当前语言：

  
// 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>;  
}

输出示例：访问/fr/about时，页面显示：

About Page (fr)

进阶功能[编辑 | 编辑源代码]

语言切换[编辑 | 编辑源代码]

通过next/link实现语言切换按钮：

  
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>  
  );  
}

静态生成多语言页面[编辑 | 编辑源代码]

使用getStaticPaths为所有语言生成静态页面：

  
export async function getStaticPaths() {  
  return {  
    paths: [  
      { params: { locale: 'en' } },  
      { params: { locale: 'fr' } },  
    ],  
    fallback: false,  
  };  
}

实际案例[编辑 | 编辑源代码]

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

常见问题[编辑 | 编辑源代码]

Q: 如何禁用自动语言检测？ 在next.config.js中设置localeDetection: false。

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

数学公式支持（可选）[编辑 | 编辑源代码]

若需计算语言权重（如多语言SEO优化），可使用： $Weight (L) = \frac{Visits (L)}{\sum Visits}$

总结[编辑 | 编辑源代码]

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