A. Sơ lược

Sau thành công của bản cập nhật Next.js 15.2, Vercel tiếp tục mang đến phiên bản Next.js 15.3 với hàng loạt thay đổi mạnh mẽ, tập trung vào hiệu suất, trải nghiệm lập trình và khả năng mở rộng dự án lớn. Bản nâng cấp này hứa hẹn sẽ mở ra nhiều cơ hội mới cho cộng đồng lập trình viên hiện đại.

Để bắt đầu nâng cấp lên Next.js 15.3, bạn chỉ cần chạy lệnh đơn giản sau:

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest # ...or upgrade manually
npm install next@latest react@latest react-dom@latest # ...or start a new project
npx create-next-app@latest

Hãy sẵn sàng khám phá những cải tiến thú vị từ Next.js 15.3!

1. Turbopack cho Production Builds (Alpha)

1. Turbopack cho Production Builds (Alpha) Hiệu suất vượt trội: Turbopack hiện hỗ trợ next build --turbopack ở chế độ alpha, mang lại tốc độ build nhanh hơn đáng kể:

• Nhanh hơn 28% trên 4 lõi CPU
• Nhanh hơn 60% trên 16 lõi
• Nhanh hơn 83% trên 30 lõi

Độ ổn định cao: Đã vượt qua hơn 99% bài kiểm tra tích hợp, tuy nhiên vẫn được khuyến nghị sử dụng trong môi trường staging hoặc preview do đang ở giai đoạn alpha.

2. Cấu hình Turbopack trong next.config.ts đã được chuyển từ experimental.turbo lên thành khóa turbopack cấp cao nhất:

import type { NextConfig } from 'next'; const nextConfig: NextConfig = { turbopack: { rules: { '*.svg': { loaders: ['@svgr/webpack'], as: '*.js', }, }, },
};

Để đảm bảo khả năng tương thích, tùy chọn experimental.turbo vẫn sẽ được hỗ trợ cho đến phiên bản Next.js lớn tiếp theo.

3. Hỗ trợ Rspack (Experimental)

Next.js 15.3 giới thiệu hỗ trợ thử nghiệm cho Rspack, một bundler thay thế tương thích với Webpack, mang lại hiệu suất cao hơn và khả năng tương thích tốt với hệ sinh thái Webpack .​

4. Client Instrumentation Hook

Cho phép chạy mã theo dõi hiệu suất, phân tích và giám sát lỗi ngay trước khi frontend được khởi tạo.

Chỉ cần thêm tệp instrumentation-client.ts hoặc .js vào thư mục gốc để khởi tạo các công cụ như Sentry hoặc Google Analytics .

5. Navigation Hooks Mới

Cung cấp các hook như useLinkStatus và onNavigate để kiểm soát điều hướng phía client, cho phép tạo các trạng thái tải tùy chỉnh và hủy điều hướng khi cần .​

6. Cải tiến Plugin TypeScript

Tăng hiệu suất plugin TypeScript lên đến 60% trong các dự án lớn, cải thiện thời gian phản hồi và hỗ trợ tốt hơn cho các tính năng như kiểm tra lỗi và gợi ý props .​

7. Thay đổi trong Cấu hình Turbopack

Cấu hình Turbopack đã được chuyển từ experimental.turbo sang khóa turbopack ở cấp cao nhất trong next.config.ts, giúp cấu hình rõ ràng và dễ quản lý hơn .​

8. So sánh với Next.js 15.2

B. Một số lỗi gặp phải khi nâng cấp lên Nextjs 15.3

Xung đột thư viện framer-motion

Nếu bạn đang dùng framer-motion version không phải latest bạn sẽ gặp phải lỗi

Module not found: Can't resolve './path.mjs' 

-🪲Lý do :

Nó xảy ra trong file build-attrs.mjs của thư viện framer-motion. Cụ thể, framer-motion đang cố import một file ./path.mjs, nhưng file này không tồn tại.

framer-motion (phiên bản bạn đang dùng) không tương thích hoàn toàn với Next.js 15.3. Có thể framer-motion đó được viết cho hệ module cũ (hoặc đường dẫn relative bị lỗi sau khi Next 15.3 upgrade build process với Turbopack).

-🏁Cách fix nhanh:

Update framer-motion lên bản mới nhất.