App 라우팅 이해하기

주요개념

• leaf: children이 더이상 없는 node를 의미함.
• URL Segment : / 슬래시로 분류된 URL path의 한 부분을 말함.
• URL path : 도메인 이후 따라오는 전체 URL 부분을 말함.

파일(폴더) 기반의 라우팅

page.tsx

/ path로 접근했을 때 보여지는 페이지의 이름이다.

이 이름과 파일명이 다르면 페이지가 보이지 않는다.

static routing

• src/app 폴더 내부에 위치한 폴더가 /path가 된다.
  • 예 ) src/app/info 폴더가 있다면, localhost:3000/info가 path가 되고, info 폴더 안에 있는 page.tsx가 이 path에 접근했을 때 렌더링 되는 페이지.
• 폴더를 중첩해서 /path를 여러 개 만들 수 있다.
  • 예 ) src/app/info/welcome 폴더를 만들면 이게 path가 됨.

dynamic routing

URL Params 등으로 id 값 등이 전달되어 path를 만드는 동적인 url 구성을 말함.

리액트에서는 아래와 같이 라우팅을 했었음.

<Route path="/products/:id" element={<Product />} />

 

Next.js에서는 폴더명을 대괄호로 감싸면 위와 같은 동적 라우팅이 됨.

예를 들어 위의 예제로는 src/app/products/[id]/page.tsx 로 작성하면 됨.

폴더가 라우팅에 포함되지 않게 하는 방법

app 폴더 내에 폴더를 만들면 자동으로 페이지 라우팅이 된다고 했다.

그런데 라우팅 목적이 아니라 유사한 성격의 폴더 또는 파일끼리 그룹핑하는 용도로만 폴더를 만들고 싶다면, 폴더명을 (폴더명) 소괄호로 감싸서 만들면 된다.

 

예 ) src/app/(admin)/about/page.tsx 로 작성하면 admin은 path에 포함되지 않고, localhost:3000/about/page.tsx가 path가 된다.