Next.js กับยุค AI Agents: วิธีที่ Framework ปรับตัวเพื่อทำงานร่วมกับ AI ได้ดีขึ้น

ในปีที่ผ่านมา ทีม Next.js ได้ทุ่มเทเวลาส่วนใหญ่ในการปรับปรุงประสบการณ์การทำงานกับ AI coding agents โดยเรียนรู้ว่ากุญแจสำคัญคือการมองเห็นสิ่งที่ Next.js กำลังทำจากมุมมองของ agent

ปัญหา: Agents ไม่สามารถมองเห็น Browser ได้

เมื่อต้นปีที่ผ่านมา ทีม Next.js กำลังทำงานเกี่ยวกับ devtools และสังเกตเห็นรูปแบบที่น่าสนใจ นักพัฒนาจะเห็น error ใน browser คัดลอกรายละเอียด วางลงใน AI editor แล้วขอให้ agent แก้ไข

ปัญหาคือ agents ไม่สามารถมองเห็น browser ได้ Runtime errors, client-side warnings และ rendered components ล้วนมองไม่เห็นสำหรับ agents เมื่อผู้ใช้พูดว่า "แก้ไข error" agent ไม่รู้ว่าหมายถึง error ใด

การทดลอง: In-browser Agent

ทีมงานมีความคิดที่ทะเยอทะยาน ถ้าสร้าง agent โดยตรงใน Next.js ที่ทำงานเหมือน smart devtools?

พวกเขาสร้าง in-browser chat agent ชื่อ Vector ซึ่งทำงานคล้ายกับ react-grab แต่รวมเข้ากับ Next.js Vector ให้คุณเลือก elements บนหน้าเว็บ ดู source code และ prompt ขอการเปลี่ยนแปลง มี Next.js best practices ฝังอยู่ภายในเพื่อช่วย agents หลีกเลี่ยงการ hallucinate

แม้ Vector จะมีประโยชน์ แต่มันทับซ้อนกับ general coding agents อย่าง Cursor และ Claude Code ที่นักพัฒนาส่วนใหญ่ใช้อยู่แล้ว จึงตัดสินใจยุติ Vector แต่นำสิ่งที่มีประโยชน์ (structured visibility และ framework-specific knowledge) ไปสร้างใน Next.js โดยตรง

MCP: ทำให้ Next.js State มองเห็นได้สำหรับ Agents

รอบๆ Next.js v16 release ในเดือนตุลาคม 2025 ผู้ใช้กำลังต่อสู้กับการ debug ด้วย agents คำขอที่พบบ่อยคือ "แก้ไข error" โดยขอให้ agents แก้ไขปัญหาจาก browser overlay แต่ agents จะขอ page HTML และพบว่าไม่มีอะไรผิด

Runtime failures, browser JavaScript errors และ async errors ล้วนอยู่ใน browser ไม่ใช่ใน HTML หน้าที่ render, layout segments, routes และ internal state อื่นๆ ล้วนมองไม่เห็นสำหรับ agents

MCP (Model Context Protocol) ให้วิธี expose ข้อมูลนี้ Version แรกเผย internal states เช่น errors, routes และ rendered segments แต่การ expose ข้อมูลอย่างเดียวไม่พอ Agents ยังต้องค้นพบ dev servers ที่กำลังทำงานและสื่อสารกับ它们 ซึ่งนำไปสู่ next-devtools-mcp

คำตอบคือ: คิดเหมือน Agent

MCP ยืนยันสิ่งที่ Vector สอนเรา Agents ต้องการ visibility เข้าไปในสิ่งที่ Next.js กำลังทำ แต่นั่นเป็นแค่ส่วนหนึ่งของเรื่อง บทเรียนที่ลึกซึ้งกว่าคือการปฏิบัติต่อ agents เป็น users ชั้นหนึ่งของ Next.js และคิดจากมุมมองของ它们 ข้อมูลอะไรที่ต้องการ? ต้องการเมื่อไหร่? บริโภคอย่างไร?

คำถามเหล่านี้นำไปสู่การเปลี่ยนแปลงที่เป็นรูปธรรม ถ้า agents อ่าน terminal output ระหว่าง development การ log Server Action invocations และ forward browser errors จะให้ hints ที่ต้องการ ถ้า agents มีปัญหากับ framework concepts ที่ไม่อยู่ใน training data การ embed compressed docs index ใน agents.md หรือ provide structured workflows (Next.js skills) ให้ context ที่ดีกว่าเอกสารเพียงอย่างเดียว

อะไรต่อไป?

ตอนนี้ทีมกำลังทำให้นำไปใช้งานได้ง่ายขึ้น คุณสามารถรัน npx @next/codemod เพื่อสร้าง up-to-date docs index สำหรับโปรเจกต์ของคุณ และกำลังขยาย eval suite เพื่อครอบคลุม Next.js 16 APIs มากขึ้น ในระยะยาว ต้องการให้ built-in ใน next dev เพื่อให้ agents ได้ context ที่ถูกต้องโดยอัตโนมัติโดยไม่ต้องตั้งค่า