编辑“︁Next.js Rosetta”︁

{{DISPLAYTITLE:Next.js Rosetta}}  
'''Next.js Rosetta''' 是 [[Next.js]] 框架中用于国际化（i18n）与本地化的高级工具，它提供了一种高效的方式来管理多语言内容，并支持动态路由、静态生成（SSG）和服务器端渲染（SSR）的本地化配置。Rosetta 的设计灵感来源于 [[Rosetta Stone]]，旨在帮助开发者轻松实现多语言网站的构建。  

== 核心概念 ==  
Next.js Rosetta 的核心功能包括：  
* '''语言路由'''：通过路径前缀（如 `/en/about`）或子域名（如 `en.example.com`）区分语言。  
* '''内容本地化'''：动态加载翻译文件（如 JSON 或 Markdown）以匹配用户语言偏好。  
* '''自动语言检测'''：根据浏览器设置或用户选择切换语言。  

=== 与其他国际化工具的区别 ===  
Rosetta 与 [[next-i18next]] 或 [[react-intl]] 等库相比，深度集成 Next.js 的路由系统，无需额外配置即可支持静态优化。  

== 基本用法 ==  
以下是一个简单的 Rosetta 配置示例：  

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

=== 动态路由示例 ===  
在页面中通过 `useRouter` 获取当前语言：  
<syntaxhighlight lang="javascript">  
// pages/about.js  
import { useRouter } from 'next/router';  

export default function About() {  
  const { locale } = useRouter();  
  return <h1>About Page ({locale})</h1>;  
}  
</syntaxhighlight>  

输出结果：  
* 访问 `/en/about` → 显示 "About Page (en)"  
* 访问 `/fr/about` → 显示 "About Page (fr)"  

== 高级功能 ==  
=== 静态生成多语言页面 ===  
使用 `getStaticPaths` 和 `getStaticProps` 为每种语言生成静态页面：  
<syntaxhighlight lang="javascript">  
// pages/blog/[slug].js  
export async function getStaticPaths() {  
  return {  
    paths: [  
      { params: { slug: 'post-1' }, locale: 'en' },  
      { params: { slug: 'post-1' }, locale: 'fr' },  
    ],  
    fallback: false,  
  };  
}  

export async function getStaticProps({ locale }) {  
  const translations = await loadTranslations(locale);  
  return { props: { translations } };  
}  
</syntaxhighlight>  

=== 语言切换逻辑 ===  
通过 API 路由处理语言切换请求：  
<syntaxhighlight lang="javascript">  
// pages/api/change-language.js  
export default function handler(req, res) {  
  res.setHeader('Set-Cookie', `NEXT_LOCALE=${req.query.lang}; Path=/`);  
  res.redirect(302, req.headers.referer || '/');  
}  
</syntaxhighlight>  

== 实际案例 ==  
'''案例：电商网站的多语言商品页'''  
1. 配置 `locales: ['en', 'ja', 'de']`。  
2. 商品数据存储为 `products/en.json`、`products/ja.json`。  
3. 用户访问 `/ja/products/1` 时自动加载日文描述。  

<mermaid>  
graph TD  
    A[用户访问 /ja/products/1] --> B[Next.js 路由解析]  
    B --> C{语言是否为 ja?}  
    C -->|是| D[加载 ja.json 数据]  
    C -->|否| E[回退到默认语言]  
    D --> F[渲染页面]  
</mermaid>  

== 性能优化 ==  
* '''按需加载翻译文件'''：使用动态导入减少初始加载时间。  
* '''共享基础翻译'''：通过命名空间复用通用词汇（如导航栏）。  

<syntaxhighlight lang="javascript">  
// utils/i18n.js  
export async function loadNamespaces(namespaces, locale) {  
  return Promise.all(  
    namespaces.map(ns => import(`../locales/${locale}/${ns}.json`))  
  );  
}  
</syntaxhighlight>  

== 数学公式支持 ==  
在本地化中，可能需要处理复数形式。例如，英语中商品数量的显示规则：  
<math>  
\text{message} = \begin{cases}  
\text{You have } n \text{ item} & \text{if } n = 1 \\  
\text{You have } n \text{ items} & \text{if } n \neq 1  
\end{cases}  
</math>  

== 常见问题 ==  
'''Q: 如何强制重定向到用户偏好的语言？'''  
A: 在 `_middleware.js` 中检查 `Accept-Language` 头并重定向。  

'''Q: Rosetta 支持右到左（RTL）语言吗？'''  
A: 是，需配合 CSS 的 `direction: rtl` 和逻辑调整。  

== 总结 ==  
Next.js Rosetta 通过深度框架集成简化了国际化流程，适合从静态博客到动态应用的各类场景。开发者只需关注翻译内容，而路由、缓存和性能优化均由框架自动处理。

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