Next.js là gì và nó bổ sung những gì so với React?

Question

Accepted Answer

**Next.js** là một **framework** React full-stack. Bản thân React chỉ là một thư viện UI — nó render các component nhưng để lại routing, data fetching, server rendering và build tooling cho bạn tự lo. Next.js cung cấp tất cả những thứ đó sẵn dùng, cộng thêm một server runtime. ## React một mình bỏ sót những gì (và Next.js bổ sung) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Một ví dụ cụ thể: một route chỉ là một file ```tsx // app/about/page.tsx → tự động được phục vụ tại /about export default function About() { return

About us

; } ``` Với React thuần, bạn phải cài một router, cấu hình các route và thiết lập một quy trình build. Trong Next.js, việc tạo ra file *chính là* route. ## Tại sao các team chọn nó - **SEO & hiệu năng** — HTML được render trên server nghĩa là nội dung đã có trong response đầu tiên (tốt cho crawler và first paint nhanh), khác với một React SPA chỉ chạy ở client gửi đi một trang trắng rồi mới hydrate. - **Full-stack trong một project** — frontend và backend (API routes, Server Actions) sống chung với nhau. - **Defaults sẵn sàng cho production** — code splitting tự động, tối ưu image/font, caching. ## Tại sao điều này quan trọng Next.js là framework React phổ biến nhất bởi nó biến React từ một thư viện UI thành một nền tảng ứng dụng hoàn chỉnh — xử lý chiến lược rendering, routing, dữ liệu và một backend để bạn tập trung vào tính năng thay vì hạ tầng. Đây là lựa chọn mặc định khi bạn cần SEO, hiệu năng, hoặc logic phía server với React.