Next.js: Framework React cho web app full-stack
vercel/next.jsNext.js là một framework React của Vercel để dựng ứng dụng web full-stack, với routing theo file, server rendering và static generation tích hợp sẵn. Thay vì tự nối router, bundler và chiến lược render lên React thuần, bạn có sẵn những quyết định đó và chọn chế độ render cho từng route.
Hãy chọn Next.js nếu bạn đang dựng một ứng dụng React cần server rendering, các trang thân thiện SEO, hoặc pha trộn route tĩnh và động, và bạn muốn dùng các mặc định hợp lý thay vì tự lắp routing, bundling và data fetching. Bỏ qua nếu bạn chỉ ship một SPA nhỏ chạy hoàn toàn ở client, nơi Vite cộng React Router nhẹ hơn, hoặc bạn cố ý muốn tránh gắn kiến trúc của mình vào các mặc định triển khai của Vercel.
Vấn đề nó giải quyết
React thuần được phát hành như một thư viện chạy ở client: nó render trong trình duyệt và để lại routing, bundling, server rendering và data fetching cho bạn tự nối vào nhau. Đó là một đống quyết định và code kết dính trước khi bạn viết một tính năng, và việc chỉ render ở client làm hại SEO cùng lần vẽ đầu tiên trên các trang nội dung. Next.js ra đời để trả lời những câu hỏi đó bằng các mặc định — một router, một pipeline build và nhiều chế độ render — để một đội React ship được app full-stack mà không phải lắp cả stack từ đầu.
Đây là gì?
Next.js là một framework React mã nguồn mở (giấy phép MIT) do Vercel duy trì để dựng ứng dụng web full-stack. Nó bổ sung routing theo file, nhiều chế độ render — server-side rendering, static site generation và React Server Components — cùng một hệ thống build tích hợp trên nền React. README nói nó mở rộng các tính năng React mới nhất và dùng công cụ JavaScript viết bằng Rust để build nhanh hơn. Dự án viết chủ yếu bằng JavaScript và là một trong những repo web nhiều sao nhất trên GitHub, ở khoảng 140k sao.
Vì sao đang được chú ý
Next.js nằm ở trung tâm cách nhiều đội viết React ngày nay, và được theo dõi sát vì đây thường là nơi các tính năng React mới xuất hiện đầu tiên — App Router và React Server Components ra mắt ở đây trước hầu hết các framework khác. README lưu ý nó được một số công ty lớn nhất thế giới sử dụng. Với khoảng 140k sao và 31k fork, đây là một trong những repo framework nổi bật nhất trên GitHub, và mỗi bản phát hành lớn thường làm thay đổi cách người ta cấu trúc app React.
Tính năng chính
- ✓Routing theo file: cấu trúc thư mục dưới app/ (hoặc pages/) trở thành route của bạn, không cần một file cấu hình route riêng để duy trì
- ✓Nhiều chế độ render — server-side rendering, static site generation (SSG) và render ở client — chọn được cho từng route
- ✓React Server Components và App Router, nên component có thể chạy trên server và stream về trình duyệt
- ✓Công cụ build tích hợp, gồm công cụ JavaScript viết bằng Rust mà README ghi công cho việc build nhanh hơn
- ✓Full-stack trong một dự án: API routes và server functions nằm chung với code UI của bạn
- ✓Giấy phép MIT và mã nguồn mở, được Vercel hậu thuẫn cùng một cộng đồng đóng góp lớn
Trường hợp dùng tốt nhất
- •Trang nội dung và trang marketing cần HTML render ở server hoặc tạo tĩnh, thân thiện SEO
- •App full-stack nơi frontend và API backend nằm trong một codebase React
- •Thương mại điện tử và dashboard pha trộn trang tĩnh với dữ liệu động theo từng request
- •Blog và tài liệu dựng dạng site tĩnh (tag của chính repo gồm blog và static-site-generator)
Cách cài đặt / dùng thử
Next.js được công bố trên npm với tên `next`. Điểm bắt đầu quen thuộc là `npx create-next-app@latest`, lệnh này dựng một dự án với React và toolchain đã cấu hình sẵn. Bạn cũng có thể thêm nó vào một app có sẵn bằng `npm install next react react-dom`. Các bước thiết lập đầy đủ nằm trong tài liệu tại nextjs.org/docs.
Cách sử dụng
Bạn định nghĩa trang bằng cách thêm file dưới thư mục app/ (hoặc pages/); mỗi file export một component React trở thành một route. Chạy `next dev` để có server dev cục bộ, `next build` để tạo bản build tối ưu, và `next start` để phục vụ nó. Chế độ render được chọn cho từng route — mặc định là tĩnh, render ở server hoặc stream ở nơi bạn cần dữ liệu theo từng request. Xem nextjs.org/docs cho mô hình App Router và data fetching.
Điểm mạnh
- ✓Loại bỏ phần lớn thiết lập mà một app React cần — routing, bundling và render đã được cấu hình sẵn
- ✓Server rendering và static generation tạo ra HTML thân thiện SEO mà React chỉ chạy ở client không làm được
- ✓Các tính năng React mới như Server Components và streaming thường dùng được ở đây trước tiên
- ✓Hệ sinh thái và cộng đồng lớn — khoảng 140k sao nghĩa là hầu hết vấn đề đã có lời giải ở đâu đó
- ✓Giấy phép MIT, nên không có vướng mắc bản quyền cho mục đích thương mại
Hạn chế & rủi ro
- △App Router và React Server Components có một đường cong học tập thật sự; mô hình tư duy về cái gì chạy trên server so với client làm khó các đội chuyển từ router pages/ cũ
- △Các mặc định nghiêng về nền tảng của Vercel — tự host hoặc triển khai nơi khác là khả thi, nhưng bạn phải làm nhiều hơn cho các tính năng vốn bấm-là-chạy trên Vercel
- △Nhịp phát hành nhanh kéo theo xáo trộn: App Router, hành vi caching và API data-fetching đã thay đổi qua các phiên bản lớn, nên việc nâng cấp và các hướng dẫn cũ nhanh lỗi thời
- △Đây là một lớp trừu tượng nặng hơn React thuần; với một SPA nhỏ chỉ chạy ở client, nó có thể là quá nhiều framework so với nhu cầu
Lựa chọn thay thế
Ai nên thử — và ai nên bỏ qua
Hãy chọn Next.js nếu bạn là một đội React đang dựng bất cứ thứ gì vượt quá một SPA đồ chơi — trang nội dung, app full-stack, hay bất cứ thứ gì hưởng lợi từ server rendering và SEO — và bạn muốn dùng các mặc định hợp lý thay vì tự lắp routing, bundling và render. Nếu bạn chỉ ship một widget nhỏ chạy ở client, hoặc bạn cố ý muốn tránh các mặc định kiểu Vercel cùng độ phức tạp của App Router, một thiết lập nhẹ hơn như Vite cộng React Router có thể hợp hơn.
Câu hỏi thường gặp
Next.js là một framework React mã nguồn mở do Vercel duy trì. Nó bổ sung routing, server-side rendering, static generation và một pipeline build trên nền React để bạn dựng ứng dụng web full-stack thay vì chỉ lớp giao diện.
React là một thư viện để dựng các component giao diện render trong trình duyệt. Next.js là một framework xây trên React, bổ sung routing, server rendering, static generation và một hệ thống build, nên bạn có một thiết lập full-stack thay vì chỉ lớp view.
Có. Next.js là mã nguồn mở dưới giấy phép MIT, nên miễn phí cho cả dự án cá nhân lẫn thương mại. Hosting thì tách riêng — bạn có thể triển khai trên Vercel hoặc tự host ở nơi khác.
Với một single-page app nhỏ chỉ chạy ở client, Next.js có thể là quá nhiều framework so với nhu cầu, và một thiết lập nhẹ hơn kiểu Vite cộng React Router thì đơn giản hơn. Nó cũng nặng nề hơn nếu bạn cố ý muốn tránh các mặc định thiên về Vercel.
Next.js được Vercel duy trì và phát triển công khai trên GitHub, nơi nó có khoảng 140k sao, 31k fork và một cộng đồng đóng góp lớn.