ย้ายเว็บ Next.js ไปรันที่ไหนก็ได้: Vinext 1.0 ของ Cloudflare สร้างแอป Next.js ด้วย Vite และย้าย prerender ไปทำหลัง deploy

ทีมที่ทำเว็บด้วย Next.js มักเจอคำถามเดียวกันเมื่อเว็บโตขึ้น คือจะย้ายไปรันบนแพลตฟอร์มอื่นได้แค่ไหนโดยไม่ต้องเขียนใหม่ Cloudflare ออก Vinext 1.0 เฟรมเวิร์กโอเพนซอร์สที่สร้างแอป Next.js เดิมด้วย Vite แทนเครื่องมือ build ของ Next.js ทำให้ deploy ได้ทั้ง Cloudflare Workers, Netlify และ AWS Lambda รองรับทั้ง App Router และ Pages Router และผ่านชุดทดสอบของ Next.js ในส่วนที่ลูกค้าใช้จริงเกิน 99%

Vinext คืออะไร และแก้ปัญหาอะไร

Next.js เป็นเฟรมเวิร์ก React ที่ได้รับความนิยมสูง แต่ระบบ build และการรันหลายส่วนออกแบบมาให้ทำงานดีที่สุดบนแพลตฟอร์มของผู้สร้าง การย้ายไปที่อื่นจึงมักต้องใช้ตัวแปลงเพิ่มเติม Vinext แก้ที่ต้นทาง โดยใช้ Vite ซึ่งเป็นเครื่องมือ build ที่ใช้กันแพร่หลายและออกแบบให้ต่อเข้ากับแพลตฟอร์มต่าง ๆ ได้ง่าย มาสร้างแอป Next.js แทน โครงการเริ่มเป็นการทดลองที่ใช้ AI ช่วยพัฒนาเมื่อเดือนกุมภาพันธ์ และขยับมาเป็นรุ่น 1.0 ที่ใช้งานจริงได้

รุ่น 1.0 รองรับอะไรบ้าง

Cache warming: ย้ายการสร้างหน้าล่วงหน้าไปทำหลัง deploy

เว็บใหญ่ที่มีหน้าหลายหมื่นหรือหลายแสน URL มักเสียเวลาส่วนใหญ่ตอน build ไปกับการสร้างหน้าล่วงหน้า ซึ่งหลายหน้ามีคนเข้าน้อยมาก Vinext เปลี่ยนให้ build เฉพาะโค้ด แล้วค่อยให้เครือข่ายของ Cloudflare สร้างหน้าและเก็บแคชหลัง deploy เสร็จ (cache warming) ผลคือเวลา build ลดลงสำหรับเว็บขนาดใหญ่ และหน้าที่มีคนเข้าจริงยังได้ความเร็วแบบหน้าสร้างล่วงหน้า ทั้งนี้บทความต้นทางไม่ได้เปิดเผยตัวเลขเวลา build ที่ลดลง

ทดสอบความเข้ากันได้อย่างไร

ทีมรันชุดทดสอบ end-to-end ของ Next.js กับ Vinext ทุกคืน และมีเอเจนต์อัตโนมัติไล่ดูการเปลี่ยนแปลงของ Next.js รุ่นทดลอง (canary) ทุกวัน เพื่อตามให้ทันรุ่นใหม่ ความเข้ากันได้ในฟีเจอร์ที่ลูกค้าใช้จริงอยู่เกิน 99% ซึ่งหมายความว่ายังมีบางกรณีที่ทำงานต่างจาก Next.js ต้นฉบับ ทีมที่จะย้ายจึงควรรันชุดทดสอบของตัวเองก่อนเสมอ

ลองย้ายโปรเจกต์เดิม

1. ตรวจความพร้อม ด้วยคำสั่ง npx vinext check ซึ่งบอกว่าโปรเจกต์ใช้ฟีเจอร์ที่ยังไม่รองรับหรือไม่
2. ตั้งค่าโปรเจกต์ ด้วย npx vinext init
3. deploy ขึ้น Cloudflare ด้วย npx @vinext/cloudflare deploy --warm-cache หรือเลือกตัวต่อของแพลตฟอร์มอื่น
4. รันชุดทดสอบเดิม และเทียบหน้าเว็บกับรุ่นเดิมก่อนสลับโดเมนจริง

ซอร์สโค้ดอยู่ที่ github.com/cloudflare/vinext และเอกสารอยู่ที่ vinext.dev

ข้อคิดสำหรับทีมพัฒนาไทย

จุดที่น่าสนใจไม่ใช่แค่การย้ายแพลตฟอร์ม แต่คือการแยกความเป็นเจ้าของโค้ดออกจากที่รัน ถ้าวันหนึ่งค่าโฮสต์หรือเงื่อนไขของแพลตฟอร์มเปลี่ยน ทีมที่ย้ายได้จะต่อรองได้มากกว่า ส่วนเว็บที่มีหน้าสินค้าหรือบทความจำนวนมาก แนวคิดสร้างหน้าหลัง deploy ช่วยให้ปล่อยงานได้ถี่ขึ้นโดยไม่ต้องรอ build นาน แต่ควรเริ่มจากโปรเจกต์ที่มีชุดทดสอบครอบคลุม เพราะความเข้ากันได้ยังไม่ถึง 100%

ทีมงาน Smart Cyber Tech รับทำเว็บ Next.js ทั้งเว็บองค์กร ร้านค้า และระบบหลังบ้าน โดยวางให้ย้ายแพลตฟอร์มได้และวัดความเร็วจากผู้ใช้จริง อ่านเรื่องความเร็วต่อได้ที่ข้อมูลความเร็วเว็บจากผู้ใช้จริงชุด BEACON ปรึกษาได้ที่ แบบฟอร์มติดต่อ