วิธีรีอิมพลีเมนต์ Next.js ด้วย AI ให้เสร็จภายในหนึ่งสัปดาห์

 (blog.cloudflare.com)
4 คะแนน โดย GN⁺ 2026-02-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • vinext คือ เฟรมเวิร์กที่เข้ากันได้กับ Next.js ที่ AI และวิศวกรหนึ่งคนสร้างขึ้นภายในหนึ่งสัปดาห์ โดยทำงานบน Vite และสามารถดีพลอยไปยัง Cloudflare Workers ได้ด้วยคำสั่งบรรทัดเดียว
  • ความเร็วในการบิลด์สูงสุดเร็วขึ้น 4.4 เท่า และ ขนาดไคลเอนต์บันเดิลเล็กลง 57% พร้อมใช้โครงสร้างไดเรกทอรีและการตั้งค่าเดียวกับโปรเจกต์ Next.js เดิมได้ทันที
  • ออกแบบมาสำหรับ Cloudflare Workers โดยรองรับ ISR caching บน KV และ Traffic-aware Pre-Rendering หรือ การพรีเรนเดอร์ตามทราฟฟิก
  • โค้ดส่วนใหญ่ทั้งหมดถูก AI เขียน และมีการยืนยันคุณภาพผ่านการทดสอบมากกว่า 1,700 รายการและการรีวิวโค้ดอัตโนมัติ
  • โปรเจกต์นี้เป็น กรณีศึกษาที่แสดงให้เห็นว่า AI ไปถึงระดับที่สามารถรีอิมพลีเมนต์เฟรมเวิร์กที่ซับซ้อนได้แล้ว และชี้ให้เห็นถึงความเป็นไปได้ของการเปลี่ยนแปลงโครงสร้างการพัฒนาซอฟต์แวร์ในอนาคต

ข้อจำกัดด้านการดีพลอยของ Next.js และการมองเห็นปัญหา

  • Next.js เป็นเฟรมเวิร์กหลักบน React แต่ เมื่อต้องดีพลอยในสภาพแวดล้อม serverless จำเป็นต้องมีกระบวนการแปลงผลลัพธ์การบิลด์ที่ซับซ้อน
    • หากต้องการดีพลอยไปยัง Cloudflare, Netlify, AWS Lambda ฯลฯ ต้องจัดโครงสร้างผลลัพธ์การบิลด์จาก Turbopack ของ Next.js ใหม่ให้เหมาะกับแต่ละแพลตฟอร์ม
  • แม้ OpenNext จะพยายามแก้ปัญหานี้ แต่ก็เกิดความไม่เสถียรในแต่ละเวอร์ชัน เนื่องจาก ข้อจำกัดเชิงโครงสร้างที่ต้องย้อนวิศวกรรมผลลัพธ์การบิลด์ของ Next.js
  • แม้ Next.js จะกำลังพัฒนา adapter API อยู่ แต่ก็ยังมีข้อจำกัดว่า โครงสร้าง dev server ที่ผูกกับ Node.js โดยเฉพาะ ทำให้ทดสอบ API ของแต่ละแพลตฟอร์มได้ยาก

โครงสร้างและจุดเด่นของ vinext

  • vinext เป็นเฟรมเวิร์กทางเลือกที่ รีอิมพลีเมนต์ API ของ Next.js โดยตรงบน Vite
    • หลัง npm install vinext ก็เพียงเปลี่ยนคำสั่ง next เป็น vinext ก็สามารถรันโปรเจกต์เดิมได้ทันที
    • รวมขั้นตอนพัฒนา บิลด์ และดีพลอยไว้ในคำสั่ง vinext dev, vinext build, vinext deploy
  • ฟีเจอร์หลักของ Next.js เช่น routing, server rendering, React Server Components, server actions, caching, middleware ถูกทำเป็น Vite plugin
  • ใช้ Vite Environment API เพื่อสร้างผลลัพธ์การบิลด์ที่ไม่ขึ้นกับแพลตฟอร์ม

