Next.js 15 có gì mới?

Dưới đây là những điểm nổi bật trong bản cập nhật Next.js 15:

1. Tích hợp Partial Prerendering (PPR) – Kết hợp SSR và Static một cách thông minh

Đây là một trong những tính năng quan trọng nhất. Partial Prerendering cho phép bạn kết hợp giữa Static Rendering và Server Rendering trên cùng một trang.

• Phần nội dung tĩnh được render trước và lưu vào HTML.

• Phần nội dung động sẽ được thay thế (streaming) khi có dữ liệu từ server.

Lợi ích:

• Cải thiện tốc độ tải trang ban đầu.

• Giảm áp lực cho server.

• Tối ưu SEO và trải nghiệm người dùng.

Hiện tại, tính năng này đang ở trạng thái beta và hoạt động tốt với App Router.

2. Tối ưu hóa hiệu suất render với React Compiler

React Compiler là một công cụ mới từ Meta giúp tự động tối ưu hóa các component React mà không cần ghi nhớ useCallback, useMemo, hoặc tối ưu hóa thủ công.

Trong Next.js 15:

• React Compiler được tích hợp mặc định (trạng thái thử nghiệm).

• Giúp giảm re-render không cần thiết.

• Hỗ trợ viết code "sạch" hơn, không cần lo về memo hóa.

3. Cập nhật App Router và nâng cấp cấu trúc thư mục

App Router tiếp tục được cải thiện, đặc biệt ở các điểm:

• Hỗ trợ tốt hơn cho metadata (SEO, Open Graph, structured data).

• Cải tiến <Link /> và <Image /> để dễ dùng hơn, ít bị lỗi.

• Hiển thị tốt hơn khi xảy ra lỗi rendering (error boundaries và loading states mượt hơn).

Ngoài ra, cấu trúc thư mục sử dụng App Router ngày càng rõ ràng và tách biệt tốt giữa layout, template, page, error, loading.

4. Tích hợp tốt hơn với Turbopack (thay thế Webpack)

Next.js 15 tiếp tục hoàn thiện hỗ trợ cho Turbopack – bundler mới được xây dựng bằng Rust.

So với Webpack:

• Build nhanh hơn đáng kể.

• Hỗ trợ HMR (hot module reload) gần như tức thì.

• Hướng đến mục tiêu tối ưu cho các project lớn.

Hiện Turbopack đã hỗ trợ nhiều use case hơn, nhưng vẫn chưa thay thế hoàn toàn Webpack – bạn có thể chọn sử dụng nếu muốn thử.

5. Hỗ trợ đầy đủ React 19 (beta)

Next.js 15 đã tương thích tốt với React 19 (đang ở giai đoạn beta), bao gồm:

• Action hooks: viết code async mà không cần tách logic quá nhiều.

• Form actions: xử lý form server-side dễ hơn, an toàn hơn.

• Async context: chia sẻ dữ liệu trong cây component một cách linh hoạt hơn.

Việc hỗ trợ React 19 giúp bạn chuẩn bị tốt hơn khi React bản stable chính thức ra mắt.

6. Cải tiến Dev Experience

Next.js 15 tiếp tục đầu tư mạnh cho trải nghiệm lập trình viên:

• Cảnh báo lỗi chi tiết, dễ hiểu hơn.

• Log rõ ràng trong quá trình build và deploy.

• Hỗ trợ linting và kiểm tra kiểu mạnh mẽ hơn (đặc biệt khi dùng TypeScript).

7. Cập nhật một số API và behavior

• next/image: Cải thiện hiệu suất và đơn giản hóa API.

• next/font: Hỗ trợ tốt hơn cho Google Fonts tự host.

• next/navigation: Hỗ trợ thêm các API giúp điều hướng linh hoạt hơn.

Next.js 15 là một bước tiến quan trọng, đặc biệt với Partial Prerendering và sự tích hợp sâu hơn với React Compiler. Nếu bạn đang phát triển ứng dụng với App Router, đây là lúc rất phù hợp để thử nghiệm và cập nhật.

Dù vẫn còn một số tính năng ở trạng thái beta, nhưng Next.js 15 cho thấy tầm nhìn dài hạn của Vercel trong việc mang lại trải nghiệm fullstack React mượt mà và hiệu quả hơn bao giờ hết.

Bạn đang dùng phiên bản nào của Next.js? Đã thử Partial Prerendering chưa? Hãy chia sẻ trải nghiệm của bạn nhé!