Next.jsCó — pages/ và app/ cùng tồn tại được, nên bạn migrate dần dần (incremental) thay vì viết lại toàn bộ. Đây là điểm cốt lõi Next.js thiết kế cho việc chuyển đổi.
Quy tắc: nếu một route tồn tại ở cả hai nơi, app/ thắng (build sẽ cảnh báo conflict). Migrate từng route từ lá ra gốc.
Các bước chính:
1. Tạo app/layout.tsx thay cho _app + _document (<html>/<body> chuyển vào đây).
2. Chuyển data fetching: getServerSideProps → fetch trực tiếp trong Server Component; getStaticProps → fetch + generateStaticParams; getStaticPaths → generateStaticParams.
3. next/router → next/navigation (useRouter, usePathname, useSearchParams) trong Client Component.
4. Thêm 'use client' cho component dùng hook/event; phần còn lại mặc định là Server Component.
5. API routes pages/api → Route Handlers app/api/.../route.ts.
Lưu ý: đừng port hàng loạt — migrate route ít rủi ro trước, đo lại, vì semantics caching và rendering của App Router khác hẳn.