Nextjs 15 ra mắt cùng với nhiều tính năng như thời gian build nhanh hơn 700 lần, chưa bao giờ dễ dàng hơn để tạo ra các ứng dụng web full-stack với hiệu suất đáng kinh ngạc.
1. Nâng cấp create-next-app: giao diện gọn gàng hơn, build nhanh hơn 700 lần
Màn home default thay đổi
Từ:
Thành:
Webpack → Turbopack
Turbopack: Được Nextjs giới thiệu là pack mô-đun nhanh nhất trên thế giới nhanh hơn 700x so với webpack và 10x với Vite.
Được tích hợp sẵn và câu lệnh tạo:
2. React Compiler, Hỗ trợ React 19 và “user-friendly” errors
Nextjs 15 mang đến những tính năng tối ưu hóa như ghi nhớ tự động
— loại bỏ nhu cầu sử dụng useMemo và useCallback trong phần lớn các trường hợp.
Tiết kiệm thời gian, prevent sai sót, đẩy nhanh tiến độ.
Và việc thiết lập thực sự đơn giản: Bạn chỉ cần cài đặt babel-plugin-react-compiler:
install babel-plugin-react-compilerVà thêm vào next.config.js
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
module.exports = nextConfig;Hỗ trợ React 19 mang đến những nâng cấp như client và server Actions.
3. Hiển thị hydration errors tốt hơn
Next.js 15 đặt tiêu chuẩn cao hơn: Giờ đây có thể đưa ra đề xuất thông minh về các cách có thể khắc phục lỗi.
Từ các phiên bản trước mã lỗi sẽ được hiển thị như:
Và giờ sẽ chi tiết hơn:
4.Cơ chế caching mới
Không còn bộ nhớ đệm tự động nữa!
- Gửi request
fetch() - route:
GET,POST, v.v. - Điều hướng phía client. Nhưng nếu bạn vẫn muốn cache
fetch():
// `cache` mặc định là `no-store` trước v15
fetch('https://example.com', { cache: 'force-cache' });Sau đó, bạn có thể cache những thứ khác với một số tùy chọn next.config.js.
5.Partial Prerendering (PPR)
import { Suspense } from 'react';
import {
StaticComponent,
DynamicComponent,
} from '@/app/ui';
export const experimental_ppr = true;
export default function Page() {
return (
<>
<StaticComponent />
<Suspense fallback={...}>
<DynamicComponent />
</Suspense>
</>
);
}PPR kết hợp tạo tĩnh và động trong cùng một trang.
Cải thiện đáng kể hiệu suất bằng cách tải HTML tĩnh ngay lập tức và truyền phần động trong cùng một yêu cầu HTTP.
Tất cả những gì bạn cần là trong next.config.js:
const nextConfig = {
experimental: {
ppr: 'incremental',
},
};
module.exports = nextConfig;Next/after
Next.js 15 cung cấp cho bạn một cách clean để tách biệt các tác vụ thiết yếu và không thiết yếu khỏi mỗi yêu cầu máy chủ:
- Thiết yếu: Kiểm tra xác thực, cập nhật cơ sở dữ liệu, v.v.
- Không thiết yếu: Ghi log, phân tích, v.v.
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
export default function Layout({ children }) {
// Secondary task
after(() => {
log();
});
// Primary tasks
// fetch() from DB
return <>{children}</>;
}Bắt đầu sử dụng nó ngay bây giờ với experimental.after:
const nextConfig = {
experimental: {
after: true,
},
};
module.exports = nextConfig;Đây chỉ là 5 trong số tất cả các tính năng mới có tác động lớn từ Next.js 15. Next có thể dùng thử ngay bây giờ với npx create-next-app@rc để bắt đầu tận hưởng thời gian build nhanh hơn đáng kể.
