随着全球化趋势的不断加速，越来越多的网站需要提供多语言支持，以满足不同地区、不同语言的用户需求。对于前端开发者来说，如何实现多语言支持是一项必要的技能。
在这篇文章中，我们将介绍如何在 Next.js 中使用翻译软件来实现多语言支持，以便在开发过程中轻松地实现翻译文本的管理和维护。
翻译软件简介
在选择翻译软件时，我们需要考虑以下几个方面：
多语言支持：能否支持多语言，包括常见的语言以及地区差异。
界面友好：易于使用且支持多人协作。
准确性：能否提供高质量的翻译，避免出现错误或误导。
兼容性：能否与我们的前端框架良好兼容，并提供相关的 API 或 SDK 支持。
综合考虑后，我们选择了 Google Translate API 作为我们的翻译软件。Google Translate API 提供了多语言支持，具有良好的准确度以及易于使用的界面，而且与 Next.js 兼容良好。
集成 Google Translate API
要使用 Google Translate API，我们需要先 创建一个 Google Cloud 服务帐号 并获取一个 API 密钥。然后，我们可以使用官方提供的 Node.js SDK 来调用 API。
下面是使用 Google Translate API 翻译文本的基本步骤：
-- -------------------- ---- -------
----- - --------- - - --------------------------------------
-- ------- - ------
----- --------- - --- ------------
----- -------- ------------------- --------------- -
----- ------- - -
--- ---------------
--
-- ---------- --- ---- ---- --- ------ -------- ----- ------ --------- ---
----- ------------- - ----- ------------------------- ---------
------ ------------
-
-- ------- -----
----- -------------- - ----- --------------------- -------- ------
---------------------------- -- -------- -- ----- --在上面的代码中，我们首先导入 @google-cloud/translate 模块，然后创建一个 Translate 实例。我们可以使用该实例来调用 translate 方法，将原始文本及目标语言作为参数传入。然后，API 会返回翻译后的文本。
在 Next.js 中使用 Google Translate API
在 Next.js 中使用 Google Translate API 非常简单。我们可以创建一个自定义的 _app.js 文件，使用 getInitialProps 方法将翻译后的字符串作为 props 传递给所有页面组件。具体实现如下：
1. 安装依赖
首先，我们需要安装 @google-cloud/translate 和 dotenv：
npm install @google-cloud/translate dotenv
2. 创建 Google Cloud 服务帐号并获取 API 密钥
请按照 官方文档 的指导步骤创建服务帐号并获取 API 密钥。
3. 在项目根目录下创建 .env 文件
在项目根目录下创建一个名为 .env 的文件，并将以下内容添加到文件中：
GOOGLE_APPLICATION_CREDENTIALS=path/to/serviceAccountKey.json
其中，path/to/serviceAccountKey.json 是我们在前一步中获取的 Google Cloud 服务帐号的 API 密钥文件路径。我们将使用 dotenv 模块读取该文件，并授权访问 Google Cloud 服务。
4. 创建一个翻译工具类
现在，我们可以创建一个名为 TranslationUtils.js 的工具类，用于封装 Google Translate API 的调用并管理缓存。以下是该类的实现：
-- -------------------- ---- -------
----- - --------- - - --------------------------------------
----- --- - ---------------------
----- ---------------- -
------------- -
-- ------- - ------
-------------- - --- ------------
-- ----------- -- --- -----
---------- - --- -----
---- -----
------- ---- - -- - --- -- - ----
---
-
----- ------------------- --------------- -
----- -------- - ----------------------------
-- ------- ------ ----- -- ------
-- -------------------------- -
------ -------------------------
-
----- ------- - -
--- ---------------
--
-- ---------- --- ---- ---- --- ------ -------- ----- ------ --------- ---
----- ------------- - ----- ------------------------------ ---------
----- -------------- - -------------------
-- ------ --- ---------- ---- -- -----
------------------------ ----------------
------ ---------------
-
-
-------------- - --- -------------------在上面的代码中，我们首先导入 @google-cloud/translate 和 lru-cache，并创建一个 Translate 实例和一个 LRU 缓存实例。我们使用 LRU 缓存来存储翻译后的文本，从而减少 API 调用次数。
然后，我们实现了一个 translateText 方法，该方法接受原始文本和目标语言作为参数，并返回翻译后的文本。该方法首先根据目标语言和原始文本生成一个唯一的缓存键，并尝试从缓存中获取已缓存的翻译结果。如果找到，则直接返回缓存结果。否则，它将调用 Google Translate API 进行翻译，并将翻译结果存储到缓存中。最后，它返回已翻译的文本。
5. 扩展 _app.js 文件
最后，我们可以扩展自定义的 _app.js 文件，使用 TranslationUtils 工具类来翻译页面文本，并将翻译后的文本作为 props 传递给页面组件。
以下是 _app.js 文件的更新内容：
-- -------------------- ---- -------
------ --- ---- -----------
------ ---------------- ---- ----------------------------
----- ----- ------- --- -
------ ----- ----------------- ---------- ---------- ------ -- -
----- - ---- - - -------------
-- ------ -
-- ---------- --------- ---- -- ------ --------
----- ------------------- - ----- -------------------------
----------
----
--
--------- - --------------------
-
----- -------- - ----- --------------------- ---------- ---------- ------ ---
------ - ------------ --------- --
-
------ ----- ----------------------------- --------------- -
-- ---- ------ --- --------- ------
----- ------------------- - --------------------------------------
-- ---------- --- ------ ---------- -- --------- -----------
----- ------------ - ----- ----- -- -
--- ------ ---- -- ---- -
----- ----- - ----------
-- ------- ----- --- --------- -
--------- - ----- ------------------------------------- ----------------
- ---- -- ------- ----- --- -------- -- ----- --- ----- -
----- --------------------
-
-
--
----- ----------------------------------
------ --------------------
-
-
------ ------- ------在上面的代码中，我们首先将 TranslationUtils 工具类导入到 _app.js 文件中。然后，我们扩展了 MyApp 类，使用 getInitialProps 方法获取页面组件的初始 props，并将它们作为参数传递给 translatePageProps 方法。
translatePageProps 方法首先对 pageProps 进行深度克隆，然后使用递归算法遍历所有字符串类型的属性，并调用 TranslationUtils.translateText 方法进行翻译。最后，它返回翻译后的页面属性对象。
在 getInitialProps 方法中，我们根据路由参数中的 lang 值，获取用户请求的目标语言。如果目标语言存在，则调用 translatePageProps 方法翻译页面组件的初始 props，并将翻译后的结果赋值给 pageProps。
最后，我们使用 App.getInitialProps 方法获取原始的 appProps，并将翻译后的 pageProps 与之合并并返回。
现在，我们可以从任何页面组件中访问翻译后的文本，例如：
-- -------------------- ---- -------
-------- ---------- ------- -- -
------ -
-----
-------------------------
--------------------------
------
--
-
--------------------- - -
-------- -
------- ------- --------
---------- ----- -- - ------ ------------
--
--
------ ------- ---------在上面的代码中，我们将 content 作为 props 传递给页面组件，并将其渲染为标题和段落文本。我们将 HomePage 组件默认的 content 值设置为一个包含英文文本的对象。但是，由于我们已经在 _app.js 文件中实现了翻译功能，因此无论用户选择的目标语言是什么，我们都可以获得翻译后的文本。
总结
在本文中，我们介绍了在 Next.js 中使用 Google Translate API 来实现多语言支持的方法。我们使用 Node.js 中间件和 LRU 缓存技术来提高 API 调用性能。最后，我们将该功能通过扩展自定义的 _app.js 文件轻
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502e26a95b1f8cacd013acd