03-技术选型背后的思考：为什么选择Next.js + FastAPI + LangChain

技术选型背后的思考：为什么选择Next.js + FastAPI + LangChain

前言

技术选型是项目成败的关键。本文将深入分析我们在构建AI Agent框架时的技术选型思路，以及每个技术栈的优劣对比。

适合读者：技术Leader、架构师、全栈开发者

一、技术选型的核心原则

1.1 选型标准

✅ 成熟度 - 生产环境验证 ✅ 社区活跃度 - 问题能快速解决 ✅ 性能 - 满足业务需求 ✅ 学习曲线 - 团队能快速上手 ✅ 生态完整性 - 周边工具丰富

1.2 避免的陷阱

❌ 盲目追新 - 选择不成熟的技术 ❌ 过度设计 - 使用过于复杂的方案 ❌ 技术债务 - 选择即将淘汰的技术 ❌ 供应商锁定 - 过度依赖某一厂商

二、Frontend：为什么选择Next.js？

2.1 候选方案对比

2.2 Next.js的核心优势

1. 服务端渲染（SSR）

// pages/chat/[id].tsxexportasyncfunctiongetServerSideProps(context){const{id}=context.params;// 服务端获取数据constconversation=awaitfetchConversation(id);return{props:{conversation}};}// 优势：// ✅ SEO友好// ✅ 首屏加载快// ✅ 更好的用户体验

2. 文件系统路由

pages/ ├── index.tsx → / ├── login.tsx → /login ├── register.tsx → /register └── chat/ ├── index.tsx → /chat └── [id].tsx → /chat/:id // 优势： // ✅ 无需配置路由 // ✅ 代码组织清晰 // ✅ 动态路由支持

3. API Routes

// pages/api/health.tsexportdefaultfunctionhandler(req,res){res.status(200).json({status:'ok'});}// 优势：// ✅ 前后端一体化// ✅ 无需单独部署API// ✅ 适合BFF模式

4. 优秀的开发体验

# 热更新npmrun dev# 修改代码即时生效# TypeScript支持# 自动类型推导、智能提示# 优势：# ✅ 开发效率高# ✅ 类型安全# ✅ 错误提示友好

2.3 实际应用示例

// app/chat/page.tsx'use client'import{useState,useEffect}from'react'import{useRouter}from'next/navigation'import{sendMessageStream}from'@/services/chat'exportdefaultfunctionChatPage(){constrouter=useRouter()const[messages,setMessages]=useState([])const[inputValue,setInputValue]=useState('')consthandleSend=async()=>{letassistantMessage=''awaitsendMessageStream(conversationId,inputValue,(token)=>{// 实时接收TokenassistantMessage+=tokensetMessages(prev=>[...prev,{role:'assistant',content:assistantMessage}])},()=>{// 完成console.log('Done')})}return(<div className="flex h-screen">{/* Chat UI */}</div>)}

三、CSS框架：为什么选择TailwindCSS？

3.1 候选方案对比

3.2 TailwindCSS的优势

1. 原子化CSS

// 传统CSS <div className="chat-message"> <div className="avatar"></div> <div className="content"></div> </div> // TailwindCSS <div className="flex space-x-3 p-4 bg-white rounded-lg shadow"> <div className="w-8 h-8 bg-blue-500 rounded-full"></div> <div className="flex-1 text-sm text-gray-700"></div> </div> // 优势： // ✅ 无需命名class // ✅ 样式即文档 // ✅ 无CSS文件

2. 响应式设计

<div className=" w-full /* 移动端全宽 */ md:w-1/2 /* 平板半宽 */ lg:w-1/3 /* 桌面1/3宽 */ p-4 /* 内边距 */ md:p-6 /* 平板更大内边距 */ "> 响应式内容 </div>

3. 暗黑模式

<div className=" bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 "> 自动适配暗黑模式 </div>

四、Backend：为什么选择FastAPI？

4.1 候选方案对比

4.2 FastAPI的核心优势

1. 高性能异步

fromfastapiimportFastAPIimporthttpx app=FastAPI()@app.get("/users/{user_id}")asyncdefget_user(user_id:int):# 异步HTTP请求asyncwithhttpx.AsyncClient()asclient:response=awaitclient.get(f"https://api.example.com/users/{user_id}")returnresponse.json()# 性能对比：# FastAPI (异步): 10000+ QPS# Flask (同步): 1000+ QPS# Django (同步): 500+ QPS

