【学习资料】Next.js 15 多语言支持初探：使用 next-intl 打造轻松国际化体验

引言

随着项目的国际化需求增加，前端框架中配置多语言支持变得尤为重要。Next.js 15 引入了更多的功能，而 next-intl 作为强大的国际化库，简化了多语言管理的繁琐流程。在这篇文章中，我们将一同探索如何在 Next.js 15 中轻松配置并使用 next-intl！

1. 准备工作：安装 next-intl

首先，我们需要将 next-intl 安装到项目中，这个安装步骤会为项目的多语言功能奠定基础。

npm install next-intl

2. 配置 next-intl：创建消息文件

使用 next-intl 的核心是将不同语言的文本存储在消息文件中。我们可以在 locales 文件夹中创建对应语言的 JSON 文件，如 locales/en.json 和 locales/zh.json。

英文（en.json）：

{
  "greeting": "Hello, welcome to our site!"
}

中文（zh.json）：

{
  "greeting": "你好，欢迎来到我们的网站！"
}

这样就完成了语言资源的准备，方便在项目中调用。

3. 配置 next-intl 的国际化提供者

接下来，我们需要在应用的根目录下配置 next-intl 提供的 NextIntlProvider，这样可以在全局范围内访问多语言文本。

代码示例（_app.js）：

import { NextIntlProvider } from 'next-intl';
import { useRouter } from 'next/router';
import enMessages from '../locales/en.json';
import zhMessages from '../locales/zh.json';

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();
  const messages = locale === 'zh' ? zhMessages : enMessages;

  return (
    <NextIntlProvider messages={messages} locale={locale}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

export default MyApp;

解释：根据 locale，我们动态加载对应的消息文件，并传递给 NextIntlProvider，这样项目的每个组件都可以轻松访问多语言数据。

4. 在组件中使用多语言文本

完成配置后，可以在组件中使用 useTranslations hook 获取多语言文本。

代码示例：

import { useTranslations } from 'next-intl';

function HomePage() {
  const t = useTranslations();

  return <h1>{t('greeting')}</h1>;
}

export default HomePage;

解释：通过 useTranslations 获取 t 函数，只需传入键值即可在界面中渲染对应的多语言内容。

5. 切换语言

在 Next.js 中，使用 useRouter 可以简单实现语言切换。通过更改 locale 参数，就可以改变应用的语言环境。

代码示例：

import { useRouter } from 'next/router';

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

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

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default LanguageSwitcher;

解释：在点击按钮后，我们通过 router.push 更新 locale，进而切换应用语言。next-intl 会自动根据新的 locale 渲染正确的语言内容。

6. 总结

使用 next-intl 为 Next.js 项目添加国际化支持变得如此简单。从安装、配置到实现语言切换，next-intl 都提供了清晰直观的方式。希望大家能在项目中轻松使用它，让你的应用迎接来自全球的用户吧！