7. 동적 라우팅 처리 

만약 다음과 같은 특정 상품의 상세 정보를 나타내는 페이지로 라우팅 해야 할 경우,

미리 생성해둔 파일 이름으로는 동적으로 변하는 값(1, 2)에 따른 라우팅 처리가 어려워짐
→ 상품이 100개 이상인 경우, 개별 페이지에 대응하는 파일을 만들기에는 너무 복잡함

id가 1번인 상품 페이지
localhost:3000/products/1

id가 2번인 상품 페이지
localhost:3000/products/2
…

Next.js에서는 Dynamic Segments를 통해 페이지 접근 요청 시 URL 경로에 동적으로 라우팅을 처리할 수 있도록 기능을 제공함

1-1. 예시

프로젝트 폴더 경로 생성 시,
대괄호를 포함하여 app/blog/ [slug] /page.jsx와 같이 작성할 경우, [slug]에 해당하는 부분은 사용자의 요청 URL(ex. localhost:3000/blog/a)에 따라 동적으로 처리되어 동작함

export default function Page({ params }) {
  return <div>My Post: {params.slug}</div>
}

1-2. 동적 라우팅을 위한 Dynamic Segments 작성 규칙

Dynamic Segment는 파일 및 폴더 이름을 대괄호( [ ], square brackets)로 감싸서 사용할 수 있음

1-2. useRouter, 동적 라우팅 처리용 훅(Hook)

작성한 Dynamic Segement를 사용하기 위해서는 useRouter 훅 을 통해 처리할 수 있음

블로그 포스트 이름에 따른 동적 라우팅 처리 예시

http://localhost:3000/blog/a

localhost:3000/blog/a 경로로 접근 시, Post: a 페이지가 출력됨

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  
  return <p>Post: {router.query.slug} 페이지</p>
}