随着全球化的发展,使用多语言网站已经成为大多数公司的标准做法。在前端开发中,国际化(i18n)已经成为不可或缺的一部分,它能够帮助我们为全球受众提供更好的用户体验。Next.js 是一个流行的 React 框架,它提供了一种简单但强大的方法来实现国际化。
安装和配置
在 Next.js 中使用 i18n 首先需要安装 next-i18next
包,这是一个封装了 i18next 的 Next.js 插件。可以通过以下命令进行安装:
npm install --save next-i18next i18next i18next-browser-languagedetector
在 next-i18next
插件被推出时,它将其安装指南的整个部分分为一组分步骤。这是因为 i18next 有很多设置,本文节选了一些关键的配置。其他更深入的设置可参见文档。
初始化 i18n
如果你使用的是默认设置,可以在 i18n.js
中进行以下配置:
// i18n.js const NextI18Next = require('next-i18next').default; module.exports = new NextI18Next({ defaultLanguage: 'en', otherLanguages: ['de'], localePath: 'public/locales', });
上述代码中,配置了默认语言为英语,其他语言为德语,locales 文件夹放在根目录下的 public
文件夹。
初始化插件
在 Next.js 中使用 i18n 需要按照以下步骤初始化插件:
-- -------------------- ---- ------- -- -------------- ----- - ------------------- - - --------------------------------- ----- -------------- - - --- ----- --- ----- -- -------------- - - --------- ----- -- -- ------------------------------------ -------------------- - --------------- -- --
上述代码中,我们使用 nextI18NextRewrites
和 publicRuntimeConfig
,以确保 Next.js 能够理解 URL 中的语言子路径。这允许我们将语言代码嵌入 URL 中,以实现更好的可操作性。例如,对于英语网站,我们可以将 http://localhost:3000/about
转换为 http://localhost:3000/en/about
。
要允许 Next.js 在构建时自动生成这些重写,需要向你的的 next.config.js
文件中添加以下内容:
-- -------------------- ---- ------- -- -------------- ----- - ---- - - -------------------------------- -------------- - - -- --- --------- ----- -- -- - ------ --------- -------------------------- - -- --- -
使用 i18nProvider 组件
在你的 _app.js
文件中导入 i18nProvider
组件,并向其添加 nextI18Next
插件作为参数,如下所示:
-- -------------------- ---- ------- -- ------- ------ ----- ---- -------- ------ --- ---- ----------- ------ - ------------------ - ---- --------------- ------ - --------------- - ---- ---------------- ------ - ---------------- - ---- ---------------- ------ ---- ---- --------- -------- ------- ---------- ---------- ---- -- - ------ ---------- -------------- --- - --------------------- - ----- ------------ -- -- -------- -------------------------------- --- ------ ------- -------------------------------------------------------
上述代码中,我们首先将 i18nProvider
和 appWithTranslation
进行封装,然后向 MyApp
组件传递 i18n
对象。
创建语言文件
我们为每种语言创建一个独立的 JSON 文件,并放在 locales
目录下。每个文件都应该具有与默认语言相同的键。例如,对于英语文件可以写成这样:
{ "header": "Welcome to my website! I'm really excited to show you around.", "nav": { "home": "Home", "blog": "Blog", "contact": "Contact" } }
对于德语文件可以写成这样:
{ "header": "Willkommen auf meiner Website! Ich freue mich sehr, Ihnen herumzuführen.", "nav": { "home": "Zuhause", "blog": "Blog", "contact": "Kontakt" } }
页面中使用
通过 withTranslation
高阶组件,可以将多语言内容传递给 React 组件。例如,在下面示例中,我们在 MyComponent
组件中使用 t
方法从语言文件中获取值:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------------- - ---- --------------- -------- ------------- - -- - ------ - ----- ---------------------- ----- ---- ------------------------ ------------------------ --------------------------- ----- ------ ------ - - ------ ------- ---------------------------------------
我们在 withTranslation
方法中传入 'common'
,这告诉 withTranslation
使用我们之前创建的 common.json
文件。在 MyComponent
组件中,我们使用 t
方法来获取语言文件中的文本。
总结
在本文中,我们详细介绍了在 Next.js 中使用 i18n 的实现方式,这对于构建具有多语言支持的网站非常重要。从安装、初始化到页面中使用,我们解释了如何在 Next.js 中实现 i18n。虽然这只是一个基本例子,但是相信它可以帮助您快速开始使用 i18n,并在以后发展您的应用程序时进行适当的扩展。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64d44bf9b5eee0b525bd4421