เบนช์มาร์กด้านประสิทธิภาพ

  • เปรียบเทียบกับ Next.js 16 โดยใช้แอปเดียวกันที่มี 33 routes
    • เวลาบิลด์: vinext (Vite 8/Rolldown) 1.67 วินาที → เร็วกว่า Next.js 4.4 เท่า
    • ขนาดไคลเอนต์บันเดิล: 72.9KB → เล็กกว่า Next.js 57%
  • การทดสอบทำบน GitHub CI และ วัดเฉพาะความเร็วในการคอมไพล์และบันเดิล
  • Rolldown บันเดลเลอร์ที่พัฒนาด้วย Rust ใน Vite 8 มีส่วนช่วยเพิ่มประสิทธิภาพการบิลด์

การดีพลอยบน Cloudflare Workers

  • คำสั่ง vinext deploy จะทำ การบิลด์และดีพลอยแบบอัตโนมัติ
    • รองรับทั้ง App Router และ Pages Router รวมถึง client hydration และ state management
  • มี Cloudflare KV cache handler สำหรับ ISR (Incremental Static Regeneration) มาให้โดยตรง
    • สามารถเปลี่ยน backend ของแคชได้ และขยายไปใช้ R2 หรือ Cache API ได้
  • มีตัวอย่างการทำงานจริงที่เปิดเผยไว้ เช่น App Router Playground และ Hacker News clone

Traffic-aware Pre-Rendering (TPR)

  • ปรับปรุง ความไม่มีประสิทธิภาพของการพรีเรนเดอร์แบบสแตติก ที่อิงกับ generateStaticParams() ของ Next.js เดิม
  • ใช้ข้อมูลทราฟฟิกของ Cloudflare เพื่อ พรีเรนเดอร์เฉพาะหน้าที่มีผู้เข้าชมมากในช่วง 24 ชั่วโมงล่าสุด
    • ตัวอย่าง: จาก 100,000 หน้า เรนเดอร์เพียง 184 หน้า (คิดเป็น 90% ของทราฟฟิกทั้งหมด) ได้ภายใน 8.3 วินาที
  • หน้าที่เหลือจะ SSR เมื่อมีคำขอแล้วจึงแคชแบบ ISR และอัปเดตอัตโนมัติตามรูปแบบทราฟฟิกในแต่ละครั้งที่ดีพลอย

กระบวนการพัฒนาด้วย AI

  • โค้ดส่วนใหญ่ของโปรเจกต์ถูก AI เขียน โดยมีต้นทุนรวมประมาณ $1,100
  • ผ่านการทดสอบ Vitest 1,700 รายการ และ Playwright 380 รายการ พร้อม ความเข้ากันได้กับ API ของ Next.js ที่ 94%
  • ขั้นตอนการพัฒนา
    • AI ทำการพัฒนาฟีเจอร์และเขียนเทสต์ → รันเทสต์ → หากล้มเหลวจะรับ feedback ของข้อผิดพลาดแล้วลองใหม่
    • AI agent ยังทำ code review และแก้ไขโค้ดอัตโนมัติด้วย โดยมนุษย์ดูแลเพียงทิศทางและโครงสร้าง
  • มีการทำเซสชันบน OpenCode มากกว่า 800 ครั้ง โดยใช้โมเดล Claude

ปัจจัยที่ทำให้ AI ทำสิ่งนี้ได้

  • เอกสารที่ชัดเจนของ Next.js และ test suite ขนาดใหญ่ ทำให้ AI เรียนรู้ได้อย่างแม่นยำ
  • โครงสร้างการบิลด์ที่เสถียรของ Vite ทำหน้าที่เป็นฐานสำคัญ
  • โมเดล AI รุ่นใหม่ไปถึงระดับที่สามารถ รักษาความสอดคล้องเชิงโครงสร้างของโค้ดเบสขนาดใหญ่ และ อนุมานปฏิสัมพันธ์ระหว่างโมดูลต่าง ๆ ได้แล้ว

นัยต่อการพัฒนาซอฟต์แวร์

  • โครงสร้างเฟรมเวิร์กแบบหลายชั้นในอดีตเป็น ผลลัพธ์จากความพยายามชดเชยข้อจำกัดด้านการรับรู้ของมนุษย์
  • AI สามารถเข้าใจทั้งระบบในบริบทและเขียนโค้ดได้โดยตรง จึงทำให้ ความจำเป็นของชั้น abstraction ระหว่างกลางลดลง
  • vinext เป็น กรณีพิสูจน์ว่า AI สามารถสร้างเฟรมเวิร์กที่ซับซ้อนได้สำเร็จโดยอาศัยเพียงสเปกและเครื่องมือพื้นฐาน

