Next.js 如何进行国际化 (i18n)？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Next.js 中进行国际化 (i18n) 可以通过以下步骤实现：

配置 next.config.js：在 next.config.js 中配置 i18n 选项，指定支持的语言和默认语言。

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'], // 支持的语言
    defaultLocale: 'en', // 默认语言
  },
};

创建语言文件：为每种语言创建对应的 JSON 文件，存储翻译内容。

// www.javascriptcn.com code example
// locales/en.json
{
  "greeting": "Hello"
}

// locales/fr.json
{
  "greeting": "Bonjour"
}

// locales/es.json
{
  "greeting": "Hola"
}

使用 useRouter 获取当前语言：在组件中使用 useRouter 钩子获取当前语言，并根据语言加载对应的翻译内容。

// www.javascriptcn.com code example
import { useRouter } from 'next/router';
import en from '../locales/en.json';
import fr from '../locales/fr.json';
import es from '../locales/es.json';

const translations = {
  en,
  fr,
  es,
};

export default function Home() {
  const router = useRouter();
  const { locale } = router;
  const t = translations[locale];

  return <h1>{t.greeting}</h1>;
}

切换语言：通过 router.push 或 Link 组件切换语言。

// www.javascriptcn.com code example
import Link from 'next/link';

export default function LanguageSwitcher() {
  return (
    <div>
      <Link href="/" locale="en">
        <a>English</a>
      </Link>
      <Link href="/" locale="fr">
        <a>Français</a>
      </Link>
      <Link href="/" locale="es">
        <a>Español</a>
      </Link>
    </div>
  );
}

本题详细解读

1. 配置 `next.config.js`

在 next.config.js 中配置 i18n 是 Next.js 实现国际化的第一步。locales 数组定义了支持的语言，defaultLocale 指定了默认语言。Next.js 会根据这些配置自动处理路由和语言切换。

2. 创建语言文件

每种语言对应一个 JSON 文件，存储翻译内容。这些文件通常放在 locales 目录下，文件名与语言代码一致。例如，en.json 对应英语，fr.json 对应法语。

3. 使用 `useRouter` 获取当前语言

useRouter 是 Next.js 提供的一个钩子，用于访问路由信息。通过 router.locale 可以获取当前语言，然后根据语言加载对应的翻译内容。这种方式使得在组件中动态显示不同语言的文本变得非常简单。

4. 切换语言

通过 Link 组件或 router.push 方法，可以轻松实现语言的切换。Link 组件的 locale 属性指定了目标语言，点击链接后，页面会自动切换到对应的语言版本。

5. 自动路由处理

Next.js 的国际化支持还包括自动路由处理。例如，如果用户访问 /fr/about，Next.js 会自动识别 fr 为法语，并加载对应的翻译内容。这种机制使得多语言站点的开发更加高效。

6. 动态导入语言文件

为了提高性能，可以使用动态导入 (import()) 来按需加载语言文件，而不是在页面加载时一次性加载所有语言文件。

// www.javascriptcn.com code example
const translations = {
  en: () => import('../locales/en.json'),
  fr: () => import('../locales/fr.json'),
  es: () => import('../locales/es.json'),
};

export default function Home() {
  const router = useRouter();
  const { locale } = router;
  const [t, setT] = useState({});

  useEffect(() => {
    translations[locale]().then((module) => {
      setT(module.default);
    });
  }, [locale]);

  return <h1>{t.greeting}</h1>;
}

通过以上步骤，你可以在 Next.js 中轻松实现国际化，支持多语言站点的开发。

Next.js 如何进行国际化 (i18n)？