Next.js 14 App Router环境下的前端验收工程师需确保代码通过三项硬指标：①含app/layout.tsx；②page.tsx导出默认组件；③交互事件含e.preventDefault()或完整useEffect依赖数组，且满足结构完整性、交互闭环与渲染模式合规性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让ChatGPT生成的前端页面能直接放进Next.js项目跑起来，而不是只返回一段HTML片段或缺交互逻辑的静态代码——这意味着必须让它清楚知道“验收”这件事由谁来判、按什么标准卡、哪几处错不得。
明确验收主体与执行环境
第一步：在提示词开头锁定AI角色为「Next.js 14 App Router环境下的前端验收工程师」，不是通用开发者，也不是UI设计师。【不写明验收角色，AI会默认按浏览器兼容性+语义HTML作答，漏掉server component生命周期、use client边界、layout嵌套等关键项】
第二步：声明运行环境约束，例如“所有代码必须能在Node v20.15+、Next.js 14.2.4环境下通过next dev启动，无TS类型报错、无hydration mismatch警告”。这一步直接过滤掉用React 19新hooks或客户端DOM操作的无效方案。
第三步：要求AI在输出前自检三项硬指标：①是否含app/layout.tsx；②page.tsx是否导出默认组件；③所有交互事件是否绑定e.preventDefault()或useEffect依赖数组完整。不符合则重写。
立即学习“前端免费学习笔记（深入）”；
定义可验证的验收维度
方法一：结构完整性校验
要求AI输出时必须包含三个文件路径及最小内容：【app/page.tsx必须有export default function Page() {}】、app/layout.tsx需包裹children、public/favicon.ico需存在（哪怕只是占位base64）。缺任一文件路径即判定不通过。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：交互行为闭环验证
例如：“点击‘提交’按钮后，页面不刷新、控制台不报错、弹出alert('提交成功')、且表单输入框自动清空”。AI必须写出含e.preventDefault()、useState重置、onClick事件处理器的完整链路，不能只画按钮。
方法三：渲染模式合规性检查
强制要求：服务端渲染组件不得调用window、document等客户端API；需要交互的部分必须显式加'use client'；动态import()需配合Suspense。AI若在server component里写localStorage.getItem()，该条直接判为不合格。
绑定具体失败场景反向约束
第一步：列出你已遇到的真实报错，粘贴进提示词。例如：“next dev启动时报错Error: Hydration failed because the initial UI does not match what was rendered on the server”，AI必须据此反推并规避useEffect首次渲染副作用、SSR与CSR状态不一致等问题。
第二步：指定禁止出现的代码模式。例如：“不允许使用document.getElementById()、禁止在layout.tsx中写onClick、禁用内联style={{}}写法（必须用className）”。这些是Next.js 14 App Router明确不支持的写法。
第三步：要求AI对每处约束给出失效后果说明。比如写“禁止在server component中调用Date.now() → 导致hydration mismatch且无法热更新生效”，这句解释必须和禁令并列出现，不解释则视为未响应。
