Để nâng cao khả năng định tuyến và sự linh hoạt, tận dụng các tính năng mới cho phép xây dựng ứng dụng hiệu quả, có khả năng mở rộng tốt hơn và đặc biệt là cấu trúc gọn gàng, dễ đọc hiểu hơn.
1. Upgrading
- Để sẵn sàng cho việc migrate từ Page router sang App router, cần ít nhất phiên bản node v18.17.
- Tiếp đến cần phải cập nhật Nextjs version lên phiên bản >=13. Chạy câu lệnh sau:
npm install next@latest react@latest react-dom@latest
- Sau khi đã update phiên bản Nextjs, bạn vẫn có thể tiếp tục sử dụng page router nếu cần
2. Migrating
- Việc chuyển sang App Router có thể sẽ là lần đầu tiên bạn sử dụng những tính năng của React mà Next.js được xây dựng dựa trên đó, chẳng hạn như Server Components, Suspense, và nhiều tính năng khác. Khi kết hợp với các tính năng mới của Next.js như các file đặc biệt và layouts, quá trình migration sẽ bao gồm nhiều khái niệm, mô hình tư duy, và thay đổi hành vi mới cần học.
- Chúng ta sẽ chia nhỏ các bước ra để có thể dễ dàng thực hiện và tránh gặp các lỗi. Không cần lo lắng vì page router vẫn hoạt động song song khi trong quá trình migrate.
- Một số tính năng đã được thay đổi trong app router:
- Thư mục app sẽ là root và chứa các routes và layouts.
- Sử dụng Page.tsx để định nghĩa 1 UI cho 1 route.
- Sử dụng layout.tsx để định nghĩa 1 UI chung cho nhiều trang.
getServerSidePropsvàgetStaticPropsđã được thay đổi thànhgenerateStaticParamspages/_app.jsvàpages/_document.jsđã được thay đổi thànhapp/layout.js
- Bước 1: Tạo file App
- Tạo một file app và trong đó tạo layout.tsx:
- Thư mục app bắt buộc phải có RootLayout định nghĩa các thẻ
<html>và<body>vì Next.js sẽ không tự động tạo ra chúng. Root layout thay thế cho các filepages/_app.tsxvàpages/_document.tsx.
- Bước 2: Di chuyển
_document.jsvà_app.js- Nếu bạn đang có sẵn các file
_apphoặc_document, bạn có thể sao chép nội dung của chúng (ví dụ: các global styles) sang root layout (app/layout.tsx). - Lưu ý rằng các style trong
app/layout.tsxsẽ không áp dụng cho các route trongpages/*. - Bạn nên giữ lại các file
_appvà_documenttrong quá trình migration để tránh làm hỏng các route trongpages/*. - Khi đã hoàn tất quá trình chuyển đổi sang App Router, bạn có thể xóa chúng một cách an toàn.
- Nếu bạn đang sử dụng React Context providers, chúng cần được di chuyển sang Client Component.
- Sử dụng meta data thay cho next/head.
- Nếu bạn đang có sẵn các file
- Bước 3: Di chuyển các pages
- Các pages trong app router mặc định là server components trong khi page router sẽ mặc định là client components.
- App router sử dụng cơ chế nested folders để định nghĩa router cho page
- Cần sử dụng ‘use client’ cho các component của bạn để có thể sử dụng các hook như useState, useEffect …
- Bước 4: Sự thay đổi của các Routing hook
- Trong thư mục app, bạn nên sử dụng 3 hook mới được import từ
next/navigation:
👉useRouter(),usePathname(), vàuseSearchParams(). useRoutermới không trả về chuỗi pathname- → Thay vào đó, hãy dùng
usePathname()để lấy đường dẫn hiện tại. useRoutermới không trả về đối tượng query- → Tham số truy vấn (search params) và tham số động (dynamic params) giờ đây được tách riêng:
- Dùng
useSearchParams()để lấy query string (ví dụ:?page=2). - Dùng
useParams()để lấy tham số động của route (ví dụ:/blog/[id]). - Bạn có thể kết hợp
useSearchParamsvàusePathnameđể theo dõi thay đổi trang.
- Trong thư mục app, bạn nên sử dụng 3 hook mới được import từ
- Bước 5: Styling
- Trong page router, các stylesheet toàn cục (global styles) chỉ được phép đặt trong file
pages/_app.js. - Với app router, giới hạn này đã được gỡ bỏ — bạn có thể thêm global styles ở bất kỳ layout, page hoặc component nào.
- Trong page router, các stylesheet toàn cục (global styles) chỉ được phép đặt trong file
Như vậy, về cơ bản chúng ta đã hoàn thành quá trình đơn giản nhất để migrate từ Page Router sang App Router trong Next.js.
Việc chuyển đổi này không chỉ giúp dự án tận dụng được các tính năng mới nhất của React và Next.js như Server Components, Nested Layouts, Streaming, hay Server Actions, mà còn giúp cấu trúc code rõ ràng hơn, dễ bảo trì, và tăng hiệu năng tổng thể của ứng dụng.
Dù bước đầu có thể cần thời gian để làm quen với những thay đổi về mô hình tư duy và cách tổ chức mã nguồn, nhưng về lâu dài, App Router sẽ mang lại trải nghiệm phát triển hiện đại, linh hoạt và mạnh mẽ hơn.
👉 Sau khi hoàn tất migration, bạn có thể tiếp tục tối ưu ứng dụng bằng cách:
- Tận dụng React Server Components để giảm tải cho client.
- Sử dụng Server Actions để xử lý form và logic phía server.
- Áp dụng route groups và nested layouts để tổ chức dự án khoa học hơn.
Tóm lại, App Router không chỉ là một thay đổi kỹ thuật, mà còn là bước tiến quan trọng hướng tới cách xây dựng ứng dụng React hiện đại với Next.js.
