Next.js 14 시작하기 #2 Nested, Dynamic Routing

강의 6~8번

Nested Routing(중첩 라우팅)

• Scenario 3
  
  사진의 해당 URL 요청시
  
  이렇게 src/app/blog/first나 second 폴더를 만들어 그 안에 page.js를 만들어주면 그 페이지가 라우팅
  
  중첩 라우팅 경로 정리

Dynamic Routing(동적 라우팅)

• Scenario 4
  
  사진과 같이 id에 따라 URL 라우팅 되는 것을 동적 라우팅이라 하는데 next.js에서는 이 동적라우팅을 위해 폴더 이름을 대괄호로 묶을 수 있음
  
  사진과 같이 src/app/product/[productId]/page.js에 productId에 대한 페이지를 만들 수 있고, params는 URL에서 추출된 매개변수를 의미함, 그 후 함수 내부에서 params.productId를 이용해 URL의 [productId] 값을 불러와 페이지에 표시할 수 있음
  
  동적 라우팅 경로 정리

Nested Dynamic Routing(중첩된 동적 라우팅)

• Scenario 5
  
  사진과 같이 동적 라우팅이 중첩되었음 (productId, ReviewId)
  
  이와 같이 [productId] 디렉토리 아래에 reviews 폴더를 만들고 그 아래에 reviews와 [reviewId] 폴더를 만들어 page.js를 만들어주면 됨, params로 매개변수를 불러오면 productId번 제품의 reviewId번째 리뷰 와 같은 식으로 표현이 가능
  
  중첩된 동적 라우팅 경로 정리