Next.jsTrong 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.
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/.
In the Pages Router these are two special files:
_app.tsx— wraps every page; the place for shared layout, global CSS, providers (theme, store) and persisting state across navigations. Runs on both server and client.
export default function App({ Component, pageProps }) {
return <Provider><Component {...pageProps} /></Provider>
}_document.tsx— customizes the outermost HTML structure (<html>,<body>,lang, preconnect). Renders once on the server only, has no events/window→ don't put client logic here.
App Router replaces them with:
- _app → app/layout.tsx (root + nested layouts), providers wrapped in a Client Component.
- _document → also the root layout (<html>/<body> written directly there) + the metadata API for <head>.
Note: don't mix the two systems — if a page has moved to app/, _app/_document no longer govern it; they apply only to routes under pages/.