Next.js + AI-SDK + DeepSeek：3 分钟建设属于你的 AI 问答 Demo

作者：leongaooo | 计算机科学家（出来混，身份都是自己给的）日期：2025-09-21

缘起：三件法宝

Next.js：前端 SSR/CSR 混合魔法师。
AI-SDK：AI 交互的"红娘"，让你与模型对话像喝茶一样轻松。
DeepSeek：国产大模型，聪明又便宜，支持流式推理。

底层原理解读

1. Next.js 的渲染机制

SSR（服务器端渲染）：服务端"炒菜"，浏览器"吃饭"。
CSR（客户端渲染）：浏览器自助餐，交互流畅。

2. AI-SDK 的消息流与模型交互

消息会被序列化为 Token（就像把句子拆成拼音）。
"流式响应"让答案像流水一样边想边发，体验更丝滑。

3. DeepSeek 的推理方式

输入经过分词，映射到高维空间。
Transformer 网络结构，"自注意力"机制让模型像一群哲学家讨论，最终给出一个"群体智慧"的答案。
流式输出，边想边说，像相声演员即兴表演。

极速搭建：实战代码

依赖安装

先装好三兄弟：

bash 复制代码

npm install next @ai-sdk/deepseek @ai-sdk/react ai

服务端 API 路由（app/api/chat/route.ts）

文件路径：app/api/chat/route.ts

用于处理前端发来的消息，实现流式 AI 响应。

typescript 复制代码

import { createDeepSeek } from '@ai-sdk/deepseek';
import { streamText, convertToModelMessages } from 'ai';
import type { UIMessage } from 'ai';

const deepseek = createDeepSeek({
  apiKey: process.env.DEEPSEEK_API_KEY ?? '',
});

// 允许最多 30 秒流式回复
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  // "人类发问，AI应答"的灵魂对话
  const result = streamText({
    model: deepseek('deepseek-chat'),
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

客户端 Chat 组件（app/chat/page.tsx）

文件路径：app/chat/page.tsx

实现问答 UI，支持流式显示 AI 回复。

typescript 复制代码

"use client";

import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage } = useChat();

  return (
    <div className="stretch mx-auto flex w-full max-w-md flex-col py-24">
      {messages.map((message) => (
        <div key={message.id} className="whitespace-pre-wrap">
          {message.role === "user" ? "User: " : "AI: "}
          {message.parts.map((part, i) => {
            switch (part.type) {
              case "text":
                return <div key={`${message.id}-${i}`}>{part.text}</div>;
            }
          })}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input
          className="fixed bottom-0 mb-8 w-full max-w-md rounded border border-zinc-300 p-2 shadow-xl dark:border-zinc-800 dark:bg-zinc-900"
          value={input}
          placeholder="Say something..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
      </form>
    </div>
  );
}

环境变量配置

在项目根目录新建 .env.local：

ini 复制代码

DEEPSEEK_API_KEY=你的_deepseek_api_key

目录结构简要

lua 复制代码

your-project/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts
│   └── chat/
│       └── page.tsx
├── .env.local
├── package.json
└── ...

幕后故事：代码里的"灵魂对话"

你输入问题，像在黑夜里向宇宙喊话；
前端把你的"呐喊"送到后端，"信使"忠诚可靠；
后端用 AI-SDK 去敲 DeepSeek 的"智慧之门"，请求答案；
DeepSeek 模型像一群小脑袋风暴思考，边想边说，流式输出；
最后，答案如诗如歌，实时呈现。

进阶思考

可扩展为多模态问答，加图片、语音，体验更丰富；
用向量数据库增强上下文，"AI记住你每一句话"；
接入 WebSocket，实现边打字边回复，"实时灵感碰撞"；
模型推理其实就是大量"加权平均"，每个"虚拟脑细胞"都有自己的小意见，最终合力成答案。

结语

三分钟，Next.js + AI-SDK + DeepSeek，自己的 AI 问答 Demo"闪现"上线。

愿你在代码的世界里，既能仰望星空，也能脚踏实地，偶尔还能和 AI 一起吐槽生活！

"代码如诗，AI如梦。Demo虽小，世界很大。"