2. 自动API文档

frompydanticimportBaseModelclassUser(BaseModel):id:intusername:stremail:str@app.post("/users",response_model=User)asyncdefcreate_user(user:User):"""创建用户"""returnuser# 自动生成：# - Swagger UI: http://localhost:8000/docs# - ReDoc: http://localhost:8000/redoc# - OpenAPI Schema: http://localhost:8000/openapi.json

3. 类型验证

frompydanticimportBaseModel,EmailStr,validatorclassUserCreate(BaseModel):username:stremail:EmailStr password:str@validator('password')defpassword_strength(cls,v):iflen(v)<8:raiseValueError('密码至少8位')returnv@app.post("/register")asyncdefregister(user:UserCreate):# 自动验证：# ✅ username必须是字符串# ✅ email必须是有效邮箱# ✅ password至少8位return{"msg":"注册成功"}

4. 依赖注入

fromfastapiimportDependsfromsqlalchemy.ext.asyncioimportAsyncSessionasyncdefget_db()->AsyncSession:"""数据库会话依赖"""asyncwithasync_session()assession:yieldsession@app.get("/users")asyncdefget_users(db:AsyncSession=Depends(get_db)):# 自动注入数据库会话result=awaitdb.execute(select(User))returnresult.scalars().all()

4.3 SSE流式支持

fromfastapi.responsesimportStreamingResponseimportasyncio@app.get("/stream")asyncdefstream():asyncdefevent_generator():foriinrange(10):yieldf"data:{i}\n\n"awaitasyncio.sleep(1)returnStreamingResponse(event_generator(),media_type="text/event-stream")# 优势：# ✅ 原生支持SSE# ✅ 异步生成器# ✅ 低延迟

五、Database：为什么选择PostgreSQL？

5.1 候选方案对比

5.2 PostgreSQL的优势

1. 强大的数据类型

-- JSON类型CREATETABLEconversations(idSERIALPRIMARYKEY,metadata JSONB-- 支持JSON查询和索引);-- 数组类型CREATETABLEusers(idSERIALPRIMARYKEY,tagsTEXT[]-- 字符串数组);-- 全文搜索CREATEINDEXidx_contentONmessagesUSINGgin(to_tsvector('chinese',content));

2. 事务支持

asyncwithdb.begin():# 创建对话conversation=Conversation(title="新对话")db.add(conversation)awaitdb.flush()# 创建消息message=Message(conversation_id=conversation.id,content="你好")db.add(message)# 自动提交或回滚

3. 扩展性

-- 安装向量扩展CREATEEXTENSION vector;-- 存储向量数据CREATETABLEembeddings(idSERIALPRIMARYKEY,vector vector(1536)-- 1536维向量);-- 向量相似度搜索SELECT*FROMembeddingsORDERBYvector<->'[0.1, 0.2, ...]'LIMIT5;

六、AI框架：为什么选择LangChain？

6.1 候选方案对比

6.2 LangChain的核心优势

1. 完整的RAG工具链

fromlangchain_community.vectorstoresimportWeaviatefromlangchain_community.embeddingsimportOllamaEmbeddingsfromlangchain_community.llmsimportOllamafromlangchain.chainsimportRetrievalQA# 1. Embedding模型embeddings=OllamaEmbeddings(model="nomic-embed-text")# 2. 向量数据库vectorstore=Weaviate(client=client,embedding=embeddings)# 3. LLMllm=Ollama(model="llama3.2:latest")# 4. RAG链qa_chain=RetrievalQA.from_chain_type(llm=llm,retriever=vectorstore.as_retriever(search_kwargs={"k":5}))# 5. 问答answer=qa_chain.run("如何重置密码？")

2. LCEL（LangChain Expression Language）

fromlangchain.promptsimportPromptTemplatefromlangchain.schema.output_parserimportStrOutputParser# 构建链chain=({"context":retriever,"question":lambdax:x}|prompt|llm|StrOutputParser())# 流式执行asyncforchunkinchain.astream("你好"):print(chunk,end="")

3. 丰富的集成

