Next.js 16 มีอะไรใหม่? รวมฟีเจอร์ล่าสุดและการอัพเกรดที่นักพัฒนาต้องรู้

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

Turbopack พร้อมใช้งานแล้วอย่างเสถียร

หนึ่งในการเปลี่ยนแปลงที่สำคัญที่สุดของ Next.js 16 คือ Turbopack ที่ประกาศว่าเสถียรแล้วสำหรับทั้ง development และ production builds และกลายเป็น default bundler สำหรับโปรเจกต์ Next.js ทุกโปรเจกต์ใหม่ ตัวเลขที่น่าประทับใจคือมากกว่า 50% ของ development sessions และ 20% ของ production builds บน Next.js 15.3+ กำลังทำงานบน Turbopack อยู่แล้ว

ด้วย Turbopack นักพัฒนาสามารถคาดหวังได้ถึง:

• Production builds ที่เร็วขึ้น 2-5 เท่า
• Fast Refresh ที่เร็วขึ้นถึง 10 เท่า
• File system caching ใน development mode สำหรับ compile times ที่เร็วขึ้นอีก

Cache Components: ระบบ Cache ใหม่ที่ชัดเจนและยืดหยุ่น

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 ที่ตรงกับความคาดหวังของนักพัฒนามากขึ้น

วิธีเปิดใช้งาน Cache Components

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

React Compiler Support เสถียรแล้ว

การรองรับ 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 Devtools MCP: AI-Assisted Debugging

Next.js 16 แนะนำ Next.js Devtools MCP ซึ่งเป็น Model Context Protocol integration สำหรับ AI-assisted debugging พร้อม contextual insight เข้าถึงแอปพลิเคชันของคุณ MCP ช่วยให้ AI agents สามารถ:

• เข้าถึงความรู้เกี่ยวกับ Next.js: Routing, caching และ rendering behavior
• ดู logs แบบ unified: Browser และ server logs โดยไม่ต้องสลับ context
• เข้าถึง errors โดยอัตโนมัติ: Detailed stack traces โดยไม่ต้อง copy ด้วยตัวเอง
• เข้าใจ context ของ page: เข้าใจ active route

นี่เป็นการเปลี่ยนแปลงครั้งสำคัญสำหรับนักพัฒนาที่ใช้ AI ในการ debug และพัฒนาแอปพลิเคชัน

proxy.ts แทนที่ middleware.ts

`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));
}

Enhanced Routing และ Navigation

Next.js 16 มาพร้อมกับการปรับปรุง routing และ navigation system อย่างสมบูรณ์ ทำให้ page transitions เบาขึ้นและเร็วขึ้น

Layout Deduplication

เมื่อ prefetching URLs หลายตัวที่มี layout ร่วมกัน layout จะถูกดาวน์โหลดเพียงครั้งเดียวแทนที่จะดาวน์โหลดแยกกันสำหรับแต่ละ Link ตัวอย่างเช่น หน้าที่มี 50 product links ตอนนี้จะดาวน์โหลด shared layout เพียงครั้งเดียวแทนที่จะเป็น 50 ครั้ง ลดขนาด network transfer อย่างมาก

Incremental Prefetching

Next.js ตอนนี้ prefetching เฉพาะส่วนที่ยังไม่อยู่ใน cache แทนที่จะเป็นทั้งหน้า prefetch cache ตอนนี้:

• ยกเลิก requests เมื่อ link ออกจาก viewport
• จัดลำดับความสำคัญของ link prefetching เมื่อ hover หรือเมื่อกลับเข้า viewport
• Re-prefetch links เมื่อข้อมูลไม่ valid อีกต่อไป
• ทำงานได้ดีกับฟีเจอร์ใหม่อย่าง Cache Components

Improved Caching APIs

Next.js 16 แนะนำ caching APIs ที่ปรับปรุงใหม่สำหรับการควบคุม cache behavior ที่ชัดเจนมากขึ้น

revalidateTag() อัพเดท

`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() ใหม่

`updateTag()` เป็น Server Actions API ใหม่ที่ให้ read-your-writes semantics, expire และอ่านข้อมูลสดใน request เดียวกัน สมบูรณ์แบบสำหรับ forms, user settings และ workflows ที่ผู้ใช้คาดหวังว่าจะเห็นการอัพเดทของตัวเองทันที

การอัพเกรดจาก Next.js เวอร์ชันก่อนหน้า

สำหรับการอัพเกรด ทีมงานแนะนำให้ใช้ 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 อย่างละเอียดก่อนอัพเกรด

แหล่งที่มา

• Next.js Blog - Next.js 16
• Next.js Blog - Building Next.js for an agentic future
• Next.js Blog - Security Advisory: CVE-2025-66478