유리의 개발새발
[Next] 03. page router 본문
나는 Page Router고 App Router고… 둘 다 모른다. 그래서 다행이다 😊
Next.js를 막 공부하기 시작했는데,
"Page Router vs App Router" 라는 말을 듣고 당황했다.
뭐가 뭔지도 모르겠는데, 사람들이
“이게 더 낫다”, “이건 미래다”, “아직은 이게 더 안정적이다”… 말이 너무 많다.
근데 사실,
나는 둘 다 몰라서 그냥 처음부터 동시에 배우면 된다.
Page Router란?
현재도 많은 기업에서 사용 중인, 가장 안정적이고 검증된 라우팅 방식입니다.
- pages/ 폴더를 기준으로 파일 이름 = 경로(URL)
- 예를 들어 pages/about.tsx → /about 경로로 자동 매핑
- getStaticProps, getServerSideProps 등으로 페이지 단위 데이터 패칭 지원
- _app.tsx, _document.tsx 같은 글로벌 설정 파일이 있음
동적 경로는 대괄호([])로 감싸서 정의합니다.
예를 들어, 상품 상세 페이지처럼 /item/123 같은 경로가 필요하다면 다음과 같이 작성합니다.
더 자세한 건 뒤에 나중에-
일단, 14버전부터 만들어보자. (현재 최신 버전은 15입니다.)
npx create-next-app@14 [project-name]
App Router 쓰지 마세요
App Router는 잠시 접어두고, 우리는 Page Router부터 배워볼 겁니다.
처음 배우는 입장에서 App Router는 구조도 복잡하고, 서버 컴포넌트 개념도 어려워요.
Page Router는 단순하고 직관적이라 학습에 더 적합합니다.
디렉토리 구조는 CRA나 React Native랑 비슷합니다
자세한 디렉토리 설명은…
GPT한테 맡깁니다.
my-app/
├── public/ # 정적 파일 (이미지, 폰트 등)
├── src/
│ ├── pages/ # 페이지 라우팅 (URL = 파일명)
│ ├── styles/ # CSS 파일
├── .gitignore # Git 무시 설정
├── next.config.js # Next.js 설정
├── package.json # 패키지 정보 및 스크립트
└── tsconfig.json # TypeScript 설정📁 src/ 디렉토리 설명은 제가 직접 하겠습니다
Next.js에서 src/pages는 페이지 라우팅의 핵심입니다.
이 폴더 안에 있는 파일과 폴더가 그대로 URL 경로로 매핑됩니다.
src/pages/
├── index.tsx → /
├── about.tsx → /about
└── blog/
└── [id].tsx → /blog/123즉, 폴더/파일 구조 = URL 구조
React 컴포넌트를 pages/에 넣는 순간, 그건 곧 페이지가 됩니다.
근데 _app.tsx, _document.tsx는 뭐임?
_app.tsx와 _document.tsx는 Next.js에서 특별하게 취급하는 예약 파일입니다.
그 이름 앞에 언더바(_)가 붙는 이유도 명확합니다.
왜 언더바가 붙냐?
Next.js는 pages/ 안의 파일을 자동으로 URL로 매핑해요.
그런데 _app.tsx, _document.tsx는 라우팅 대상이 아니라 프레임워크 내부 구조를 제어하는 용도입니다.
그래서 _를 붙여서 "얘는 URL 경로 아님. 특수 처리해줘"라는 신호를 주는 거죠.
더럽네 진짜... 아니, 음...
좋은 건진 모르겠지만 일단 계속 해봅니다.
_app.tsx란?
_app.tsx는 모든 페이지에 공통적으로 적용되는 루트 컴포넌트입니다.
- 모든 페이지에 공통으로 나오는 헤더, 푸터
- 글로벌 스타일이나 상태 관리 Provider
이런 것들을 _app.tsx에 넣으면 전 페이지에 공통 적용됩니다.
CRA에서의 App.js와 거의 같은 역할이라고 보면 됩니다.
_document.tsx란?
_document.tsx는 전체 HTML 문서 구조를 커스터마이징할 때 사용합니다.
<html>, <head>, <body> 태그를 직접 제어할 수 있어요.
- 웹폰트 불러오기 (<link href=...>)
- 메타 태그 삽입
- Google Analytics, 카카오 SDK 같은 외부 스크립트 삽입
CRA의 public/index.html과 유사한 포지션입니다.
단, _document.tsx는 서버 사이드에서만 실행되며, 클라이언트에서는 사용되지 않습니다.
++
next.config.mjs는?
next.config.mjs는 Next.js 앱의 전역 설정 파일입니다.
여기서 할 수 있는 것들은
- 이미지 도메인 허용
- 리디렉션 설정
- 웹팩 설정 커스터마이징
- 국제화(i18n), basePath 등 옵션 설정
오늘은 여기까지-
'Next' 카테고리의 다른 글
| [Next] 06. Pre-fetching (0) | 2025.07.29 |
|---|---|
| [Next] 05. Next Navigation (0) | 2025.07.29 |
| [Next] 04. Page Router 라우팅 규칙 (2) | 2025.07.29 |
| [Next] 02. Next router (0) | 2025.07.28 |
| [Next] 01. Next.js란? (0) | 2025.07.28 |