Next.js 16 มาพร้อมกับการปรับปรุงครั้งใหญ่หลายด้าน ตั้งแต่ Turbopack ที่เสถียรแล้ว, Cache Components ใหม่, การรองรับ React Compiler, ไปจนถึงการปรับปรุงระบบ routing และ caching ให้ดียิ่งขึ้น
Kawin Suangkaew

Next.js 16 มาพร้อมกับการปรับปรุงครั้งใหญ่หลายด้าน ตั้งแต่ Turbopack ที่เสถียรแล้ว, Cache Components ใหม่, การรองรับ React Compiler, ไปจนถึงการปรับปรุงระบบ routing และ caching ให้ดียิ่งขึ้น มาดูกันว่ามีอะไรน่าสนใจบ้าง
หนึ่งในการเปลี่ยนแปลงที่สำคัญที่สุดของ Next.js 16 คือ Turbopack ที่ประกาศว่าเสถียรแล้วสำหรับทั้ง development และ production builds และกลายเป็น default bundler สำหรับโปรเจกต์ Next.js ทุกโปรเจกต์ใหม่ ตัวเลขที่น่าประทับใจคือมากกว่า 50% ของ development sessions และ 20% ของ production builds บน Next.js 15.3+ กำลังทำงานบน Turbopack อยู่แล้ว
ด้วย Turbopack นักพัฒนาสามารถคาดหวังได้ถึง:
หากโปรเจกต์ของคุณยังใช้ webpack อยู่ คุณสามารถบังคับใช้ webpack ได้ด้วยคำสั่ง `next dev --webpack` และ `next build --webpack`
Cache Components เป็นชุดฟีเจอร์ใหม่ที่ออกแบบมาเพื่อทำให้การ caching ใน Next.js ชัดเจนและยืดหยุ่นมากขึ้น มันมาพร้อมกับ directive ใหม่ "use cache" ซึ่งสามารถใช้เพื่อ cache pages, components และ functions โดยใช้ compiler ในการสร้าง cache keys โดยอัตโนมัติ
ต่างจาก implicit caching ในเวอร์ชันก่อนหน้าของ App Router การ caching ด้วย Cache Components เป็น opt-in ทั้งหมด ซึ่งหมายความว่า dynamic code ในทุก page, layout หรือ API route จะทำงานที่ request time โดยค่าเริ่มต้น ให้ Next.js มี out-of-the-box experience ที่ตรงกับความคาดหวังของนักพัฒนามากขึ้น
const nextConfig = {
cacheComponents: true,
};
export default nextConfig;
การรองรับ React Compiler ถึงเสถียรแล้วใน Next.js 16 ตามการเปิดตัว React Compiler 1.0 React Compiler จะ memoize components โดยอัตโนมัติ ลดการ re-render ที่ไม่จำเป็นโดยไม่ต้องเปลี่ยนแปลงโค้ดด้วยตัวเอง
การ configuration option `reactCompiler` ถูกย้ายจาก experimental ไปสู่ stable แล้ว แต่ยังไม่ถูกเปิดใช้งานโดยค่าเริ่มต้น เนื่องจากทีมงานยังคงเก็บข้อมูล build performance อยู่ คาดหวังได้ว่า compile times ใน development และระหว่าง builds จะสูงขึ้นเมื่อเปิดใช้งานตัวเลือกนี้ เนื่องจาก React Compiler พึ่งพา Babel
npm install babel-plugin-react-compiler@latest
Next.js 16 แนะนำ Next.js Devtools MCP ซึ่งเป็น Model Context Protocol integration สำหรับ AI-assisted debugging พร้อม contextual insight เข้าถึงแอปพลิเคชันของคุณ MCP ช่วยให้ AI agents สามารถ:
นี่เป็นการเปลี่ยนแปลงครั้งสำคัญสำหรับนักพัฒนาที่ใช้ AI ในการ debug และพัฒนาแอปพลิเคชัน
`proxy.ts` มาแทนที่ `middleware.ts` และทำให้ network boundary ของแอปพลิเคชันชัดเจน `proxy.ts` ทำงานบน Node.js runtime ทำให้มี runtime ที่คาดเดาได้เพียงตัวเดียวสำหรับ request interception
export default function proxy(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url));
}
เปลี่ยนชื่อ middleware.ts เป็น proxy.ts และเปลี่ยนชื่อ exported function เป็น proxy - logic ยังคงเหมือนเดิม
Next.js 16 มาพร้อมกับการปรับปรุง routing และ navigation system อย่างสมบูรณ์ ทำให้ page transitions เบาขึ้นและเร็วขึ้น
เมื่อ prefetching URLs หลายตัวที่มี layout ร่วมกัน layout จะถูกดาวน์โหลดเพียงครั้งเดียวแทนที่จะดาวน์โหลดแยกกันสำหรับแต่ละ Link ตัวอย่างเช่น หน้าที่มี 50 product links ตอนนี้จะดาวน์โหลด shared layout เพียงครั้งเดียวแทนที่จะเป็น 50 ครั้ง ลดขนาด network transfer อย่างมาก
Next.js ตอนนี้ prefetching เฉพาะส่วนที่ยังไม่อยู่ใน cache แทนที่จะเป็นทั้งหน้า prefetch cache ตอนนี้:
Next.js 16 แนะนำ caching APIs ที่ปรับปรุงใหม่สำหรับการควบคุม cache behavior ที่ชัดเจนมากขึ้น
`revalidateTag()` ตอนนี้ต้องการ `cacheLife` profile เป็น argument ที่สองเพื่อเปิดใช้งาน stale-while-revalidate (SWR) behavior:
import { revalidateTag } from 'next/cache';
// ใช้ built-in cacheLife profile (แนะนำ 'max' สำหรับกรณีส่วนใหญ่)
revalidateTag('blog-posts', 'max');
// หรือใช้ profiles อื่นๆ
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');
`updateTag()` เป็น Server Actions API ใหม่ที่ให้ read-your-writes semantics, expire และอ่านข้อมูลสดใน request เดียวกัน สมบูรณ์แบบสำหรับ forms, user settings และ workflows ที่ผู้ใช้คาดหวังว่าจะเห็นการอัพเดทของตัวเองทันที
สำหรับการอัพเกรด ทีมงานแนะนำให้ใช้ automated upgrade CLI:
# ใช้ automated upgrade CLI
npx @next/codemod@canary upgrade latest
# หรืออัพเกรดด้วยตัวเอง
npm install next@latest react@latest react-dom@latest
Next.js 16 นำมาซึ่งการปรับปรุงที่สำคัญหลายด้านที่จะช่วยให้นักพัฒนาสร้างแอปพลิเคชันที่เร็วขึ้นและมีประสิทธิภาพมากขึ้น ตั้งแต่ Turbopack ที่เสถียรแล้ว, Cache Components ใหม่, การรองรับ React Compiler, ไปจนถึงการปรับปรุง routing และ caching APIs
สิ่งสำคัญคือต้องจำไว้ว่ามี breaking changes บางอย่าง เช่น Async params, next/image defaults และอื่นๆ ดังนั้นควรอ่าน upgrade guide อย่างละเอียดก่อนอัพเกรด
อย่าลืมอ่าน upgrade guide ที่ https://nextjs.org/docs/app/guides/upgrading/version-16 ก่อนอัพเกรดโปรเจกต์ของคุณ