5月份在看前端趋势的时候,发现一个有意思的现象:LinkedIn 技术帖、Reddit 架构选型、各种 AI 应用教程,全在说同一件事——Next.js 正在成为 Agentic AI 应用的事实标准。
一开始我有点怀疑。React 全栈框架,又不是专门为 AI 设计的。怎么就突然变成 AI 首选了?
看了一圈发现,结论就是生态卡对了位置。
TypeScript 才是 AI 开发的第一语言
这一点容易被忽略。现在主流的 AI 框架——LangChain、OpenAI Agents SDK、Vercel AI SDK——全都有成熟的 TypeScript SDK。有些甚至 TS 版本比 Python 版本功能更全、更新更快。
以前做 AI 应用,Python 写后端 + React 写前端,中间必定有一道「前后端对接」的摩擦。Next.js 把这一切压进同一个项目:Server Actions、模型调用、流式处理、UI 渲染,全在 TypeScript 里搞定。AI SDK 就是 npm install 的事,模型输出到 React 组件之间没有序列化开销。
React Server Components + Server Actions = 天然 Agent 运行时
这是最核心的优势,其他方案暂时没有。
传统AI应用的架构:
- 前端发请求到 API 路由
- API 路由调模型服务
- 模型返回 token
- API 路由把响应流回前端
多一层转发,多一截延迟。
Next.js 15 的 App Router 把这套链子拆了。Server Actions 把「调模型 → 处理响应 → 更新 UI」整个流程塞进同一个请求上下文。没有额外 API 层,不需要中间件,模型响应直接流进 React 组件。
"use server";
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
export async function askAI(question: string) {
const result = streamText({
model: openai("gpt-4o"),
prompt: question,
tools: {
searchDocs: {
description: "搜索内部文档",
parameters: z.object({ query: z.string() }),
execute: async ({ query }) => {
return await searchVectorDB(query);
},
},
},
});
return result.toTextStreamResponse();
}
客户端用 AI SDK 的 useChat hook 接住流式数据就行。不用搭 WebSocket,不用写自定义 EventSource,不用轮询。
Vercel AI SDK 6:Agent 不再是"二等公民"
AI SDK 6.x 的重点升级除了基础的流式对话和工具调用,还有原生的 Agent Loop:模型可以持续思考、调用工具、基于结果再思考,直到任务完成。
消息模型也改了——每个 assistant 回复不再是单一字符串,而是拆成 text、tool-call、tool-result、reasoning、source 五种片段类型。客户端分段渲染,用户能看到 Agent 的完整推理过程,而不是一个黑盒回复。
多 Provider 支持也做到了一行代码切换模型,OpenAI / Anthropic / Google / Mistral / xAI 随你换。
AGENTS.md:一个文件比一整套 Skill 更好用
Vercel 在 2026 年初做了一个很有意思的评测。
他们原本认为 skills 是教会 AI 编码 Agent 掌握框架知识的最佳方案。于是给 Next.js 16 做了一套完整的 Skills 文档包。同时做了一个压缩到 8KB 的 AGENTS.md,直接把核心 API 说明塞进文件里。
然后跑了评测集,结果出乎意料:
- AGENTS.md:通过率 100%
- skills:最高通过率 79%,即便在 AGENTS.md 里明确写了「请使用 skills」也没能改善多少
原因是 skills 需要 Agent 自己决定「我该不该加载这个技能」,而 AGENTS.md 的内容 Agent 每轮对话都能直接读到,没有决策成本。
从 Next.js 16 开始,create-next-app 创建的项目会自动生成 AGENTS.md。官方文档也打包进了依赖,Agent 本地就能读到准确的 API 信息。
MCP 集成:Agent 终于能看见浏览器了
AI 编码 Agent 最大的盲区是什么?它们看不到浏览器。
运行时错误、客户端警告、渲染出来的组件——这些 Agent 全都感知不到。开发者只能手动复制错误信息贴给 Agent,来回折腾。
Next.js 16 引入了 MCP(Model Context Protocol)集成,把运行时的路由状态、错误信息、渲染片段暴露给 Agent。Agent 终于能看到真实情况,不用靠猜了。
skills.sh:Agent skills 的 npm
2026 年 1 月,Vercel 上线了 skills.sh——Agent skills 目录和排行榜平台。你可以像装 npm 包一样安装 skills:
npx add-skill react-best-practices
安装之后,AI 编码 Agent 在代码审查时会自动检查组件,覆盖 100+ 条性能、可访问性、代码质量规则。Vercel 官方提供了 25+ 个 skills,社区贡献的更多。
推荐选型
2026 年用 Next.js 构建 AI Agent,推荐架构大概这样:
Next.js App Router
├── Server Actions ← AI 模型调用、工具执行
├── RSC ← SEO 内容、静态壳
├── Client Components ← AI 聊天 UI、工具结果展示
└── Vercel AI SDK ← 流式输出、工具、多 Provider
Python 在数据科学和模型训练上依然不可替代。但到了应用层——用户实际交互的 AI Agent——TypeScript + Next.js 的优势很明显:
- 流式渲染是 RSC 原生能力,不用折腾 SSE 或 WebSocket
- 一个类型系统从数据库覆盖到 UI,Python 方案要做 Pydantic + TypeScript 类型 + OpenAPI 三套
- 部署就是一次 build,不用配 FastAPI + 前端 + 反向代理
- 生态完整:认证有 Clerk/Auth.js,支付有 Stripe,数据库有 Drizzle/Prisma,全在 npm 里
总结
Next.js 不是专门为 AI 设计的框架。它只是恰好卡对了时间点——TypeScript 生态成熟、RSC 解决了流式渲染、Server Actions 去掉了 API 样板代码、AI SDK 把所有东西整合在一起。
如果你在今年要做一个 AI Agent 应用又拿不准用什么栈,Next.js 是最安全的选择——把胶水代码减到最少,比某个单项做到最强要实在得多。
本文首发于 auraimagai.com