[Next.js] 페이지(Pages) 구성하기

 

Next.js 공식 문서에서 Getiing Started를 살펴보면
root 디렉터리에 있는데 /pages와  /public 디렉터리에 대해 안내되어 있다. 

Next.js 프로젝트를 구성하는데 중요한 첫 단계라 볼수 있는 pages 폴더 구성에 대해 알아봅시다!

1. Pages란?

Next.js 프로젝트에서는 pages 디렉토리 하위에 생성되는. js,. jsx,. ts,. tsx 파일 명에 따라 자동으로 라우팅 된다.

예를 들어 아래와 같이 pages 하위에 about.tsx, notice.tsx 파일이 있다면
about.tsx는 localhost:3000/about
notice.tsx는 localhost:3000/notice 로 접근이 가능해진다

pages
   ├── about.tsx
   ├── notice.tsx

 

2. 동적 라우팅 (dynamic routes)

위의 예제 처럼 라우팅 구조가 단순하면 좋겠지만 실제로는 복잡하게 구성해야 될 때가 많다.
예를 들어 목록이 있고 목록에 있는 각 리스트를 클릭하면 상세로 접근 가능한 구조의 형태가 있다고 가정해보자.

먼저 /list에 접근해서 목록을 확인하고 목록에서 상세로 진입이 필요할시 /list/1, /list/2 이런 식의 url 구조가 필요하다
이 경우 Next.js 에서는 아래와 같이 대괄호를 이용해서 동적 라우팅을 생성할 수 있다.

pages
   ├── list
      ├──index.tsx <- 목록
      ├──[id] 
      	├──index.tsx <- 상세

 

 

 

list 폴더 하위에 [id]라는 폴더를 생성하면 list/1 list/2 list/3 등으로 접근이 가능해지는 것이다

여기까지는 기초 중 기초!
동적 라우팅을 구성하는 여러가지 방법은 다음시간에 더 자세히 알아볼게요,,,, 일단 여기까지 맛보기!

 

참고

Basic Features: Pages | Next.js