编辑“︁Next.js多语言支持”︁

= Next.js多语言支持 =  
'''Next.js多语言支持'''（Internationalization, i18n）是Next.js框架提供的核心功能之一，允许开发者构建支持多种语言和区域的应用程序。通过内置的国际化路由和本地化内容管理机制，开发者可以轻松实现动态语言切换、区域适配和翻译内容加载。本教程将详细介绍如何在Next.js项目中配置和使用多语言支持，涵盖从基础配置到高级用例的完整实现。

== 介绍 ==  
Next.js的国际化功能基于两个核心概念：  
* '''语言（Locale）'''：应用程序支持的语言代码（如`en`、`es`、`zh`）。  
* '''路由策略'''：决定URL如何体现语言（如路径前缀`/en/page`或域名`example.com/es`）。  

Next.js默认支持两种路由策略：  
# '''子路径路由'''（如`/en/about`）  
# '''域名路由'''（如`example.es/about`）  

以下是一个典型的国际化流程：  
<mermaid>  
flowchart TD  
    A[用户访问网站] --> B{检测语言偏好}  
    B -->|浏览器语言| C[匹配支持的Locale]  
    B -->|手动选择| D[设置Locale到URL]  
    C --> E[加载对应翻译内容]  
    D --> E  
    E --> F[渲染页面]  
</mermaid>  

== 配置基础国际化 ==  
在`next.config.js`中启用i18n：  

<syntaxhighlight lang="javascript">  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'es', 'zh'],  
    defaultLocale: 'en',  
  },  
}  
</syntaxhighlight>  

此配置定义：  
* `locales`：支持的语言列表。  
* `defaultLocale`：默认语言（当未匹配时使用）。  

=== 自动语言检测 ===  
Next.js会自动处理语言检测逻辑：  
1. 优先检查URL中的Locale（如`/es/page`）。  
2. 若无，则根据`Accept-Language`头部匹配浏览器偏好。  
3. 最终回退到`defaultLocale`。  

== 实现翻译内容 ==  
推荐使用JSON文件管理翻译内容：  

<syntaxhighlight lang="json">  
// public/locales/en/common.json  
{  
  "title": "Welcome",  
  "description": "Learn Next.js i18n"  
}  

// public/locales/es/common.json  
{  
  "title": "Bienvenido",  
  "description": "Aprende i18n en Next.js"  
}  
</syntaxhighlight>  

通过`next-translate`或`next-i18next`等库加载内容：  

<syntaxhighlight lang="javascript">  
// 使用next-i18next  
import { useTranslation } from 'next-i18next';  

function HomePage() {  
  const { t } = useTranslation('common');  
  return <h1>{t('title')}</h1>;  
}  
</syntaxhighlight>  

== 动态语言切换 ==  
通过`next/router`实现手动语言切换：  

<syntaxhighlight lang="javascript">  
import { useRouter } from 'next/router';  

function LanguageSwitcher() {  
  const router = useRouter();  

  const changeLanguage = (locale) => {  
    router.push(router.pathname, router.asPath, { locale });  
  };  

  return (  
    <select onChange={(e) => changeLanguage(e.target.value)}>  
      <option value="en">English</option>  
      <option value="es">Español</option>  
    </select>  
  );  
}  
</syntaxhighlight>  

== 高级用例 ==  
=== 域名路由 ===  
配置多域名支持：  

<syntaxhighlight lang="javascript">  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'es'],  
    domains: [  
      { domain: 'example.com', defaultLocale: 'en' },  
      { domain: 'example.es', defaultLocale: 'es' },  
    ],  
  },  
}  
</syntaxhighlight>  

=== 静态生成优化 ===  
为每种语言预生成静态页面：  

<syntaxhighlight lang="javascript">  
// pages/[locale]/about.js  
export async function getStaticPaths() {  
  return {  
    paths: ['en', 'es'].map(locale => ({ params: { locale } })),  
    fallback: false,  
  };  
}  
</syntaxhighlight>  

== 实际案例 ==  
'''场景'''：电商网站需要支持英语、西班牙语用户。  
1. 商品标题和描述根据Locale动态显示。  
2. 价格格式按区域自动转换（如`$19.99` → `19,99 €`）。  
3. 通过Cookie记住用户选择的语言。  

实现代码片段：  

<syntaxhighlight lang="javascript">  
// 价格格式化组件  
function Price({ value, locale }) {  
  const formatter = new Intl.NumberFormat(locale, {  
    style: 'currency',  
    currency: locale === 'es' ? 'EUR' : 'USD',  
  });  
  return <span>{formatter.format(value)}</span>;  
}  
</syntaxhighlight>  

== 数学公式支持（可选） ==  
若需在翻译内容中嵌入公式，可使用`<math>`标签：  
<math>E = mc^2</math>的翻译可能是：  
* 英语：<math>E = mc^2</math>  
* 西班牙语：<math>E = mc^2</math>（相同公式，不同上下文描述）  

== 总结 ==  
Next.js的多语言支持通过以下步骤实现：  
# 配置`i18n`设置。  
# 组织翻译内容（JSON/YAML）。  
# 使用路由API处理语言切换。  
# 按需扩展高级功能（域名路由、静态优化）。  

通过此机制，开发者可以构建真正全球化的Web应用，适配不同语言和区域需求。

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