nextjs 14 实现i18n 国际化

最新推荐文章于 2025-11-01 10:22:49 发布

原创最新推荐文章于 2025-11-01 10:22:49 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在Next.js14版本中使用next-i18next库实现应用程序的多语言支持，包括安装配置、_app.js和组件中使用翻译的方法，以及创建和管理不同语言的JSON文件。

对于 Next.js 14，可以使用 next-i18next 库来实现国际化（i18n）。这个库可以帮助你在 Next.js 应用程序中轻松地管理多语言内容。你可以按照以下步骤来实现 i18n：

首先，安装 next-i18next 库：
npm install next-i18next
在 Next.js 项目中创建一个 i18n.js 文件，并配置语言设置。例如：

// i18n.js
const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['fr'],
  localePath: path.resolve('./public/locales')
});

在 _app.js 文件中使用 appWithTranslation 高阶组件包装应用程序组件。例如：

// _app.js

import { appWithTranslation } from 'next-i18next';
import { i18n } from '../i18n';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

创建一个 public/locales 目录，并在其中为每种语言创建对应的 JSON 文件。例如，en.json 和 fr.json。

在页面组件中，可以使用 useTranslation 钩子来访问翻译内容。例如：

// MyComponent.js

import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');
  
  return (
    <div>
      <h1>{t('hello')}</h1>
    </div>
  );
}

export default MyComponent;