Next.js 13 이후 도입된 App Router로, 파일 시스템 기반 라우팅을 담당한다.
/app
├── layout.tsx # 공통 레이아웃
├── page.tsx # '/' 경로 (홈 페이지)
├── about
│ └── page.tsx # '/about' 경로
├── blog
│ ├── page.tsx # '/blog' 경로
│ └── [id]
│ └── page.tsx # 동적 경로: '/blog/:id'
└── not-found.tsx # 404 페이지
react-router-dom 에서 사용하던 router 가 Next.js 에서는 필요하지 않다.
Next.js 는 파일 시스템을 기반으로 라우팅하기 때문에, 파일 경로가 곧 url이 된다.
app/page.tsx 파일은 도메인 초기 접근시에 기본으로 출력되는 페이지로, 고정된 이름이므로 규칙만 따라 주면 된다.
폴더가 곧 경로가 되고, 동적 경로도 당연히! 가능하다 (너무 편해!)
1. 동적 경로
/app
├── blog
│ └── [id]
│ └── page.tsx
위와 같은 구조로 파일이 생성되어 있을 경우, url 접근은 /blog/:id 가 된다.
[id] 폴더 내 page.tsx 파일에서 아래와 같이 추출할 수 있다.
export default function Blog({params} : {params : {id : string};}) {
const { id } = params;
// ...
}
2. 선택적 폴더
/app
├── (blog)
│ └── detail
│ └── page.tsx
폴더가 URL 에 영향을 미치지 않도록 일반 괄호로 묶어 줄 수 있다.
위 예시는 (blog) 라는 폴더 내에 있지만, 경로 접근은 /detail 로 하면 바로 page.tsx 가 출력된다.
깔끔한 URL 구조를 유지하면서 특정 로직을 별도의 폴더로 구분해 관리할 수 있다.
아무래도 page, layout 처럼 지정된 파일이 많아지면 헷갈릴 수밖에 없는데,
선택적 폴더를 잘 활용해서 깔끔한 디렉토리를 유지하는 데 좋을 것 같다!
'FRONT > Next.js' 카테고리의 다른 글
Next.js 06 - 프리패칭 (0) | 2025.04.24 |
---|---|
Next.js 05 - React Server Component (0) | 2025.04.23 |
Next.js 04 - 페이지 라우팅 (0) | 2025.04.22 |
Next.js 02 - Hydration 과 기본 파일들 (0) | 2025.04.18 |
Next.js 01 - SSR 과 CSR (0) | 2025.04.17 |