[NextJS] Dynamic Routes(동적 라우팅): URL 파라미터 받아오기

Dynamic Routes (동적 세그먼트)

: URL 경로의 일부를 동적으로 처리할 수 있는 기능

• URL에서 변하는 부분을 변수로 처리하고, 이를 컴포넌트에서 props로 받아서 렌더링할 수 있다.

 

 

App Router 사용법 (app 디렉토리)

1. 파일명이나 폴더명을 [대괄호]로 묶어 생성한다.

• 특정 영화의 세부 정보를 보여주는 페이지를 만들기 위해 URL에서 영화 ID를 받아와야 할 경우,
  pages 폴더 내에서 /movie/[id].tsx와 같이 파일을 생성한다.

 

 

2. props로 URL 파라미터 (:id)를 받아온다.

• URL 경로 /movie/123에서 123은 id 파라미터로 처리된다.

export default function MovieDetail({ params: { id } }) {
  return (
    <div>
      <h2>Movie {id}</h2>
    </div>
  );
}

 

 

 

 

Page Router 사용법 (pages 디렉토리)

1. 파일명이나 폴더명을 [대괄호]로 묶어 생성한다.

 

2. useRouter 훅을 통해 동적 세그먼트 값을 가져온다.

• useRouter는 URL 파라미터를 router.query 객체에서 제공한다.

import { useRouter } from 'next/router';

export default function MovieDetail() {
  const router = useRouter();
  const { id } = router.query;  // 동적 세그먼트 값은 router.query에서 가져온다.

  return (
    <div>
      <h2>Movie {id}</h2>
    </div>
  );
}

 

---

 

Routing: Dynamic Routes | Next.js

 

Routing: Dynamic Routes | Next.js

 

 

All Courses – 노마드 코더 Nomad Coders