nextjs 14 实现i18n 国际化_next-i18next

对于 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')
});
1
2
3
4
5
6
7
8

在 _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);
1
2
3
4
5
6
7
8
9
10

创建一个 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

通过这些步骤，就可以在Next.js 14中实现国际化。