Next.jsNext.js cho phép pages/ và app/ cùng tồn tại trong một dự án, nên nên đi từng phần thay vì viết lại một lượt. Khi trùng đường dẫn, app/ được ưu tiên.
Thứ tự thường làm:
1. Nâng Next lên bản hỗ trợ, tạo app/layout.tsx — layout gốc thay cho _app.tsx + _document.tsx (phải tự render <html> và <body>).
2. Chuyển các trang rời rạc, ít phụ thuộc trước (landing, docs, trang tĩnh) để làm quen quy ước.
3. Ánh xạ data fetching: getServerSideProps → await thẳng trong Server Component; getStaticProps → fetch có revalidate; getStaticPaths → generateStaticParams.
4. Đổi import: next/router (useRouter, query) → next/navigation (useRouter, useParams, useSearchParams, usePathname). API khác nhau nên không đổi tên là xong.
5. next/head → metadata hoặc generateMetadata.
6. Chuyển pages/api/ sang app/api//route.ts sau cùng, hoặc giữ nguyên vì vẫn chạy được.
Các điểm hay vấp:
- Component dùng hook hay event handler cần 'use client'; ban đầu cứ đánh dấu để chạy được, sau đó tối ưu dần.
- Provider toàn cục (theme, store) phải bọc trong một client component rồi đặt vào layout gốc.
- useSearchParams trong client component làm route thành dynamic — bọc <Suspense> nếu muốn giữ phần còn lại static.