编辑“︁Next.js内容翻译”︁（章节）

= Next.js内容翻译 =

== 介绍 ==
'''Next.js内容翻译'''是Next.js国际化（i18n）与本地化（l10n）的核心功能之一，允许开发者根据用户的语言偏好动态渲染多语言内容。通过结合Next.js的路由系统与翻译工具库（如`next-intl`或`react-i18next`），开发者可以轻松实现静态生成（SSG）或服务器端渲染（SSR）的多语言网站。

关键特性：
* '''路由级国际化'''：通过路径前缀（如`/en/about`）或域名（如`example.fr`）区分语言。
* '''动态加载翻译文件'''：按需加载JSON或模块化的翻译资源。
* '''上下文感知翻译'''：支持变量插值、复数形式和性别标记等复杂场景。

== 基础实现 ==
=== 1. 配置Next.js国际化 ===
在`next.config.js`中启用i18n支持：

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

=== 2. 创建翻译文件 ===
按语言组织JSON文件（建议存放在`locales/`目录）：
<mermaid>
flowchart LR
    locales --> en.json
    locales --> fr.json
    locales --> es.json
</mermaid>

示例`locales/en.json`：
<syntaxhighlight lang="json">
{
  "home": {
    "title": "Welcome to our site",
    "subtitle": "Discover our products"
  }
}
</syntaxhighlight>

== 高级用法 ==
=== 动态内容翻译 ===
使用`next-intl`库实现组件级翻译：

<syntaxhighlight lang="javascript">
// pages/_app.js
import { NextIntlProvider } from 'next-intl';

export default function App({ Component, pageProps }) {
  return (
    <NextIntlProvider messages={pageProps.messages}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}
</syntaxhighlight>

=== 带变量的翻译 ===
支持插值语法：
<syntaxhighlight lang="json">
// locales/fr.json
{
  "greeting": "Bonjour, {name}!"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
import { useTranslations } from 'next-intl';

function Greeting() {
  const t = useTranslations();
  return <h1>{t('greeting', { name: 'Jean' })}</h1>;
}
// 输出: <h1>Bonjour, Jean!</h1>
</syntaxhighlight>

== 实际案例 ==
=== 电商网站语言切换 ===
1. 用户访问`/es/products`时，Next.js自动检测`es`语言环境
2. 动态加载西班牙语翻译文件
3. 页面显示西班牙语内容，货币格式自动转换为EUR

<mermaid>
sequenceDiagram
    participant User
    participant Next.js
    participant CDN
    User->>Next.js: GET /es/products
    Next.js->>CDN: Request es.json
    CDN-->>Next.js: Return translations
    Next.js->>User: Render Spanish page
</mermaid>

== 性能优化 ==
* '''按需加载翻译'''：通过动态导入减少初始负载
  <syntaxhighlight lang="javascript">
  const messages = await import(`../locales/${locale}.json`);
  </syntaxhighlight>
* '''缓存策略'''：对翻译文件设置长期缓存头
* '''预渲染'''：在构建时生成所有语言的静态页面

== 数学表示 ==
翻译过程可形式化为函数：
<math>
f(locale, key, variables) \rightarrow string
</math>
其中：
* <math>locale \in L</math>（语言集合）
* <math>key \in K</math>（翻译键集合）
* <math>variables: V \rightarrow string</math>（变量映射）

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 闪屏现象 || 使用`next/dynamic`延迟加载非默认语言
|-
| SEO优化 || 添加`hreflang`标签和语言元数据
|-
| 缺失翻译 || 配置fallback语言并记录缺失键
|}

== 延伸阅读 ==
* Next.js官方i18n文档
* Unicode CLDR（通用语言环境数据仓库）规范
* ICU Message语法标准

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