Giới thiệu

Next.js cung cấp cho chúng ta hai cách xây dựng ứng dụng: Page Router (cách cũ) và App Router (cách mới). Trong bài viết này, chúng ta sẽ phân tích sự khác biệt giữa hai cách tiếp cận này, từ đó giúp bạn đưa ra quyết định đúng đắn cho dự án của mình.

Mục lục

• Khái niệm cơ bản
• Phân tích chi tiết
• So sánh các điểm chính
• Ví dụ mã code
• Khi nào nên sử dụng?
• Thực hành tốt nhất
• Những cạm bẫy thường gặp
• Mẹo hiệu suất
• Giải quyết sự cố

Khái niệm cơ bản

Page Router (cách cũ)

• Cách thức hoạt động: Bạn đặt các tệp trong thư mục /pages. Mỗi tệp tương ứng với một route. Cách tiếp cận này rất đơn giản nhưng có giới hạn khi ứng dụng của bạn phát triển.

App Router (cách mới)

• Cách thức hoạt động: Các tệp được đặt trong thư mục /app. Nó sử dụng React Server Components, các layout và tính năng hiện đại. Cách tiếp cận này mạnh mẽ hơn nhưng yêu cầu bạn học hỏi thêm một chút.

Phân tích chi tiết

Ẩn dụ 🪟

Hãy tưởng tượng việc xây dựng một ngôi nhà:

• Page Router = các phòng riêng biệt. Mỗi phòng (trang) có cửa riêng. Nếu bạn muốn có một bức tường chung (như một layout), bạn phải xây dựng lại trong mỗi phòng.
• App Router = ngôi nhà với các bức tường chung. Các phòng (trang) có thể chia sẻ layout, truy xuất dữ liệu và logic mà không cần phải lặp lại công việc.

So sánh các điểm chính 🔑

• Vị trí tệp: /pages so với /app
• Rendering: Page Router = hoàn toàn là các thành phần phía client; App Router = hỗ trợ Server Components
• Layouts: Page Router = không có layout tích hợp; App Router = mặc định có layout lồng nhau
• Truy xuất dữ liệu: Page Router = getServerSideProps / getStaticProps; App Router = các hàm async bên trong các thành phần (đơn giản và linh hoạt hơn)
• Tốt nhất cho:
  • Page Router → nguyên mẫu nhanh, ứng dụng nhỏ
  • App Router → ứng dụng hiện đại, dự án có thể mở rộng, sẵn sàng cho sản xuất

Ví dụ mã code

Page Router

// pages/about.tsx
export default function About() {
  return <h1>Trang Giới thiệu</h1>;
}

App Router

// app/about/page.tsx
export default function About() {
  return <h1>Trang Giới thiệu</h1>;
}

Khi nào nên sử dụng?

• ✅ Dự án mới → App Router (tương lai của Next.js)
• ✅ Dự án cũ đã sử dụng /pages → giữ nguyên Page Router trừ khi bạn muốn di chuyển
• ❌ Không kết hợp chúng trong cùng một route (nhưng bạn có thể chạy cả hai trong một dự án trong quá trình di chuyển)

Thực hành tốt nhất

• Tổ chức mã: Giữ cho mã của bạn được tổ chức tốt với cấu trúc thư mục rõ ràng trong cả hai phương pháp.
• Kiểm tra: Luôn kiểm tra ứng dụng của bạn sau khi chuyển đổi từ Page Router sang App Router để đảm bảo tất cả đều hoạt động tốt.

Những cạm bẫy thường gặp

• Nhầm lẫn trong cấu trúc thư mục: Đảm bảo bạn hiểu rõ vị trí của các tệp trong /pages và /app để tránh nhầm lẫn.
• Không tận dụng Server Components: Khi sử dụng App Router, hãy tận dụng Server Components để tối ưu hóa hiệu suất.

Mẹo hiệu suất

• Sử dụng lazy loading: Khi sử dụng App Router, hãy cân nhắc việc lazy loading cho các thành phần lớn để tối ưu hóa thời gian tải trang.
• Tối ưu hóa truy xuất dữ liệu: Sử dụng các hàm async để tối ưu hóa việc truy xuất dữ liệu và giảm thời gian phản hồi.

Giải quyết sự cố

• Lỗi không tìm thấy tệp: Nếu bạn gặp lỗi không tìm thấy tệp, hãy kiểm tra lại cấu trúc thư mục và tên tệp.
• Vấn đề với Server Components: Đảm bảo rằng bạn đã cài đặt đúng các phiên bản React và Next.js để sử dụng Server Components.

Kết luận

Bài viết đã cung cấp cho bạn cái nhìn tổng quan về sự khác biệt giữa Page Router và App Router trong Next.js. Tùy thuộc vào nhu cầu của dự án, bạn có thể lựa chọn phương pháp phù hợp nhất. Nếu bạn chưa thử nghiệm với App Router, hãy bắt đầu ngay hôm nay để khám phá các tính năng mạnh mẽ của nó!

Câu hỏi thường gặp (FAQ)

1. Có thể kết hợp Page Router và App Router trong một dự án không?
Có, bạn có thể chạy cả hai trong một dự án trong quá trình chuyển đổi nhưng không nên kết hợp chúng trong cùng một route.

2. App Router có khó học hơn Page Router không?
Có, App Router yêu cầu bạn phải làm quen với một số khái niệm mới như Server Components và layouts, nhưng nó sẽ mang lại nhiều lợi ích hơn cho dự án lớn.

Hãy tận dụng kiến thức này để tạo ra những ứng dụng Next.js tuyệt vời hơn cho người dùng của bạn!