โอเพนซอร์สและการทำงานร่วมกัน

  • ราว 95% ของ vinext ประกอบด้วย โค้ด Vite ที่ไม่ผูกกับ Cloudflare จึงสามารถนำไปใช้กับแพลตฟอร์มโฮสติ้งอื่นได้
    • มีการสร้าง PoC บน Vercel สำเร็จภายใน 30 นาที
  • โปรเจกต์เปิดเป็นโอเพนซอร์ส และ ยินดีรับ PR สำหรับแพลตฟอร์มอื่นและการเพิ่มเป้าหมายการดีพลอย

สถานะเชิงทดลองและการใช้งานจริง

  • vinext ยังอยู่ในขั้นทดลอง และยังไม่ได้ผ่านการพิสูจน์กับทราฟฟิกขนาดใหญ่
  • National Design Studio กำลังนำไปใช้จริงกับเว็บไซต์ภาครัฐ CIO.gov และยืนยันว่า เวลาบิลด์และขนาดบันเดิลดีขึ้น
  • ใน README มีการระบุ ฟีเจอร์ที่ยังไม่รองรับและข้อจำกัดที่ทราบแล้ว ไว้ชัดเจน

วิธีใช้งาน

  • รองรับการย้ายระบบอัตโนมัติในเครื่องมือ AI (เช่น Claude Code, Cursor) ผ่าน Agent Skill
    • npx skills add cloudflare/vinext → แปลงได้ด้วยคำสั่ง “migrate this project to vinext”
  • หากทำเองสามารถใช้ npx vinext init, vinext dev, vinext deploy ได้
  • ซอร์สโค้ดเปิดเผยบน GitHub ที่ cloudflare/vinext

คำขอบคุณและเทคโนโลยีพื้นฐาน

  • ด้วยการสนับสนุนจาก ทีม Vite และ @vitejs/plugin-rsc จึงสามารถทำฟีเจอร์ React Server Components ได้
  • เอกสารและ test suite ของทีม Next.js เป็นรากฐานสำคัญที่ทำให้โปรเจกต์นี้ประสบความสำเร็จ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-02-25
