Next.js多语言支持

Next.js多语言支持

Next.js多语言支持（Internationalization, i18n）是Next.js框架提供的核心功能之一，允许开发者构建支持多种语言和区域的应用程序。通过内置的国际化路由和本地化内容管理机制，开发者可以轻松实现动态语言切换、区域适配和翻译内容加载。本教程将详细介绍如何在Next.js项目中配置和使用多语言支持，涵盖从基础配置到高级用例的完整实现。

介绍

Next.js的国际化功能基于两个核心概念：

• 语言（Locale）：应用程序支持的语言代码（如`en`、`es`、`zh`）。
• 路由策略：决定URL如何体现语言（如路径前缀`/en/page`或域名`example.com/es`）。

Next.js默认支持两种路由策略：

1. 子路径路由（如`/en/about`）
2. 域名路由（如`example.es/about`）

以下是一个典型的国际化流程：

flowchart TD A[用户访问网站] --> B{检测语言偏好} B -->|浏览器语言| C[匹配支持的Locale] B -->|手动选择| D[设置Locale到URL] C --> E[加载对应翻译内容] D --> E E --> F[渲染页面]

配置基础国际化

在`next.config.js`中启用i18n：

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

此配置定义：

• `locales`：支持的语言列表。
• `defaultLocale`：默认语言（当未匹配时使用）。

自动语言检测

Next.js会自动处理语言检测逻辑： 1. 优先检查URL中的Locale（如`/es/page`）。 2. 若无，则根据`Accept-Language`头部匹配浏览器偏好。 3. 最终回退到`defaultLocale`。

实现翻译内容

推荐使用JSON文件管理翻译内容：

  
// public/locales/en/common.json  
{  
  "title": "Welcome",  
  "description": "Learn Next.js i18n"  
}  

// public/locales/es/common.json  
{  
  "title": "Bienvenido",  
  "description": "Aprende i18n en Next.js"  
}

通过`next-translate`或`next-i18next`等库加载内容：

  
// 使用next-i18next  
import { useTranslation } from 'next-i18next';  

function HomePage() {  
  const { t } = useTranslation('common');  
  return <h1>{t('title')}</h1>;  
}

动态语言切换

通过`next/router`实现手动语言切换：

  
import { useRouter } from 'next/router';  

function LanguageSwitcher() {  
  const router = useRouter();  

  const changeLanguage = (locale) => {  
    router.push(router.pathname, router.asPath, { locale });  
  };  

  return (  
    <select onChange={(e) => changeLanguage(e.target.value)}>  
      <option value="en">English</option>  
      <option value="es">Español</option>  
    </select>  
  );  
}

高级用例

域名路由

配置多域名支持：

  
// next.config.js  
module.exports = {  
  i18n: {  
    locales: ['en', 'es'],  
    domains: [  
      { domain: 'example.com', defaultLocale: 'en' },  
      { domain: 'example.es', defaultLocale: 'es' },  
    ],  
  },  
}

静态生成优化

为每种语言预生成静态页面：

  
// pages/[locale]/about.js  
export async function getStaticPaths() {  
  return {  
    paths: ['en', 'es'].map(locale => ({ params: { locale } })),  
    fallback: false,  
  };  
}

实际案例

场景：电商网站需要支持英语、西班牙语用户。 1. 商品标题和描述根据Locale动态显示。 2. 价格格式按区域自动转换（如`$19.99` → `19,99 €`）。 3. 通过Cookie记住用户选择的语言。

实现代码片段：

  
// 价格格式化组件  
function Price({ value, locale }) {  
  const formatter = new Intl.NumberFormat(locale, {  
    style: 'currency',  
    currency: locale === 'es' ? 'EUR' : 'USD',  
  });  
  return <span>{formatter.format(value)}</span>;  
}

数学公式支持（可选）

若需在翻译内容中嵌入公式，可使用`解析失败 (语法错误): {\displaystyle `标签： <math>E = mc^2} 的翻译可能是：

• 英语：$E=m{c}^2$
• 西班牙语：$E=m{c}^2$（相同公式，不同上下文描述）

总结

Next.js的多语言支持通过以下步骤实现：

1. 配置`i18n`设置。
2. 组织翻译内容（JSON/YAML）。
3. 使用路由API处理语言切换。
4. 按需扩展高级功能（域名路由、静态优化）。

通过此机制，开发者可以构建真正全球化的Web应用，适配不同语言和区域需求。