如何在 Next.js 中使用 next-i18next 处理多语言
随着全球化的发展，越来越多的网站需要支持多语言。在前端开发中，处理多语言是一项必不可少的技能。Next.js 是一个流行的 React 框架，它提供了许多便捷的功能，包括处理多语言的能力。在本文中，我们将介绍如何在 Next.js 中使用 next-i18next 处理多语言。
首先，我们需要安装 next-i18next 和 i18next：
npm install next-i18next i18next
接下来，我们需要在 Next.js 中配置 next-i18next。在项目根目录下创建一个名为 i18n.js 的文件，然后添加以下代码：
const NextI18Next = require('next-i18next').default;
const path = require('path');
module.exports = new NextI18Next({
defaultLanguage: 'en',
otherLanguages: ['zh'],
localePath: path.resolve('./public/static/locales'),
});上面的代码中，我们指定了默认语言为英语，支持的其他语言为中文。同时，我们将语言文件存放在 ./public/static/locales 目录下。
在 Next.js 中使用 next-i18next 需要创建一个高阶组件。在项目根目录下创建一个名为 withTranslation.js 的文件，并添加以下代码：
import { withTranslation } from 'next-i18next';
export default withTranslation('common');上面的代码中，我们使用 withTranslation 函数创建了一个高阶组件，并指定了默认的翻译文件为 common。
接下来，我们需要创建语言文件。在 ./public/static/locales 目录下创建一个名为 en.json 的文件，并添加以下代码：
{
"title": "Hello, world!"
}在同一目录下创建一个名为 zh.json 的文件，并添加以下代码：
{
"title": "你好，世界！"
}现在，我们已经准备好了多语言的基础设施。接下来，我们将创建一个简单的 Next.js 页面，演示如何使用 next-i18next 处理多语言。
在 pages 目录下创建一个名为 index.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ----------
----- ---- - -- - -- -- -
------ -
-----
---------------------
------
--
--
------ ------- --------------------------------上面的代码中，我们使用 withTranslation 函数将 Home 组件转换为支持多语言的组件。在 Home 组件中，我们使用 t 函数获取翻译后的字符串，然后将其显示在页面上。
现在，我们已经完成了一个简单的多语言页面。当用户访问该页面时，next-i18next 会根据用户的浏览器语言自动选择合适的翻译文件。
总结
在本文中，我们介绍了如何在 Next.js 中使用 next-i18next 处理多语言。我们首先安装了 next-i18next 和 i18next，然后配置了 next-i18next，创建了一个高阶组件，并创建了语言文件。最后，我们演示了如何在 Next.js 页面中使用 next-i18next 处理多语言。
处理多语言是前端开发中的一项必不可少的技能。掌握了 next-i18next，你可以轻松地为你的网站添加多语言支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cdbf32add4f0e0ff6ec65f