Jessie's Blog

在 Next.js 项目中，我们可以非常方便地集成百度翻译 API，而不需要额外的 Node.js 服务器。这种集成方法利用了 Next.js 自带的服务器端渲染能力，同时保证了 API 密钥的安全性。本文将介绍如何通过自定义 API 路由、服务器端翻译、客户端调用及环境变量配置等步骤，完成完整的百度翻译功能集成。

1. API 路由的定义

首先，我们需要在 pages/api/translate.ts 中定义一个 Next.js 的 API 路由。这个路由运行在 Next.js 的服务器端环境中，利用了内置的 Node.js 运行时来处理请求。这使得我们无需单独配置 Node.js 环境就可以轻松调用百度翻译 API。


// pages/api/translate.ts
import { baiduTranslate } from '../../lib/baidu/baiduTranslate';

export default async function handler(req, res) {
  const { text, from, to } = req.body;
  try {
    const translatedText = await baiduTranslate(text, from, to);
    res.status(200).json({ translatedText });
  } catch (error) {
    res.status(500).json({ error: 'Translation failed' });
  }
}

2. 服务器端翻译逻辑

lib/baidu/baiduTranslate.ts 文件中包含了调用百度翻译 API 的实际逻辑。由于这个文件运行在服务器端，因此可以安全地保存并使用 API 密钥，避免在客户端暴露。


import axios from 'axios';
import { md5 } from 'crypto-js';

export async function baiduTranslate(text, from, to) {
  const appid = process.env.BAIDU_APPID;
  const key = process.env.BAIDU_KEY;
  const salt = Math.random().toString();
  const sign = md5(`${appid}${text}${salt}${key}`).toString();
  
  const response = await axios.get('https://api.fanyi.baidu.com/api/trans/vip/translate', {
    params: {
      q: text,
      from,
      to,
      appid,
      salt,
      sign,
    }
  });

  return response.data.trans_result[0].dst;
}

3. 客户端集成

通过 lib/baidu/clientTranslate.ts 和 components/TranslateComponent.tsx，我们可以从客户端发送翻译请求并展示翻译结果。

clientTranslate.ts：


export async function clientTranslate(text, from, to) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ text, from, to }),
  });

  if (!res.ok) {
    throw new Error('Translation failed');
  }

  const { translatedText } = await res.json();
  return translatedText;
}

TranslateComponent.tsx：


import { useState } from 'react';
import { clientTranslate } from '../lib/baidu/clientTranslate';

export default function TranslateComponent() {
  const [text, setText] = useState('');
  const [translated, setTranslated] = useState('');

  const handleTranslate = async () => {
    const result = await clientTranslate(text, 'zh', 'en');
    setTranslated(result);
  };

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleTranslate}>Translate</button>
      <p>Translated: {translated}</p>
    </div>
  );
}

4. 使用环境变量

为了保护敏感信息，我们通过 .env.local 文件定义百度翻译 API 的密钥和应用 ID。这些环境变量在服务器端运行时自动加载，确保 API 密钥不会泄露到客户端。


# .env.local
BAIDU_APPID=your_appid
BAIDU_KEY=your_api_key

5. 项目依赖配置

package.json 文件中包含了所需的依赖项，包括 axios 和 crypto-js，用于处理 API 请求和加密操作。这些依赖项在安装后将自动与 Next.js 项目集成。


{
  "dependencies": {
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0"
  }
}

6. 测试翻译功能

在开发过程中，可以使用 TranslateComponent 在页面中测试翻译功能，或在 getServerSideProps 和 getStaticProps 中调用 baiduTranslate 进行服务器端翻译，确保一切正常运行。


export async function getServerSideProps() {
  const translatedText = await baiduTranslate('你好', 'zh', 'en');
  return {
    props: {
      translatedText,
    },
  };
}

7. 项目运行

集成百度翻译功能后，可以像运行普通的 Next.js 项目一样，通过以下命令启动项目，无需额外配置。


npm run dev    # 用于开发环境
npm run build  # 构建生产环境
npm start      # 运行生产环境

8. 集成的优点

这种集成方式有以下几个显著优点：

安全性：由于 API 密钥仅在服务器端使用，客户端永远不会直接接触到这些密钥，避免了安全风险。

集成性：翻译功能完全嵌入到 Next.js 的架构中，利用其现有的服务器端渲染（SSR）能力，无需额外的 Node.js 环境。

便利性：不需要单独的 translate.ts 脚本文件，所有的翻译逻辑已经与 Next.js 完美集成，提供了一站式的解决方案。

结论

通过本文介绍的步骤，可以轻松地在 Next.js 应用中集成百度翻译 API，实现高效、安全的翻译功能，并保持应用的一致性与性能优化。无需额外的 Node.js 服务器，充分利用 Next.js 提供的运行时环境和功能集成，实现功能强大的翻译体验。

09.【个人网站】在 Next.js 中集成百度翻译：无需额外的 Node.js 服务器实现安全翻译功能