编辑“︁Next.js翻译工作流”︁

= Next.js翻译工作流 =

== 介绍 ==
'''Next.js翻译工作流'''（Translation Workflow）是指在使用Next.js框架开发多语言网站时，如何高效地管理和应用不同语言的翻译内容。Next.js通过内置的国际化（i18n）路由和第三方库（如`next-intl`或`react-i18next`）支持多语言切换和内容本地化。这一工作流通常包括以下步骤：
* 定义语言文件（JSON/YAML）
* 配置Next.js的i18n路由
* 动态加载翻译内容
* 实现语言切换逻辑

本指南将详细介绍如何在Next.js中实现完整的翻译工作流，并提供实际示例。

== 基础配置 ==
=== 1. 启用Next.js国际化路由 ===
在`next.config.js`中配置支持的语种和默认语言：

<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'], // 支持的语言
    defaultLocale: 'en',        // 默认语言
  },
}
</syntaxhighlight>

=== 2. 创建翻译文件 ===
按语言组织JSON文件，例如：
```
public/
  locales/
    en/
      common.json
    fr/
      common.json
    de/
      common.json
```

示例翻译内容（`en/common.json`）：
<syntaxhighlight lang="json">
{
  "greeting": "Hello World",
  "button": {
    "submit": "Submit"
  }
}
</syntaxhighlight>

== 核心实现 ==
=== 使用next-intl库 ===
安装依赖：
<syntaxhighlight lang="bash">
npm install next-intl
</syntaxhighlight>

创建语言提供器（`app/[locale]/layout.tsx`）：
<syntaxhighlight lang="typescript">
import { NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';

export default async function LocaleLayout({
  children,
  params: { locale }
}) {
  let messages;
  try {
    messages = (await import(`../../locales/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
</syntaxhighlight>

=== 在组件中使用翻译 ===
<syntaxhighlight lang="typescript">
import { useTranslations } from 'next-intl';

export function Greeting() {
  const t = useTranslations();
  return <h1>{t('greeting')}</h1>;
}
</syntaxhighlight>

== 高级工作流 ==
=== 动态导入翻译 ===
通过动态导入减少初始加载体积：
<syntaxhighlight lang="typescript">
const messages = await import(`../../locales/${locale}.json`)
  .then((mod) => mod.default)
  .catch(() => notFound());
</syntaxhighlight>

=== 自动化翻译流程 ===
使用CI/CD工具实现自动化翻译更新：
<mermaid>
graph LR
  A[更新源语言文件] --> B[通过API同步到翻译平台]
  B --> C[翻译人员处理]
  C --> D[生成翻译文件]
  D --> E[提交到代码库]
</mermaid>

== 实际案例 ==
=== 电商网站语言切换 ===
1. 用户访问`/fr/products`显示法语内容
2. 语言选择器更新URL格式：
<syntaxhighlight lang="typescript">
const router = useRouter();
const changeLanguage = (newLocale: string) => {
  router.push(router.pathname, router.asPath, { locale: newLocale });
};
</syntaxhighlight>

=== 服务端渲染处理 ===
在getServerSideProps中获取语言：
<syntaxhighlight lang="typescript">
export async function getServerSideProps({ locale }) {
  return {
    props: {
      messages: (await import(`../locales/${locale}.json`)).default
    }
  };
}
</syntaxhighlight>

== 最佳实践 ==
* 保持翻译键名语义化（如`homepage.header.title`）
* 对插值内容使用安全格式化：
  <syntaxhighlight lang="typescript">
  t('welcome', { name: <strong>userName</strong> })
  </syntaxhighlight>
* 定期审计未使用的翻译键
* 考虑RTL（从右到左）语言布局需求

== 数学表示 ==
翻译覆盖率计算公式：
<math>
\text{Coverage} = \frac{\text{Translated Keys}}{\text{Total Keys}} \times 100\%
</math>

== 故障排除 ==
{| class="wikitable"
|-
! 错误现象 !! 解决方案
|-
| 404语言路由 || 检查`next.config.js`的locales配置
|-
| 缺失翻译键 || 使用默认回退语言或开发警告
|-
| 浏览器控制台警告 || 确保`NextIntlClientProvider`正确包裹
|}

通过本文介绍的完整工作流，开发者可以构建健壮的国际化Next.js应用。建议从简单配置开始，逐步实现自动化翻译管理。

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