Next.js 13+ 整合 AI 功能入门指南

Ethan独立开发
396 阅读3分钟

最近在做项目的时候，遇到了一个有趣的需求：客户想在他们的电商平台中加入智能客服功能。作为一个 Next.js 的重度用户，我第一反应就是用 Next.js 来实现这个功能。但实际开发过程中还是踩了不少坑，今天就来分享下我的实战经验。

为什么我选择了 Next.js？

老实说，最开始我也在纠结要不要用纯前端方案。但是在实际开发中发现，Next.js 确实有几个无可替代的优势：

  1. 服务端组件真的是救星

    • API 密钥再也不用担心泄露了（被坑过）
    • 性能也比纯客户端好太多
    • 搜索引擎优化也不用愁了

  2. API 路由超级方便

    • 再也不用单独部署后端服务了
    • 开发效率直接提升一倍
    • 部署和维护都简单了很多

  3. Vercel 部署无痛

    • 说实话，被其他平台部署折腾怕了
    • 开发环境和生产环境配置一致性好
    • 免费额度对于小项目够用

从零开始搭建

温馨提示：确保你的 Node.js 版本 >= 16.8.0，不然会遇到一些莫名其妙的问题（踩过坑）。

  1. 创建 Next.js 项目
npx create-next-app@latest my-ai-app
cd my-ai-app
  1. 安装必要依赖
npm install openai
  1. 配置环境变量
OPENAI_API_KEY=your_api_key_here

实现 AI 聊天功能

说实话，最开始我想得太简单了，以为直接调用 OpenAI 的 API 就完事了。结果发现有很多细节需要处理，比如：

  • 如何处理流式响应
  • 用户输入的验证和过滤
  • 错误重试机制
  • 并发请求限制

来看看我的解决方案：

// app/api/chat/route.ts
import { Configuration, OpenAIApi } from 'openai'
import { NextResponse } from 'next/server'
import { rateLimiter } from '@/lib/rate-limiter'  // 别忘了限流

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
})

const openai = new OpenAIApi(configuration)

export async function POST(req: Request) {
  try {
    // 先检查请求频率
    const { success } = await rateLimiter.check(req)
    if (!success) {
      return NextResponse.json(
        { error: '请求太频繁，请稍后再试' },
        { status: 429 }
      )
    }

    const { messages } = await req.json()
    
    // 验证用户输入
    if (!messages || !Array.isArray(messages) || messages.length === 0) {
      return NextResponse.json(
        { error: '无效的输入' },
        { status: 400 }
      )
    }

    const completion = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages,
      temperature: 0.7,  // 根据实际需求调整，我发现 0.7 比较合适
    })

    return NextResponse.json(completion.data.choices[0].message)
  } catch (error: any) {
    console.error('Chat API Error:', error)
    
    // 细化错误处理
    if (error.response?.status === 429) {
      return NextResponse.json(
        { error: '当前请求较多，请稍后再试' },
        { status: 429 }
      )
    }
    
    return NextResponse.json(
      { error: '服务器开小差了，请重试' },
      { status: 500 }
    )
  }
}

实战踩坑记录

  1. API 密钥问题

    • ❌ 千万不要把密钥放在前端代码里（我就干过这事）
    • ✅ 用环境变量，而且生产环境要单独配置
    • ✅ 考虑用 API 代理，避免直接暴露 OpenAI 域名

  2. 性能优化

    • 加入合适的缓存策略
    • 对于重复问题，可以缓存响应
    • 用户输入防抖很重要

  3. 用户体验

    • 一定要加 loading 状态
    • 错误提示要友好
    • 考虑移动端适配

项目实战经验

分享一些我在实际项目中总结的经验：

  1. 关于模型选择

    • 3.5 够用的话就用 3.5，便宜
    • 根据实际场景调整 temperature
    • 注意控制 token 用量

  2. 部署注意事项

    • Vercel 的函数超时是 10s，注意处理
    • 环境变量要提前配置好
    • 建议配置错误监控

  3. 成本控制

    • 设置合理的速率限制
    • 监控 API 调用量
    • 缓存常见问题的回答

写在最后

这是我第一次在项目中使用 AI 功能，确实踩了不少坑，但收获也很多。如果你也在考虑在项目中加入 AI 功能，希望我的经验能帮到你。

有什么问题欢迎在评论区讨论，我们一起学习进步！

如果觉得有帮助，别忘了点赞关注，我会继续分享更多实战经验~

avatar
文章
阅读
粉丝