# 支持100+种集成fromlangchain_community.llmsimport(Ollama,# 本地模型OpenAI,# OpenAIAnthropic,# ClaudeHuggingFace,# HuggingFace)fromlangchain_community.vectorstoresimport(Weaviate,# WeaviateChroma,# ChromaPinecone,# PineconeFAISS,# FAISS)

七、LLM：为什么选择Ollama？

7.1 候选方案对比

7.2 Ollama的优势

1. 一键部署

# 安装Ollamacurl-fsSLhttps://ollama.ai/install.sh|sh# 下载模型ollama pull llama3.2:latest ollama pull nomic-embed-text# 启动服务ollama serve# http://localhost:11434

2. 简单的API

fromlangchain_community.llmsimportOllama llm=Ollama(model="llama3.2:latest",base_url="http://localhost:11434",temperature=0.7)# 同步调用response=llm.invoke("你好")# 异步流式asyncforchunkinllm.astream("讲个笑话"):print(chunk,end="")

3. 本地化优势

✅ 数据隐私 - 数据不出本地 ✅ 零成本 - 无API调用费用 ✅ 低延迟 - 本地推理更快 ✅ 可定制 - 可微调模型 ✅ 离线可用 - 不依赖网络

八、向量数据库：为什么选择Weaviate？

8.1 候选方案对比

8.2 Weaviate的优势

1. 混合搜索

# 向量搜索 + 关键词搜索results=vectorstore.similarity_search(query="重置密码",search_type="hybrid",# 混合搜索k=5)

2. 多租户支持

# 为每个用户创建独立的Collectionvectorstore=Weaviate(client=client,index_name=f"User_{user_id}_Docs")

3. GraphQL查询

{ Get { ServiceTicket( nearText: { concepts: ["重置密码"] } limit: 5 ) { title description _additional { distance } } } }

九、技术栈总览

┌─────────────────────────────────────────┐ │ Frontend Stack │ │ Next.js 13 + React 18 + TypeScript │ │ TailwindCSS + Axios + SSE │ └────────────┬────────────────────────────┘ │ ┌────────────▼────────────────────────────┐ │ Backend Stack │ │ FastAPI + SQLAlchemy 2.0 + Pydantic │ │ PostgreSQL + Redis + JWT │ └────────────┬────────────────────────────┘ │ ┌────────────▼────────────────────────────┐ │ AI Stack │ │ LangChain + Ollama + Weaviate │ │ Pandas + llama3.2 + nomic-embed-text │ └─────────────────────────────────────────┘

十、成本对比

10.1 本地部署 vs 云端API

10.2 ROI分析

本地部署回本周期：4-5个月 3年节省成本：$15000+

十一、踩坑经验

11.1 Next.js部署

❌错误：使用next export导出静态站点

• 问题：无法使用API Routes和SSR

✅正确：使用next start或部署到Vercel

11.2 FastAPI异步

❌错误：在异步函数中使用同步数据库操作

@app.get("/users")asyncdefget_users():users=db.query(User).all()# ❌ 阻塞returnusers

✅正确：使用异步ORM

@app.get("/users")asyncdefget_users(db:AsyncSession=Depends(get_db)):result=awaitdb.execute(select(User))# ✅ 异步returnresult.scalars().all()

11.3 Ollama显存

❌错误：同时加载多个大模型

• 问题：显存不足

✅正确：按需加载，及时释放

# 查看已加载模型ollamaps# 卸载模型ollama stop llama3.2:latest

十二、总结

技术选型的核心思路：

✅成熟稳定- 选择经过生产验证的技术
✅性能优先- 满足业务性能需求
✅生态完整- 周边工具和社区支持
✅成本可控- 考虑长期TCO
✅团队匹配- 符合团队技术栈

下一篇预告：《SSE vs WebSocket：实时AI对话的最佳实践》

作者简介：资深开发者，创业者。专注于视频通讯技术领域。国内首本Flutter著作《Flutter技术入门与实战》作者,另著有《Dart语言实战》及《WebRTC音视频开发》等书籍。多年从事视频会议、远程教育等技术研发，对于Android、iOS以及跨平台开发技术有比较深入的研究和应用，作为主要程序员开发了多个应用项目，涉及医疗、交通、银行等领域。

学习资料：

• 项目地址
• 作者GitHub

欢迎交流：如有问题欢迎在评论区讨论 🚀