nextjs 14 实现i18n 国际化

本文主要是介绍nextjs 14 实现i18n 国际化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

对于 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.jsimport { 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.jsimport { useTranslation } from 'next-i18next';function MyComponent() {const { t } = useTranslation('common');return (<div><h1>{t('hello')}</h1></div>);
}export default MyComponent;

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

这篇关于nextjs 14 实现i18n 国际化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---