Next.js 14 là framework React full-stack mạnh mẽ, và App Router là kiến trúc mới nhất giúp xây dựng ứng dụng web với hiệu suất vượt trội. App Router sử dụng React Server Components theo mặc định, giảm JavaScript gửi đến trình duyệt và cải thiện đáng kể thời gian tải trang.
App Router Là Gì?
App Router là hệ thống định tuyến (routing) mới nhất của Next.js, hoạt động dựa trên thư mục app/ thay vì thư mục pages/ truyền thống. Mỗi tệp page.js bên trong app/ tạo ra một route có thể truy cập. Ví dụ: app/blog/page.js sẽ tạo ra route /blog trong ứng dụng.
So với Pages Router, App Router mang lại nhiều lợi thế: hỗ trợ Server Components theo mặc định, hệ thống layout mạnh mẽ hơn, và khả năng streaming tích hợp sẵn. Next.js khuyến khích tất cả dự án mới sử dụng App Router.
File-System Routing
Next.js sử dụng định tuyến dựa trên hệ thống tệp. Các thư mục và tệp quyết định cấu trúc URL của ứng dụng:
app/page.js→ Route gốc/app/blog/page.js→ Route/blogapp/blog/[slug]/page.js→ Route động/blog/:slugapp/shop/[...category]/page.js→ Route catch-all
Các tệp đặc biệt khác trong App Router:
page.js— Định nghĩa UI cho một route (bắt buộc để route có thể truy cập).layout.js— Shared UI giữa các trang, nhận propchildren.loading.js— UI hiển thị khi chờ tải (Suspense boundary).error.js— Error boundary xử lý lỗi cho route segment.route.js— Route Handler tạo API endpoint Web.
Các route động sử dụng tên thư mục đặt trong dấu ngoặc vuông [slug] để tạo nhiều trang từ dữ liệu. Xem thêm Layouts and Pages.
Server Components vs Client Components
| Loại | Mặc định | Khi nào dùng |
|---|---|---|
| Server Component | Mặc định, không cần directive | Lấy dữ liệu, bảo mật API key, giảm JS |
| Client Component | Cần 'use client' ở đầu file |
State, event handler, browser API |
Server Components render trên server, giúp cải thiện First Contentful Paint (FCP) và giảm kích thước bundle JavaScript. Khi cần tương tác người dùng (click button, xử lý form), dùng 'use client' directive ở đầu file để chuyển sang Client Component. Dữ liệu truyền từ Server Component xuống Client Component qua props.
Streaming Và Tối Ưu
App Router hỗ trợ streaming — tải từng phần giao diện dần dần thay vì chờ toàn bộ trang tải xong. Kết hợp loading.js, người dùng thấy UI skeleton ngay khi bắt đầu tải, tạo cảm giác ứng dụng nhanh hơn. Next.js tự động code-splitting và prefetching các link trong <Link> component để tải nhanh hơn khi người dùng điều hướng.
Các tính năng tối ưu khác bao gồm: Route-level code splitting, prefetching, caching tự động, và Incremental Static Regeneration (ISR).
Route Handlers — API Routes
Ngoài định tuyến trang, App Router cung cấp Route Handlers để tạo API endpoint ngay trong ứng dụng. Route Handler sử dụng Web Request/Response APIs tiêu chuẩn, tương thích với các deployment serverless. Ví dụ: app/api/users/route.js tạo ra endpoint /api/users hỗ trợ GET, POST, PUT, DELETE.
Điều này loại bỏ nhu cầu duy trì một server API riêng biệt, đơn giản hóa kiến trúc ứng dụng.
Metadata và SEO
App Router tích hợp sẵn hệ thống metadata. Mỗi page/layout có thể xuất một metadata object hoặc dùng generateMetadata() async để định nghĩa title, description, Open Graph, và Twitter cards. Điều này giúp SEO tự động mà không cần plugin bổ sung.
Bắt Đầu Với App Router
- Cài đặt:
npx create-next-app@latest --app— flag--appkích hoạt App Router. - Cấu trúc thư mục: Tạo
app/layout.js(layout gốc bao bọc toàn bộ app),app/page.js(trang chủ). - Thêm route mới: Tạo thư mục con +
page.jscho mỗi trang mới. - Định nghĩa layout:
layout.jsnhậnchildrenvà bao bọc nội dung trang bên trong. - Thêm loading state: Tạo
loading.jstrong thư mục route để hiển thị skeleton loading. - Triển khai:
npm run buildrồi deploy lên Vercel hoặc bất kỳ server nào hỗ trợ Node.js.
Tài Nguyên Tham Khảo
Tài liệu chính thức: Layouts and Pages, Server và Client Components. Xem khóa học miễn phí của Next.js để nắm kiến thức cơ bản. Đọc routing documentation để hiểu sâu hơn về cấu trúc.