ความคิดเห็นจาก Hacker News

  • แค่เมื่อเดือนก่อนยังได้ยินคนพูดว่า “ขอตัวอย่างเดียวที่ AI สร้างซอฟต์แวร์ระดับใช้งานเชิงพาณิชย์ได้จริง” แต่ตอนนี้ Cloudflare ก็เผยตัวอย่างออกมาหลายกรณีแล้ว และเมื่อวานนี้ Ladybird ก็ถูกพอร์ตไปเป็น Rust ด้วย AI
    จุดร่วมของกรณีเหล่านี้คือมี test suite ที่ดีมากอยู่แล้ว ทำให้งานง่ายขึ้น
    บางทีเพราะ AI ก็ได้ ที่ การพัฒนาแบบขับเคลื่อนด้วยการทดสอบ (TDD) อาจกลับมาอีกครั้ง

  • ฉันชอบ Next มากจริงๆ แต่ก็รัก Vite เหมือนกัน
    แต่ทีม Next ให้ความรู้สึกว่าโฟกัสกับฟีเจอร์สำหรับผู้ใช้ 0.1% ของทั้งหมด และเมินผู้ใช้อีก 99.9%
    ฟอร์กครั้งนี้ของ Cloudflare ดูเหมือนจะช่วยคลายความไม่พอใจแบบนั้นได้ การปรับปรุงประสิทธิภาพเป็นสิ่งที่ชุมชน Next ต้องการมานาน แต่ทีม Next เพิกเฉย และ Cloudflare กำลังพยายามแก้จุดนั้น
    ฉันชอบที่ Vite มอบ core layer ที่ดีกว่า Next มาก แต่ยังคงฟีเจอร์ของ Next เอาไว้
    หวังว่าฟอร์กนี้จะสำเร็จจนสามารถใช้ในบริษัทได้

    • Next เป็นเฟรมเวิร์กที่แย่ที่สุดรองจาก Rails เท่าที่ฉันเคยใช้มา มันมีโอเวอร์เฮดที่ไม่จำเป็นสำหรับแอปส่วนใหญ่
    • ก็สงสัยว่าจะคาดหวัง การซัพพอร์ต ระยะยาวจากโปรเจกต์เชิงทดลองที่วิศวกรคนหนึ่งทำในเวลาว่างได้จริงหรือ
    • ที่บริษัทเรามีแอป Next.js อายุเกิน 7 ปีหลายตัว ซึ่งยังทำงานได้ดีอยู่ แต่ทีม Next กลับเปลี่ยนโครงสร้างโดยไม่มีเหตุผล ทำให้ต้อง รีแฟกเตอร์ ซ้ำๆ เพราะการสิ้นสุดการซัพพอร์ต
    • อยากรู้ว่าคุณชอบอะไรใน Next ถ้าคุณค่าหลักคือการอินทิเกรตกับ Vercel พอตัดจุดนั้นออกไปแล้วก็สงสัยว่าเหลือเหตุผลอะไรให้เลือก Next
    • ฉันเกลียด Next และรัก Vite แอปโปรดักชันขนาดใหญ่ของบริษัทเราเป็น Next.js และ ความเร็วในการคอมไพล์ ช้ามากจนต้องอัปเกรดเป็น M4 Pro ทีม Next ก็มักเลี่ยงด้วยการบอกให้ “ไปอ่านเอกสาร” ตลอด ตัวเฟรมเวิร์กเองมันช้า

  • กรณีนี้แสดงให้เห็น แรงจูงใจของโอเพนซอร์ส ในยุค AI ได้ดีมาก
    ยิ่งทำเอกสารดีและกำหนดสัญญาการทำงานให้ชัด คนอื่นก็ยิ่ง ทำซ้ำ ได้ง่าย
    ถ้า Cloudflare ไม่ได้ใช้การทดสอบของ Next ผลลัพธ์แบบนี้ก็คงเป็นไปไม่ได้
    Next ค่อยๆ เติบโตแบบสะสมจนซับซ้อนขึ้น แต่เฟรมเวิร์กใหม่สามารถทำให้ server component เรียบง่ายได้ตั้งแต่แรก
    น่าทึ่งที่ตอนนี้ถูกใช้งานอยู่แล้วแม้แต่ในเว็บไซต์รัฐบาลสหรัฐฯ

    • โครงสร้างแบบนี้คือเมื่อองค์กรหนึ่งทดลอง API และวาง best practice แล้ว องค์กรอื่นก็หยิบไปใช้ต่อได้เลย
      แม้จะเป็นผลที่ Vercel ทำไว้เอง แต่กระแสแบบนี้อาจเป็นภัยต่อโปรเจกต์โอเพนซอร์สขนาดเล็กได้
    • ฉันไม่เห็นด้วยกับคำกล่าวที่ว่า Cloudflare คงทำไม่ได้หากไม่มีการทดสอบของ Next มีตัวอย่างมากมายของการจำลองระบบซับซ้อนผ่าน reverse engineering และเมื่อคำนึงถึงความเร็วในการวนซ้ำของ AI แล้ว แทบไม่มีอุปสรรคในการเริ่มต้นเลย
    • ถ้าจะไปทางโมเดล “โอเพนคอร์ + การทดสอบแบบปิด” สุดท้ายโอเพนซอร์สของจริงอาจกลายเป็น ตัวทดสอบหรือสเปก นั่นเอง

  • ก็สงสัยว่าจะเรียกว่า ‘นำมาเขียนใหม่’ ได้หรือไม่ ถ้ายังทำได้ไม่ถึงระดับ “Hello world”
    แถมยังสืบทอด test suite ของต้นฉบับมาตรงๆ และถ้าต้นฉบับรวมอยู่ในข้อมูลฝึก ก็ยากจะเรียกว่าเริ่มทำใหม่จากศูนย์จริงๆ
    (หลังจากนี้มีการยกตัวอย่างโดยอ้างประโยคที่มีลิขสิทธิ์ แต่ตัดออก)

  • สิ่งที่น่าสนใจคือเมื่อเดือนก่อน Cloudflare เพิ่ง ซื้อ Astro ไป
    ถ้า AI แทนที่ได้ง่ายขนาดนี้ แล้วทำไมต้องยอมจ่ายแพงเพื่อซื้อ Astro ด้วย?
    บางทีในระดับองค์กรอาจยังมองว่าการได้มาซึ่ง วิสัยทัศน์และความเป็นผู้นำ ของเฟรมเวิร์กยังสำคัญอยู่

    • โปรเจกต์นี้ดูเหมือนการทดลองที่ออกแนว ล้อเลียนคู่แข่ง มากกว่าจะเป็นงานจริงจังสำหรับโปรดักชัน รอดูผลอีกไม่กี่ปีคงรู้
    • Astro เป็น พาราไดม์ คนละแบบกับ Next ดูเหมือน Cloudflare ต้องการยึดตลาดเว็บแบบสแตติกผ่าน Astro
      ส่วน Next.js ผูกกับ Vercel มากกว่า ดังนั้น Cloudflare มีโอกาสสูงที่จะชี้นำให้ลูกค้า ย้าย จาก Next ไป Astro แบบเป็นธรรมชาติ
    • Astro เหมาะกับเว็บไซต์แบบสแตติกที่สุด ส่วน Next ก็เหมาะกับ เว็บไซต์แบบไดนามิก ด้วย
      เราใช้ Astro กับระบบเอกสารภายใน และสำหรับงานแบบนั้นมันยอดเยี่ยมมาก
    • ดูเหมือน Cloudflare แค่อยาก ดึงทราฟฟิก เข้าผลิตภัณฑ์ของตัวเอง ฉันช่วงนี้ย้ายไปใช้ Svelte แล้วและค่อนข้างพอใจ

  • Next.js เคยมีช่องโหว่ remote code execution (RCE) มาก่อน
    เพราะงั้นอย่างน้อยช่วงนี้ฉันคงไม่ใช้เวอร์ชันที่ AI สร้างเด็ดขาด

    • ฉันก็ตกใจกับจุดนั้นมากที่สุดเหมือนกัน เหตุผลที่ไม่ใช้ Next.js ในโปรเจกต์ส่วนตัวก็คือ ความกังวลด้านความปลอดภัย ตรงนี้เอง
      ถ้า AI สร้างโค้ดเป็นพันบรรทัด บั๊กแบบนี้ก็ยิ่งซ่อนอยู่ได้ง่ายขึ้น
    • แต่ปัญหานั้นไม่ใช่ของ Next.js เอง มันเป็น ช่องโหว่ของ React

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

    • (คำตอบจากวิศวกรของ Cloudflare) เป้าหมายไม่ใช่ ความสอดคล้องของฟีเจอร์แบบสมบูรณ์
      ตอนนี้ยังอยู่ในช่วงเริ่มต้น จึงอาจมีปัญหาที่ไม่ได้อยู่ในชุดทดสอบ
      เหตุผลที่โค้ดน้อยกว่ามากคือมันสร้างอยู่บน Vite และ React RSC plugin
    • น่าจะเป็นเพราะ Vite ช่วยจัดการ งานหนัก ไปได้มาก ทำให้โค้ดลดลง
    • พูดตรงๆ มันดูตลกนิดๆ เหมือน Cloudflare ไม่พอใจทีม Next แล้วตอบโต้ประมาณว่า “AI กับเด็กฝึกงานก็ทำได้”

  • ฉันค่อนข้างสงสัยกับคำพูดแนว “เอา AI มา reimplement X แล้วง่ายมาก”
    เป็นไปได้ว่ารายละเอียดและ ประวัติการแก้บั๊ก ถูกละไว้
    ถ้าผ่านการทดสอบได้ครบจริงฉันก็ยอมรับ แต่ถ้าไม่ใช่ก็เชื่อยาก

    • ฉันก็ไม่ได้เชื่อเต็มร้อยเหมือนกัน แต่ตามบทความบอกว่าได้นำ ยูนิตเทสต์ 2,000 รายการและ E2E test 400 รายการ ของ Next มาใช้และผ่านทั้งหมด

  • ฉันไม่เห็นด้วยกับคำพูดที่ว่า “abstraction ในซอฟต์แวร์คือสิ่งที่มนุษย์สร้างขึ้นเพื่อรับมือกับความซับซ้อน”
    abstraction เป็นเครื่องมือในการจับแก่นของความจริงและเพิ่ม การนำกลับมาใช้ซ้ำ
    อีกทั้ง ‘abstraction’ กับ ‘layer’ ก็ไม่เหมือนกัน layer ใกล้เคียงกับ การแยกความรับผิดชอบ มากกว่า และอาจมองได้ว่าเป็นรูปแบบหนึ่งของ abstraction

  • จุดที่น่าสนใจคือ “ต้นทุนรวมอยู่ที่ประมาณ โทเคนมูลค่า $1,100”