next.js中无法使用已下线的codex，应改用vercel官方ai sdk（@vercel/ai）：安装后在app/api/chat/route.ts中用streamtext调用支持模型，并通过usechat或手动fetch接入前端。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Next.js开发前端页面时，Codex不是官方支持的工具或框架，它不参与Next.js项目的构建、路由或渲染流程；直接在Next.js项目中“使用Codex”没有技术路径，因为Codex是GitHub早期推出的AI代码补全原型系统，2023年已停止服务并被GitHub Copilot取代。
确认当前可用的AI辅助开发方式
打开终端，进入你的Next.js项目根目录。
运行 npm list @vercel/ai 或 yarn list @vercel/ai 检查是否已安装Vercel官方AI SDK——这是Next.js生态中唯一被深度集成、可安全用于流式AI响应的库。
若未安装，执行 npm install @vercel/ai；该包提供 streamText 和 streamUI 等函数，专为App Router的Server Components和Server Actions优化。
在App Router中调用AI能力（推荐路径）
在 app/api/chat/route.ts 创建API路由：
导入 streamText 和你选用的模型适配器（如 @xenova/transformers 本地运行，或 groq / anthropic 官方客户端）；注意：不能直接调用已下线的Codex API端点，【任何尝试向 codex.openai.com 或 api.github.com/codex 发起请求的操作都会返回 404 或 410 错误】。
编写处理函数，用 streamText({ model: 'gpt-4-turbo', ... }) 替代不存在的Codex调用；模型名必须来自当前SDK支持列表，填错会导致运行时报错 Unknown model。
保存文件后，Next.js会自动将其注册为 /api/chat 的POST接口，前端可通过 useChat({ api: '/api/chat' }) 接入。
前端页面中嵌入AI交互组件
方法一：使用 @vercel/ai/react
在 app/page.tsx 中导入 useChat 和 ChatPanel。
调用 const { messages, input, handleInputChange, handleSubmit } = useChat() 获取状态与事件处理器。
将 <input value="{input}" onchange="{handleInputChange}"> 和 <form onsubmit="{handleSubmit}"></form> 组合成表单，提交后自动触发上一步定义的 /api/chat 路由。
方法二：手动 fetch 流式响应
创建 useEffect，在组件挂载后发起 fetch('/api/chat', { method: 'POST', body: JSON.stringify({ message: 'Hello' }) })。
用 response.body.getReader() 逐块读取 text/event-stream 响应，拼接为完整消息；这一步必须手动处理decoder和chunk分隔符，否则中文会乱码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
