Next.js 03 - app 디렉토리

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 처럼 지정된 파일이 많아지면 헷갈릴 수밖에 없는데, 

선택적 폴더를 잘 활용해서 깔끔한 디렉토리를 유지하는 데 좋을 것 같다!