예를 들어, "아이디"같은 고유의 키 값이 필요한 페이지. 동일한 페이지 레이아웃을 틀을 가지지만, 그 안에서의 고유 값은 달라지는 페이지의 라우팅이 존재한다고 생각해 보자.
그리고 관련 프로세스에 대해 10개의 라우팅이 필요하다고 여겨보자.
그러면 우리는 page.tsx를 10개를 만들어서 컴포넌트를 세팅해줘야 할까? 뭐 물론 10개를 만들어 줄 수는 있다.
근데 만약 1천 개라면? 1억 개라면?
만일 당신이 유튜브 페이지를 만든다고 쳐보자. 각 영상에 대한 컴포넌트를 당신이 "전부" 만든다고 생각해 보자. 진짜 끔찍하지 않겠는가?
이런 라우팅을 커버하기 위해 등장하는 기술이 "다이나믹 라우팅"이다.
고유의 id를 이용해서 동일 페이지 레이아웃에서 달라지는 고유 UI를 각각 구현할 수 있다.
이에 관한 문서는 다음 링크를 참고해 보자.
https://nextjs-ko.org/docs/app/building-your-application/routing/dynamic-routes
Dynamic Routes – Nextjs 한글 문서
Dynamic Routes can be used to programmatically generate route segments from dynamic data.
nextjs-ko.org
https://mycodings.fly.dev/blog/2024-01-13-nextjs-14-tutorial-1-all-about-routing
Next.js 14 강좌 1편. 라우팅의 모든 것
Next.js 14 강좌 1편. 라우팅의 모든 것
mycodings.fly.dev
노마드코더 관련 영상
https://www.youtube.com/watch?v=O_xkljvN318
'프론트 엔드 > Next.js' 카테고리의 다른 글
| Next.js의 Dynamic API 처리 (1) | 2025.04.06 |
|---|---|
| Next.js의 기존 프로젝트에서 ts 추가하는 법 (0) | 2025.03.28 |
| Next.js의 데이터 가져오기(Data fetch) (0) | 2025.03.21 |
| Next.js의 메타데이터(Metadata) (0) | 2025.03.21 |
| Next.js의 Hydration(하이드레이션)이 무엇일까? (2) | 2025.03.20 |
