Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다.
Dynamic Routes
Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다.
pages/movies 경로에 [id].js 파일을 생성하면 /movies/1
, /movies/abc
등과 같은 경로로 접속할 수 있습니다.
다음 예제처럼 useRouter()
의 query
를 통해 /movies 다음의 하위 경로를 확인할 수 있습니다.
1 | // pages/movies/[id].js |
생성한 경로로 이동을 원한다면 다음과 같이 next/link
를 사용하여 작성합니다.
1 | import Link from 'next/link'; |
Catch all routes
대괄호 안에 세 개의 점(…)을 추가하여 모든 경로를 포착하도록 Dynamic Routes를 확장할 수 있습니다.
pages/movies/[…id].js는 /movies/1
와 일치하지만 /movies/1/2
, /movies/1/ab/cd
등과도 일치합니다.
일치하는 매개변수는 페이지에 쿼리 매개변수로 전송되며 항상 배열이므로 /movies/a
또는 /movies/a/b
경로일 경우 다음과 같이 조회가 됩니다.
1 | // /movies/a |