编辑“︁Next.js语言切换”︁（章节）

= Next.js语言切换 =

'''Next.js语言切换'''是Next.js国际化（i18n）与本地化（l10n）功能的核心部分，允许开发者根据用户偏好或手动选择动态切换应用的语言。本指南将详细介绍如何在Next.js中实现多语言支持，包括路由策略、语言检测和切换机制。

== 介绍 ==
Next.js从v10开始内置了国际化路由支持，通过配置<code>next.config.js</code>可快速实现多语言站点的路由结构。语言切换通常涉及以下组件：
* 语言配置（支持的语言列表）
* 路由策略（子路径或域名路由）
* 用户语言检测（浏览器设置或手动选择）
* 内容翻译管理系统（如JSON文件或i18n库）

== 基础配置 ==
=== 修改next.config.js ===
首先在项目配置中声明支持的语言和默认语言：

<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'], // 支持的语言代码
    defaultLocale: 'en',         // 默认语言
    localeDetection: true,       // 是否自动检测浏览器语言
  },
}
</syntaxhighlight>

=== 路由策略类型 ===
Next.js支持两种路由策略：
{| class="wikitable"
|-
! 策略类型 !! 示例URL !! 说明
|-
| 子路径 || <code>/fr/about</code> || 语言代码作为路径前缀
|-
| 域名 || <code>https://fr.example.com</code> || 不同域名对应不同语言
|}

配置域名路由需额外设置：
<syntaxhighlight lang="javascript">
i18n: {
  domains: [
    {
      domain: 'example.com',
      defaultLocale: 'en',
    },
    {
      domain: 'fr.example.com',
      defaultLocale: 'fr',
    },
  ]
}
</syntaxhighlight>

== 实现语言切换 ==
=== 使用useRouter钩子 ===
通过Next.js提供的路由钩子实现前端切换：
<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 
      value={router.locale}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {router.locales.map((locale) => (
        <option key={locale} value={locale}>
          {locale.toUpperCase()}
        </option>
      ))}
    </select>
  );
}
</syntaxhighlight>

=== 服务端语言检测 ===
对于SSR页面，可在<code>getServerSideProps</code>中处理语言逻辑：
<syntaxhighlight lang="javascript">
export async function getServerSideProps({ locale }) {
  const messages = await import(`../locales/${locale}.json`);
  return { props: { messages } };
}
</syntaxhighlight>

== 内容本地化 ==
推荐的文件结构：
<pre>
public/
  locales/
    en.json
    fr.json
    de.json
</pre>

示例翻译文件：
<syntaxhighlight lang="json">
// locales/en.json
{
  "title": "Welcome",
  "description": "Learn about Next.js i18n"
}

// locales/fr.json
{
  "title": "Bienvenue",
  "description": "Apprenez Next.js i18n"
}
</syntaxhighlight>

== 高级模式 ==
=== 动态导入翻译 ===
结合<code>next/dynamic</code>实现按需加载语言包：
<syntaxhighlight lang="javascript">
const dynamicTranslations = dynamic(
  () => import(`../locales/${locale}.json`),
  { ssr: false }
);
</syntaxhighlight>

=== 语言持久化 ===
使用Cookie存储用户选择：
<syntaxhighlight lang="javascript">
import Cookies from 'js-cookie';

const changeLanguage = (locale) => {
  Cookies.set('NEXT_LOCALE', locale, { expires: 365 });
  router.push(router.pathname, router.asPath, { locale });
};
</syntaxhighlight>

== 性能优化 ==
<mermaid>
graph TD
    A[用户请求] --> B{语言检测}
    B -->|自动| C[浏览器语言]
    B -->|手动| D[存储的选择]
    C --> E[匹配支持的语言]
    D --> E
    E --> F[返回对应语言内容]
</mermaid>

优化策略包括：
* 预加载翻译文件
* 使用CDN分发语言资源
* 实现语言包的分块加载

== 实际案例 ==
'''电商网站语言切换流程'''：
1. 用户首次访问时自动跳转到浏览器语言版本
2. 顶部导航栏显示语言选择器
3. 用户选择后更新所有页面内容且不刷新页面
4. 购物车等交互数据保持跨语言一致

== 常见问题 ==
* '''Q''': 语言切换后页面闪烁？
* '''A''': 使用<code>next-translate</code>等库实现平滑过渡
* '''Q''': 如何实现RTL语言支持？
* '''A''': 结合CSS的<code>direction: rtl</code>和语言配置

== 数学表达 ==
语言匹配优先级公式：
<math>
P(l) = \begin{cases} 
1 & \text{if } l = l_{\text{user}} \\
0.5 & \text{if } l \in \text{fallbacks} \\
0 & \text{otherwise}
\end{cases}
</math>

== 参见 ==
* Next.js官方文档的i18n章节
* RFC 5646语言标签标准
* Unicode CLDR项目

通过本指南，您应已掌握Next.js语言切换的完整实现方案。建议从简单配置开始，逐步添加高级功能以适应项目需求。

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