Next.js กับอนาคตของ Agentic AI: วิธีที่ Vercel พัฒนา Framework ให้รองรับ AI Agents

ในยุคที่ AI Agents กลายเป็นเครื่องมือสำคัญสำหรับนักพัฒนา Vercel ได้ทุ่มเทพัฒนา Next.js ให้สามารถทำงานร่วมกับ AI Agents ได้อย่างมีประสิทธิภาพ ผ่านการเรียนรู้และทดลองมากว่าหนึ่งปี

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

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

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

การทดลองกับ In-Browser Agent ชื่อ Vector

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

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

Vector มีประโยชน์ แต่มันทับซ้อนกับ coding agents ทั่วไปอย่าง Cursor และ Claude Code ซึ่งนักพัฒนาส่วนใหญ่ใช้อยู่แล้วสำหรับทุกโปรเจกต์ ไม่ใช่แค่ Next.js การเลือก UI ทำให้ชี้ได้ง่ายว่าต้องการเปลี่ยนอะไร แต่มันไม่ส่ใชิ่งที่คนใช้ทุกวัน

ทีมงานตัดสินใจ sunset Vector แต่เอาสิ่งที่มีประโยชน์ (structured visibility และ framework-specific knowledge) ไปสร้างใน Next.js โดยตรง

MCP ทำให้ Next.js State มองเห็นได้จาก Agents

รอบๆ การเปิดตัว Next.js v16 ในเดือนตุลาคม 2025 ผู้ใช้กำลังดิ้นรน debug ด้วย agents คำพูดที่พบบ่อยคือ "fix the 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 ข้อมูลนี้ เวอร์ชันแรกเปิดเผย internal states เช่น errors, routes และ rendered segments แต่การเปิดเผยข้อมูลอย่างเดียวไม่พอ agents ยังต้องค้นพบ dev servers ที่ทำงานอยู่และสื่อสารกับมัน ซึ่งนำไปสู่ next-devtools-mcp

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

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

mindset นี้นำไปสู่การเปลี่ยนแปลงที่เป็นรูปธรรม:

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

สิ่งที่จะเกิดขึ้นต่อไป

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

ในระยะยาว ต้องการให้มันถูก build เข้าไปใน next dev เพื่อให้ agents ได้ context ที่ถูกต้องโดยอัตโนมัติโดยไม่ต้องตั้งค่าอะไร

เมื่อคุณปฏิบัติต่อ agents เป็น first-class users และพบมันตรงที่มันอยู่ debugging กลายเป็นวงจรที่แน่นระหว่าง code, runtime และ AI

แหล่งที่มา

• Next.js Blog - Building Next.js for an agentic future
• Next.js Blog - Next.js 16
• GitHub - Vercel Labs Next.js Skills