在开发多语言网站时，我们需要为用户提供多种语言的选择，以让他们以自己擅长的语言来使用网站。Next.js 是一个流行的 React 框架，它提供了许多功能，使开发多语言网站变得更加轻松和高效。
在本文中，我们将探讨如何在 Next.js 中添加多语言支持，以及如何在代码中使用这些翻译文本。我们将介绍使用 Next.js 内置的 i18n 和 react-i18next 库两种方法。
i18n
Next.js 提供了一个内置的 i18n 模块，可以轻松地为应用程序添加多语言支持。我们可以使用它来翻译网站中的文本，并针对用户的语言设置正确的本地化设置。
安装
首先，我们需要安装 i18n：
npm install --save i18n
或者
yarn add i18n配置
接下来，我们需要在 Next.js 应用程序的根目录中创建一个 i18n.js 文件，并添加以下代码：
-- -------------------- ---- ------- ----- ---- - --------------- ---------------- -------- ------ ----- ------ ---------- ----------------------- -------------- ----- --------------- ----- --------------- ------ -- -------------- - ----展开代码
- 此代码设置 i18n 配置：
- locales 是要支持的所有语言的数组。
- 目录是存储翻译文件的目录。
- 默认区域设置是英语。
- 对象表示法允许我们在代码中使用点表示法来访问翻译。
- 查询参数是当前语言的查询参数。
接下来，我们需要在 locales 目录中创建每种语言的文件。 例如：locales/en.json、locales/fr.json 和 locales/es.json。
下面是一个例子：
{ "hello": "Hello", "world": "World" }
使用
有两种方法可以在 Next.js 中使用 i18n 来翻译文本。
- 使用 res.locals：
const i18n = require('./i18n') app.get('/', (req, res) => { res.locals.__ = (...args) => i18n.__.apply(req, args) res.render('index') })
- 使用变量:
const i18n = require('./i18n') app.get('/', (req, res) => { const __ = i18n.__ res.render('index', { __ }) })
在 React 中使用 i18n
import { useTranslation } from 'react-i18next' function MyComponent() { const { t } = useTranslation() return <h1>{t('hello')}</h1> }
react-i18next
react-i18next 是 Next.js 上使用的另一个流行的多语言库。 它允许我们在 React 中轻松地翻译文本，同时充分利用了 i18next 的所有功能。
安装
我们可以使用 npm 或 yarn 安装 react-i18next：
npm install --save react-i18next
或者
yarn add react-i18next
配置
我们需要在应用程序的顶部添加 I18nextProvider 来设置 react-i18next。 我们还需要创建翻译文件并将它们放在 public/locales 目录中。
-- -------------------- ---- ------- ------ ---- ---- --------- ------ - ---------------- - ---- --------------- --------------------------------- ---------- - --- - ------------ - ------ -------- ------ ------- - -- --- - ------------ - ------ ---------- ------ ------- - - -- ---- ----- ------------ ----- -------------- - ------------ ----- - -- ------ ------- ----展开代码
使用
我们可以将我们的组件捆绑起来并让它们使用 react-i18next：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - --------------- - ---- --------------- ----- ----------- ------- --------------- - -------- - ----- - - - - ---------- ------ --------------------- - - ------ ------- ------------------------------展开代码
或者使用 withTranslation hook：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - -------------- - ---- --------------- -------- ------------- - ----- - - - - ---------------- ------ --------------------- - ------ ------- -----------展开代码
这里只是介绍了 Next.js 处理多语言的一部分，有关如何在应用程序中使用 i18n 和 react-i18next 的更多信息，请查看它们的官方文档。 通过为用户提供多种语言的选择，可以大大提高我们网站吸引和留存用户的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c0cb9c314edc26847ba6d3
