DeepSeek API 接入文档（Next.js 项目）

本教程将详细说明如何在一个基于 Next.js + Flask的全栈乳腺癌预测项目中接入 DeepSeek API 实现 AI 解析功能。该方案强调安全性、可维护性和用户体验。

📦 技术栈要求

• 前端：Next.js 14（App Router 架构）、React 18、TypeScript
• 后端：Flask + scikit-learn（用于预测）
• 目标：接入 DeepSeek AI 接口，解释预测结果

---

🧱 项目结构说明

frontend/
├── src/
│   ├── app/
│   │   └── api/
│   │       └── deepseek/
│   │           └── route.ts     # Next.js API 路由中转
│   ├── services/
│   │   └── deepseek.ts          # 前端调用封装
│   └── app/result/page.tsx      # 预测结果页面

---

✨ 功能实现概览

1. 创建环境变量

在 frontend/.env.local 中添加：

DEEPSEEK_API_KEY=你的真实API密钥

---

2. 编写 Next.js API 路由

路径：frontend/src/app/api/deepseek/route.ts

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const res = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': \`Bearer \${process.env.DEEPSEEK_API_KEY}\`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: [{ role: 'user', content: prompt }],
    }),
  });

  const data = await res.json();
  return Response.json({ content: data.choices?.[0]?.message?.content ?? 'AI 没有返回有效内容' });
}

---

3. 封装前端调用函数

路径：frontend/src/services/deepseek.ts

export const fetchAIAnalysis = async (prompt: string): Promise<string> => {
  try {
    const res = await fetch('/api/deepseek', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    });

    const data = await res.json();
    return data.content;
  } catch (error) {
    console.error('调用 DeepSeek API 失败:', error);
    throw error;
  }
};

---

4. 在结果页调用解析功能

路径：frontend/src/app/result/page.tsx

添加依赖：

pnpm add react-markdown

引入组件：

import ReactMarkdown from 'react-markdown';
\`\`\`

#### 使用组件渲染 Markdown：
\`\`\`tsx
{aiResponse && (
  <Card title="AI解析结果" style={{ marginTop: 24, maxWidth: '600px' }}>
    <ReactMarkdown
      children={aiResponse}
      components={{
        h3: ({ node, ...props }) => <Title level={3} {...props} />,
        p: ({ node, ...props }) => <Paragraph {...props} />,
        li: ({ node, ...props }) => <li style={{ marginBottom: 4 }} {...props} />,
      }}
    />
  </Card>
)}

添加按钮调用逻辑：

const handleAIExplain = async () => {
  setAiLoading(true);
  try {
    const prompt = \`请解释以下乳腺癌预测结果：\${resultText}\`;
    const result = await fetchAIAnalysis(prompt);
    setAIResponse(result);
  } catch (err) {
    message.error('AI解析失败，请稍后重试');
  } finally {
    setAiLoading(false);
  }
};

---

🔁 数据流 & 执行流程

用户点击“AI解析”按钮
  ↓
构建 prompt 文本
  ↓
前端调用 fetchAIAnalysis()
  ↓
请求发至 /api/deepseek（Next.js 路由）
  ↓
API 路由调用 DeepSeek 接口
  ↓
返回 AI 解释结果（Markdown）
  ↓
前端用 react-markdown 渲染输出

---

✅ 优点总结

• 安全性：API 密钥不暴露在前端
• 可维护性：清晰分层，职责划分明确
• 用户体验：反馈及时，排版优雅
• 可扩展性：支持更多 AI 功能（对话、多轮问答等）

---

如需添加多轮对话、缓存机制、用户提问入口等功能，请继续扩展 prompt 构造逻辑与组件结构。

-------------本文结束感谢您的阅读-------------

本文作者： 金金
本文链接： http://example.com/2025/04/23/DeepSeek-API-接入文档（Next-js-项目）/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！