Server Component, Streaming 과 같은 리액트의 최근 특징들을 사용할 수 있도록 하는 Nextjs의 새로운 라우터입니다.

1-1. 파일 기반 라우팅

설명

app 폴더를 기준으로 파일 시스템 라우팅을 구현할 수 있습니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. page.js 파일은 해당 경로의 페이지 컴포넌트가 됩니다.

예시

📦app
 ┣ 📂news
 ┃ ┗ 📜page.js
 ┣ 📂about
 ┃  ┗ 📜page.js
 ┣ 📜favicon.ico
 ┣ 📜globals.css
 ┣ 📜layout.js
 ┗ 📜page.js

위와 같은 구조에서는 /, /news, /about 경로가 생성됩니다.

1-2. 동적 라우팅 (Dynamic Routes)

설명

동적 세그먼트 폴더를 생성하여 동적 라우팅을 구성할 수 있습니다. 동적 세그먼트 폴더 이름을 대괄호([])로 묶어 생성 할 수 있습니다. 동적 세그먼트는 컴포넌트의 props의 params로 전달됩니다.

예시

📦app
 ┣ 📂news
 ┃ ┗ 📜page.js
 ┣ 📂product
 ┃ ┗ 📂[prodcutId]
 ┃ ┃ ┗ 📜page.js
 ┣ 📜favicon.ico
 ┣ 📜globals.css
 ┣ 📜layout.js
 ┗ 📜page.js

product 페이지에서는 productId가 동적 세그먼트 값이 되며, 이 값은 props의 params를 통해 불러올 수 있습니다.

export default fuction Product({ params }) {
  retrun <div>{ params.productId } 상품 페이지</div>
}

1-3. 중첩 라우트 (Nested Routes)