Next.js 16.3 เวอร์ชันใหม่ของเฟรมเวิร์ก React สำหรับสร้างเว็บ มีพฤติกรรมใหม่ที่ดูแปลกตั้งแต่ครั้งแรกที่เจอ พอรันคำสั่ง next dev ขึ้นมา มันจะเขียนข้อความส่วนหนึ่งแทรกลงในไฟล์ที่รากของโปรเจกต์ให้อัตโนมัติ ข้อความนั้นไม่ได้เขียนถึงคนที่กำลังนั่งเขียนโค้ดอยู่ แต่เขียนถึง AI โดยตรง ใจความประมาณว่า นี่ไม่ใช่ Next.js เวอร์ชันที่ AI เคยรู้จัก โครงสร้างและคำสั่งหลายอย่างเปลี่ยนไปจากข้อมูลที่ AI เคยเรียนมา ดังนั้นให้ไปอ่านคู่มือในเครื่องก่อนลงมือเขียนโค้ดทุกครั้ง

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

ทำไมเฟรมเวิร์กต้องหันมาคุยกับ AI

คำตอบอยู่ที่ว่าใครเป็นคนเขียนโค้ดจริงๆ ในประกาศเวอร์ชัน 16.3 ทีม Next.js บอกเองว่า การเติบโตส่วนใหญ่ของเฟรมเวิร์กตอนนี้มาจากโค้ดที่เขียนผ่าน agent อย่าง Claude Code, Cursor และ Codex ไม่ใช่จากคนพิมพ์ทีละบรรทัดเหมือนเมื่อก่อน

ปัญหาคือ agent ยังพึ่งความจำจากข้อมูลที่เคยเรียนมาตอนเทรนเป็นหลัก ซึ่งล้าสมัยเร็วมาก เพราะเฟรมเวิร์กออกเวอร์ชันใหม่ที่เปลี่ยน API เปลี่ยนวิธีเขียน และตัดของเก่าทิ้งอยู่ตลอด พอ agent เดาจากความจำ มันก็เขียนโค้ดแบบเก่าที่ใช้ไม่ได้แล้วออกมา

ฟีเจอร์ AI ทั้งชุดใน 16.3 จึงพยายามแก้โจทย์เดียวกัน คือทำยังไงให้ agent ทำงานจากข้อมูลจริงล่าสุดของโปรเจกต์ตรงหน้า ไม่ใช่จากความจำที่ค้างอยู่ในหัว ลองดูจากของจริง 4 อย่างต่อไปนี้

คู่มือที่ติดมากับโค้ด ไม่ต้องเปิดเว็บ

อย่างแรกคือ AGENTS.md กับชุดเอกสารที่ฝังมากับตัวเฟรมเวิร์ก ตอนติดตั้ง next จะมีเอกสารทั้งหมดอยู่ที่ node_modules/next/dist/docs/ ในเครื่องเลย โครงสร้างเหมือนหน้าเอกสารบนเว็บ และใช้งานได้แบบไม่ต้องต่อเน็ต เพราะเอกสารอยู่ในเครื่องอยู่แล้ว

ส่วน AGENTS.md คือไฟล์เล็กๆ ที่วางไว้ที่ราก (root) ของโปรเจกต์ ทำหน้าที่เป็นไฟล์บอกทางให้ agent ไปอ่านเอกสารในเครื่องชุดนั้นก่อนเริ่มเขียนโค้ด และ agent ส่วนใหญ่อย่าง Claude Code, Cursor หรือ GitHub Copilot จะอ่านไฟล์ AGENTS.md ให้อัตโนมัติตอนเริ่มเซสชันอยู่แล้ว

ของใหม่ใน 16.3 คือ next dev จะเขียนและอัปเดตคำแนะนำส่วนนี้ใน AGENTS.md ให้เอง โปรเจกต์เก่าที่อัปเกรดขึ้นมาเลยได้ข้อความเวอร์ชันล่าสุดติดไปด้วย โดยมันจะเขียนเฉพาะตอนที่ตรวจเจอว่ามี AI coding agent อยู่ในสภาพแวดล้อม และยังไม่มีข้อความส่วนนี้อยู่ก่อน ข้อความที่ next dev แทรกเข้าไปหน้าตาประมาณนี้

