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 配置示例：

  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};

动态路由示例

在页面中通过 `useRouter` 获取当前语言：

  
// pages/about.js  
import { useRouter } from 'next/router';  

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

输出结果：

• 访问 `/en/about` → 显示 "About Page (en)"
• 访问 `/fr/about` → 显示 "About Page (fr)"

高级功能

静态生成多语言页面

使用 `getStaticPaths` 和 `getStaticProps` 为每种语言生成静态页面：

  
// 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 } };  
}

语言切换逻辑

通过 API 路由处理语言切换请求：

  
// 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 || '/');  
}

实际案例

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

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

性能优化

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

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

数学公式支持

在本地化中，可能需要处理复数形式。例如，英语中商品数量的显示规则： $\text{message}=\{\begin{array}{ll}\text{You have }n\text{ item}& \text{if }n=1\\ \text{You have }n\text{ items}& \text{if }n\ne 1\end{array}$

常见问题

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

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

总结

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