必须在服务端api路由(app/api/hunyuan/route.ts)中调用腾讯混元api,严禁前端直连;需用sdk或手动签名、密钥仅存环境变量、请求设application/json头,支持sse流式响应以避免内存超限。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要在 Next.js 项目中调用腾讯混元大模型 API 实现智能问答、内容生成等能力,必须绕过浏览器同源限制与 CORS 策略,不能在客户端直接发起请求,否则会返回 403 或预检失败。
创建服务端 API 路由接收前端请求
进入 app/api/hunyuan/route.ts(App Router 方式),新建一个 POST 路由文件。
用 export async function POST() 定义处理函数,确保该路由运行在服务端环境——Next.js 的 Route Handler 默认在 Edge Runtime 或 Node.js Runtime 执行,可安全携带密钥。
这一步不可跳过:若误建在 pages/api/ 下且项目已启用 App Router,可能触发混合渲染错误;若建在客户端组件内 fetch,必然因跨域被拦截。
配置腾讯云认证凭证与请求参数
从腾讯云控制台获取 【SecretId 和 SecretKey】,并开通混元大模型服务(hunyuan-standard 或 hunyuan-pro)。
在路由文件中,使用 @tencentcloud/common 和 @tencentcloud/hunyuan SDK(v3.0.11+),或手动构造签名请求——推荐 SDK,避免自行实现签名逻辑出错导致 401。
注意:SecretKey 绝对不能写死在前端代码或 .env.local 中暴露给浏览器;必须只存在于服务端环境变量,例如 process.env.TENCENT_SECRET_KEY,并在 next.config.js 中通过 serverRuntimeConfig 或直接读取系统环境变量加载。
从前端调用服务端接口并传递用户输入
在页面组件中,使用 useEffect 或按钮点击事件触发 fetch('/api/hunyuan', { method: 'POST', body: JSON.stringify({ prompt: userInput }) })。
这一步操作起来很简单,直接把用户输入的文本作为 JSON 字段发过去就行。
必须确保 Content-Type: application/json 已设置,否则腾讯云后端无法解析 body;若漏掉,会返回 InvalidParameter.MalformedJSON 错误。
处理流式响应(可选但推荐)
方法一:启用 SSE(Server-Sent Events)
在 Route Handler 中设置 headers: { 'Content-Type': 'text/event-stream' },用 stream 模块逐 chunk 返回 data: {...},前端用 EventSource 接收。
方法二:使用 transformStream 将混元 API 的流式 response 直接透传,避免内存积压——这对长文本生成尤其关键,否则大响应体可能触发 Vercel Serverless 函数 5MB 内存限制。
方法三:退化为普通 JSON 响应,等待完整结果再返回;适合短提示、低延迟场景,但用户感知卡顿明显。











