[Next.js] Next.js 14 Dynamic Routing

Dynamic Routing이란?

동적 라우팅은 URL 경로의 일부를 사용하여 페이지를 동적으로 렌더링하는 기술을 의미한다. 예를 들어, 블로그 포스트의 경우 /posts/:id와 같은 URL 패턴을 사용하여 각 포스트를 고유하게 식별할 수 있다. 이때 :id 부분은 동적으로 변하는 값이며, 해당 값에 따라 다른 포스트가 표시된다.

 

Dynamic Routing 생성 방법

 

동적 세그먼트는 폴더 이름을 대괄호로 묶어 생성할 수 있다. [id] 폴더안에 page.tsx 파일을 생성한다. Next.js에서 동적 라우팅을 하려면 위에서 예로 든 /posts/:id의 경우, /posts/[id]/page.tsx와 같은 파일을 생성해야 한다. 여기서 [id]가 동적 라우팅에 해당하는 폴더가 된다.

 

page.tsx 파일은 아래와 같이 작성한다.

 

page.tsx

export default function PostDetail(props) {
  console.log(props);

  return <div>id : {props.params.id}</div>;
}

 

그 후 /posts/1 페이지로 접근하면 콘솔 로그로 props에 params와 searchParams가 있는 것을 확인할 수 있다.