Page Router란?
- Next.js에서 페이지 라우팅 기능을 제공
- Pages 폴더의 구조를 기반으로 페이지를 라우팅 해줌
📁 Pages
├─index.js ---> (~/)
├─about.js ---> (~/about)
├─ 📂 item
│ └─ index.js ---> (~/item)
└─ 📂 project
├─ index.js ---> (~/project)
└─ [id] ---> (~/project/:id - 동적 페이지 처리) Pages 폴더 내부 파일 살펴보기
_app.tsx
- 기존 React에서 app.js 역할을 하는 파일
- 모든 페이지 컴포넌트의 부모 역할을 하는 root 컴포넌트
- 모든 페이지에 공통적으로 포함되는 헤더 컴포넌트, 푸터 컴포넌트 등을 작성하는 공간
_document.tsx
- 기존 React에서 index.html 역할을 하는 파일
- 모든 페이지에 다 적용이 되어야 하는 메타 태그, 폰트 등 전체에 적용하는 html 태그 관리
next.config.mjs 파일
- next.js의 설정을 관리하는 파일
- reactStrictMode 설정 가능
출처: 한 입 크기로 잘라먹는 Next.js(v15)