<!-- BEGIN:nextjs-agent-rules -->
# This is NOT the Next.js you know
This version has breaking changes — APIs, conventions, and file structure
may all differ from your training data. Read the relevant guide in
`node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
<!-- END:nextjs-agent-rules -->

จุดสำคัญอยู่ที่บรรทัด marker หัวท้าย เพราะ Next.js จะแตะแก้แค่ข้อความที่อยู่ระหว่าง marker เท่านั้น ข้อความอื่นที่เราเขียนเองในไฟล์เดียวกันจะไม่ถูกเขียนทับ และถ้าไม่อยากให้มันมายุ่งกับไฟล์เลย ก็ปิดได้ด้วยการตั้ง agentRules: false ใน next.config.ts

ให้ agent ได้ลงมือทดสอบเอง ไม่ใช่แค่เดา

ถ้าเอกสารมีไว้ให้ความรู้กับ agent อย่างที่สองก็คือ Skills ที่บอกขั้นตอนการทำงานให้ agent โดย 16.3 ออก Skill ทางการมาสามตัว ติดตั้งผ่านคำสั่ง npx skills add vercel/next.js --skill <name> ตัวเด่นที่สุดคือ next-dev-loop ที่เปิดให้ agent ทดสอบกับของจริงได้ครบ ทั้งขับ browser อ่านสิ่งที่ขึ้นใน console ตามดู network request และส่อง React tree ระหว่างแก้โค้ดไปทีละรอบ

เบื้องหลังมันเชื่อมมุมมองสองฝั่งเข้าด้วยกัน คือ /_next/mcp ที่เป็นมุมมองของเฟรมเวิร์กเอง (เห็น route, server log, ปัญหาตอน compile) กับ agent-browser ที่เป็นมุมมองจากฝั่งหน้าเว็บ (เห็น DOM, console, network และ React tree) agent เลยไม่ได้แก้โค้ดมั่วๆ แล้วหวังว่าจะถูก แต่แก้แล้วเปิดดูผลจริงในหน้าเว็บได้เลย

อีกสองตัวที่เหลือเจาะงานเฉพาะทาง วางคู่กันแบบนี้จะเห็นชัดว่าตัวไหนทำอะไร

• next-dev-loop สำหรับให้ agent ทดสอบการแก้ของตัวเองในหน้าเว็บจริง เลือกใช้เมื่ออยากให้ agent ยืนยันผล ไม่ใช่เดา
• next-cache-components-adoption สำหรับเปิดฟีเจอร์ Cache Components ทีละ feature เลือกใช้ตอนกำลังย้ายโปรเจกต์มาใช้ Cache Components
• next-cache-components-optimizer สำหรับจูน route ให้สลับหน้าได้ทันที โดยถ่าย screenshot เทียบก่อนหลังทุกการเปลี่ยน ถ้าภาพเหมือนเดิมแปลว่าไม่ได้ผล มันจะถอยการเปลี่ยนนั้นกลับเอง เลือกใช้ตอนไล่จูนความเร็วในการสลับหน้า

สรุปง่ายๆ คือใช้ next-dev-loop เป็นตัวยืนหลักสำหรับงานแก้โค้ดทั่วไป ส่วนอีกสองตัวค่อยหยิบมาเมื่อทำงานกับ Cache Components โดยตรง ส่วน Knowledge Skills ชุดเก่าที่เคยโหลดจาก skills.sh ถูกยกเลิกไปแล้ว เพราะเนื้อหาย้ายไปอยู่ในเอกสารที่ฝังมากับโค้ดหมดแล้ว ใครเคยลงไว้รัน npx skills update เพื่อลบออกได้เลย

ให้ agent มองเห็นหน้าเว็บจริง

ของจริงอย่างที่สามคือ agent-browser ซึ่งเป็นเครื่องมือแบบ command line ที่ทำให้ agent มองเห็นสิ่งที่เกิดขึ้นบนหน้าเว็บจริงๆ ไม่ใช่เห็นแค่โค้ดต้นทางในไฟล์ มันพัฒนามาจาก next-browser เดิมในเวอร์ชัน 16.2 และตอนนี้แยกออกมาเป็นเครื่องมือทั่วไปที่ใช้ได้กับงานนอก Next.js ด้วย

ของใหม่ในเวอร์ชัน 0.27 คือมันอ่าน React ผ่าน React DevTools ได้ เพิ่มจากเดิมที่อ่าน DOM, console, network และ Web Vitals อยู่แล้ว ทำให้ agent เจาะดูโครงสร้าง React ในหน้าเว็บได้ละเอียดเหมือนนักพัฒนาเปิด DevTools ดูเอง เช่น

• react tree ขอดูผังของ component ทั้งหน้า
• react inspect <fiberId> เจาะดู component ตัวเดียว
• react renders start/stop วัดว่าส่วนไหน re-render บ่อยเกินไป
• react suspense --only-dynamic --json ดูว่าส่วนไหนกำลังรอโหลดอยู่

วิธีลงคือ npm install -g agent-browser@^0.27 แล้วเปิดด้วยตัวเลือก --enable react-devtools ส่วนใครใช้ Skill ตัว next-dev-loop อยู่แล้ว มันจะเปิด agent-browser พร้อมเปิด React DevTools ให้อัตโนมัติ ไม่ต้องตั้งเองซ้ำ

error ที่แพ็กวิธีแก้ส่งให้ agent ทำต่อ

ของจริงอย่างสุดท้ายเป็นตัวที่ปิดวงจรได้สวยที่สุด คือ error message ที่ออกแบบมาให้ agent เอาไปทำต่อได้ทันที สมมติว่าเปิด Cache Components ไว้ แล้วมีการ await ฝั่ง server โดยไม่มี <Suspense> ครอบ จะเด้ง error ที่ชื่อ Instant Insights ขึ้นมา พร้อมตัวเลือกแก้สามทางที่ติดป้ายชัดเจน

• Stream ครอบโค้ดส่วนนั้นด้วย <Suspense> boundary
• Cache สั่งแคชด้วย "use cache"
• Block ปิดด้วย export const instant = false

ที่เด็ดคือปุ่ม Copy as prompt ข้างๆ พอเลือกวิธีแก้แล้วกดปุ่มนี้ มันจะแพ็กวิธีแก้นั้นเป็น prompt ที่เอาไปวางให้ agent ได้ทันที และ prompt ที่ได้ไม่ได้มีแค่ข้อความ error แต่เรียงขั้นตอนมาให้ครบ ตั้งแต่สั่งให้ agent ตั้งค่าเครื่องมือดูหน้าเว็บก่อน (ถ้ายังไม่มีก็ให้ลง next-dev-loop) ชี้ไปที่โค้ดที่พัง อ่านหน้าเอกสารของ error ตัวนั้น ใส่แพตเทิร์นมาตรฐาน แล้วค่อยยืนยันผลตอนรันจริงผ่าน next-dev-loop อีกที

เมนูแก้ชุดเดียวกันนี้ยังโผล่ใน terminal ระหว่างรัน next dev และ next build ด้วย เผื่อกรณีที่ agent อ่าน error จาก log ของ CI หรือจากหน้าจอที่ไม่มีตัว overlay และ error ทุกตัวมีหน้าเอกสารของตัวเองที่ nextjs.org/docs/messages ซึ่งเขียนสำหรับ agent โดยเฉพาะ แต่ละหน้าบอกครบทั้งแพตเทิร์นที่ควรใช้ ข้อแลกเปลี่ยนของแต่ละทาง และจุดที่มักพลาด ตอนนี้มีหน้าแบบนี้มากกว่าสิบหน้าแล้ว

เริ่มลองกับโปรเจกต์ตัวเอง

ถ้าอยากเห็นภาพว่ามันทำงานยังไง เริ่มจากสามขั้นนี้ได้เลย

# 1. อัปเกรดเป็น 16.3 แล้วรัน next dev หนึ่งครั้ง ปล่อยให้มันเขียน AGENTS.md ให้
#    (โปรเจกต์เก่ากว่า v16.1 ให้รัน codemod แทน)
npx @next/codemod@latest agents-md

# 2. ลง Skill ตัวหลัก
npx skills add vercel/next.js --skill next-dev-loop

# 3. ลง agent-browser แล้วเปิดโหมดอ่าน React
npm install -g agent-browser@^0.27

จากนั้นลองสั่ง agent อย่าง Claude Code หรือ Cursor ให้แก้อะไรสักอย่างในโปรเจกต์ แล้วสังเกตว่ามันเปิดเอกสารในเครื่องอ่านก่อนไหม ขับ browser ดูผลเองไหม และส่อง React tree เพื่อยืนยันการแก้หรือเปล่า ถ้าครบทั้งสามนี้แปลว่าวงจรที่ Next.js วางไว้ทำงานแล้ว

ผู้อ่านคนที่สองที่เพิ่งโผล่มา

ทั้งหมดนี้ยังต้องมองตามจริงสองด้าน ด้านหนึ่ง 16.3 ยังเป็นเวอร์ชัน preview ที่ปล่อยมาก่อน stable และผูกกับเวอร์ชันเครื่องมือเฉพาะอย่าง agent-browser ที่ต้อง 0.27 ขึ้นไป ที่สำคัญคือมันออกแบบมาบนสมมติฐานว่าเราทำงานคู่กับ agent จริง ถ้ายังเขียนโค้ดเองด้วยมือเป็นหลัก หลายอย่างในชุดนี้ก็กลายเป็นภาระมากกว่าของที่ได้ใช้จริง

อีกด้านที่น่าคิดคือการที่เฟรมเวิร์กต้องเขียนตัวโตๆ ว่านี่ไม่ใช่ Next.js เวอร์ชันที่ AI เคยรู้จัก มันสะท้อนว่าทุกวันนี้ของเปลี่ยนเร็วจนแม้แต่ข้อมูลที่ AI เรียนมายังตามไม่ทัน ทางแก้กับอาการของปัญหาจึงเป็นเรื่องเดียวกัน และ Next.js เองก็บอกว่านี่เป็นทิศทางที่ยังเดินไม่สุด เข้าใกล้ขึ้นทุกเวอร์ชัน แต่ยังไปไม่ถึงปลายทาง

แต่ทิศทางชัดแล้ว เอกสาร error และเครื่องมือที่เมื่อก่อนมีผู้อ่านคนเดียวคือคนเขียนโค้ด ตอนนี้มีผู้อ่านคนที่สองคือ AI และเฟรมเวิร์กที่คิดเผื่อผู้อ่านคนที่สองไว้ตั้งแต่แรก คือเฟรมเวิร์กที่ agent ทำงานด้วยได้จริง ไม่ใช่แค่เดาเอาจากความจำ

ที่มา:

• บทความ Next.js 16.3: AI Improvements จาก Next.js
• คู่มือ Guides: AI Coding Agents จาก Next.js