`_app.tsx` và `_document.tsx` trong Pages Router làm gì, và App Router thay thế chúng bằng gì?

Trong Pages Router đây là 2 file đặc biệt:

_app.tsx — wrap mọi page, là nơi đặt layout chung, global CSS, provider (theme, store) và giữ state qua các lần điều hướng. Chạy cả server lẫn client.

tsx

export default function App({ Component, pageProps }) {
  return <Provider><Component {...pageProps} /></Provider>
}

_document.tsx — tùy biến cấu trúc HTML ngoài cùng (<html>, <body>, thẻ <lang>, preconnect). Chỉ render một lần trên server, không có event/window → đừng đặt logic client ở đây.

App Router thay bằng:
- _app → app/layout.tsx (root layout, nested layouts), provider bọc trong Client Component.
- _document → cũng là root layout (<html>/<body> viết thẳng trong đó) + API metadata cho <head>.

Lưu ý: không trộn hai cơ chế — nếu page đã sang app/, đừng còn _app/_document chi phối nó; chúng chỉ áp dụng cho route trong pages/.

Xem toàn bộ Next.js cùng filter theo level & chủ đề con.

Mở danh sách Next.js

Trong Pages Router đây là 2 file đặc biệt:

_app.tsx — wrap mọi page, là nơi đặt layout chung, global CSS, provider (theme, store) và giữ state qua các lần điều hướng. Chạy cả server lẫn client.

tsx

export default function App({ Component, pageProps }) {
  return <Provider><Component {...pageProps} /></Provider>
}

_document.tsx — tùy biến cấu trúc HTML ngoài cùng (<html>, <body>, thẻ <lang>, preconnect). Chỉ render một lần trên server, không có event/window → đừng đặt logic client ở đây.

Lưu ý: không trộn hai cơ chế — nếu page đã sang app/, đừng còn _app/_document chi phối nó; chúng chỉ áp dụng cho route trong pages/.