เปิดตัว Next.js 15 เวอร์ชันทางการ

 (nextjs.org)
11 คะแนน โดย ragingwind 2024-10-22 | 5 ความคิดเห็น | แชร์ทาง WhatsApp

Next.js 15 เวอร์ชันทางการได้เปิดตัวให้ทันงานคอนเฟอเรนซ์ปี 2024 แล้ว ด้านล่างนี้จะไม่รวมการเปลี่ยนแปลงที่ได้อธิบายไว้ใน Next.js 15 RC 2 ก่อนหน้า หากต้องการทราบรายละเอียดการเปลี่ยนแปลง แนะนำให้อ่านส่วนนั้นก่อน

  • Caching Semantics (Breaking): สำหรับพฤติกรรมต่อไปนี้ จะไม่มีการแคชเป็นค่าเริ่มต้นอีกต่อไป เหตุผลของการเปลี่ยนแปลงคืออาจเกิดปัญหาเมื่อทำงานร่วมกับ Partial Prerendering(PPR) หรือไลบรารีของบุคคลที่สาม จึงมีการทบทวนแนวทางการแคชเริ่มต้นใหม่ เดิมทีค่าเริ่มต้นคือ force-cache แต่ตอนนี้เปลี่ยนเป็น no-store เพื่อไม่ให้มีการแคชโดยปริยาย ทำให้ได้ประสิทธิภาพและข้อมูลที่คาดการณ์ได้มากขึ้น

    • คำขอ fetch จะไม่ถูกแคชโดยค่าเริ่มต้นอีกต่อไป และใช้ no-store เป็นค่าปริยาย หากจำเป็นสามารถตั้งค่าการแคชได้ด้วยตัวเลือก force-cache
    • GET Route Handlers ก็จะไม่ถูกแคชโดยค่าเริ่มต้นเช่นกัน สามารถใช้การแคชได้ผ่านตัวเลือก force-static
    • Client Router Cache จะสะท้อนข้อมูลล่าสุดเมื่อมีการย้ายหน้า และจะไม่ถูกแคชโดยค่าเริ่มต้น หากต้องการย้อนกลับไปใช้พฤติกรรมเดิม สามารถตั้งค่าตัวเลือก staleTimes ได้

  • React 19 Support: Next.js 15 ได้อัปเดตให้สอดคล้องกับ React 19 และยังคงรองรับ React 18 บน Pages Router ด้วย App Router ใช้ React 19 RC และจากการสะท้อนความคิดเห็นของชุมชน ทำให้โปรเจ็กต์ที่ใช้ React 18 สามารถอัปเกรดไปเป็น React 19 ได้เช่นกัน นอกจากนี้ยังมีการนำ React Compiler เข้ามาใช้เพื่อเปิดทางสู่การปรับแต่งประสิทธิภาพแบบอัตโนมัติ และลดความจำเป็นของการทำ memoization ด้วยตนเอง การเปลี่ยนแปลงเหล่านี้มีขึ้นเพื่อเตรียมพร้อมสำหรับการเปิดตัว React 19 เวอร์ชันทางการในอนาคต

    • React Compiler (Experimental): React Compiler คือคอมไพเลอร์แบบทดลองที่สร้างโดยทีม React ของ Meta ซึ่งเข้าใจความหมายของ JavaScript และกฎของ React เพื่อปรับโค้ดให้เหมาะสมโดยอัตโนมัติ ช่วยลดความจำเป็นที่นักพัฒนาจะต้องทำ memoization ด้วยตนเองผ่าน API อย่าง useMemo และ useCallback โดย Next.js 15 รองรับฟีเจอร์นี้แล้ว แต่ขณะนี้มีให้ใช้ในรูปแบบ Babel plugin เท่านั้น และอาจทำให้เวลา build ช้าลง
    • Hydration Error Improvements: Next.js 15 ได้ต่อยอดการปรับปรุงข้อความแสดงข้อผิดพลาดและวิธีจัดการ hydration error จากเวอร์ชันก่อนหน้าให้ดียิ่งขึ้น ตอนนี้เมื่อเกิด hydration error ระบบจะแสดงทั้งซอร์สโค้ดต้นทางของข้อผิดพลาดและข้อเสนอแนะในการแก้ปัญหาไปพร้อมกัน ช่วยให้นักพัฒนาเข้าใจและแก้ไขปัญหาได้ง่ายขึ้น

  • Turbopack Dev: ตอนนี้ Turbopack มีความเสถียรแล้ว และความเร็วที่ดีขึ้นจะช่วยยกระดับประสบการณ์การพัฒนาของคุณ การเริ่มต้น local server เร็วขึ้นประมาณ 76%, Fast Refresh เร็วขึ้น 96%, และการคอมไพล์ route แรกโดยไม่มีแคชดีขึ้นประมาณ 45%

  • unstable_after API (Experimental): unstable_after เป็น API แบบทดลองที่เพิ่มเข้ามาใน Next.js 15 เพื่อให้สามารถจัดการงานรอง เช่น logging หรือ analytics หลังจากตอบสนองต่อผู้ใช้แล้ว เนื่องจากฟังก์ชันแบบ serverless จะหยุดทำงานทันทีเมื่อส่ง response เสร็จ จึงใช้ after() เพื่อเลื่อนการทำงานให้รันต่อหลังจาก response เสร็จสิ้นได้ สามารถใช้ซิงก์ข้อมูลอย่าง loading หรือข้อมูลสถิติกับระบบภายนอกได้

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

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

 
vipeen 2024-10-23

โปรเจกต์ใหม่ผมไปกับ vue3 ไม่ก็ sveltekit ครับ
 
zillionstar 2024-10-22

React ที่ Next15 รองรับเริ่มตั้งแต่ 19 ขึ้นไปนี่แหละ.. แต่ React 19 ก็ยังไม่ได้ถอดสถานะ RC ออกเลยนะ
 
kbumsik 2024-10-23

อย่างที่ท่านอื่นพูดไว้ มีประเด็นจากการเปลี่ยนแปลงฟีเจอร์อยู่ เลยยังนับว่าเป็น rc แต่ถ้าไม่นับส่วนนั้นก็น่าจะมองว่า stable ได้ครับ
 
2024-10-22
[ความคิดเห็นนี้ถูกซ่อน]
 
ragingwind 2024-10-22

ทวีตถาม-ตอบจากผู้ดูแลที่เกี่ยวข้องกับ https://x.com/timneutkens/status/1848464958830612729