avatar

09.【个人网站】集成百度翻译功能

published_date
最新编辑 2024年09月12日
slug
tags
Website
Next.js
Notion
将百度翻译功能集成到了 Next.js 应用中。这种设置不需要单独的 Node.js 环境,因为 Next.js 已经提供了必要的 Node.js 运行时
  1. API 路由:pages/api/translate.ts 文件定义了一个 Next.js API 路由。这个路由在 Next.js 服务器端运行,使用 Node.js 环境。
  1. 服务器端翻译:lib/baidu/baiduTranslate.ts 包含了实际的翻译逻辑,它在服务器端执行,保护了您的 API 密钥。
  1. 3. 客户端集成:lib/baidu/clientTranslate.ts 和 components/TranslateComponent.tsx 允许您从客户端(浏览器)调用翻译 API。
  1. 环境变量:.env.local 文件中的环境变量会被 Next.js 自动加载,用于服务器端代码。
  1. 依赖项:package.json 中列出的依赖项(如 axios 和 crypto-js)会在 Next.js 项目中自动安装和使用。
    1. 这种设置的优点是:
      • 安全性:API 密钥保存在服务器端,不会暴露给客户端。
      • 集成性:翻译功能完全集成到您的 Next.js 应用中。
      • 便利性:不需要额外的 Node.js 服务器或脚本。
 
 
不需要单独的 translate.ts 脚本文件,因为翻译功能已经集成到了 Next.js 应用中。如果想在开发过程中测试翻译功能,可以:
  1. 使用 TranslateComponent 在页面中添加翻译功能。
  1. 在 getServerSideProps 或 getStaticProps 中使用 baiduTranslate 函数进行服务器端翻译。
要运行应用,只需使用标准的 Next.js 命令:
npm run dev   # 用于开发 npm run build # 用于构建 npm start     # 用于生产环境运行
这些命令会启动 Next.js 服务器,其中包含了翻译功能。不需要单独的 Node.js 环境或脚本来运行翻译功能。
 

About

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

Contact Me : znjessie858@gmail.com

Subscribe

Subscribe to receive notifications of my latest posts and unsubscribe at any time!