Next.js | 14버전 앱 라우터 - Dynamic Routes

movies라는 url의 페이지를 만들고 동적인 id를 url로 나타내기 위해 movies 폴더 안에 대괄호로 [id] 폴더를 만들었다

/movies/[id] url 뒤에 searchParams를 넣어주고 이 컴포넌트가 받는 props를 콘솔로 찍어보면

params는 id라는 이름의 숫자가 출력되고, searchParams에는 region이 "kr"이다 라는 값이 출력된다

SSR이기 때문에 콘솔을 찍으면 브라우저에서 보이는 것이 아니라 vs code의 터미널(백엔드)에 찍힌다

export default function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return <h1>Movie {id}</h1>;
}

이제 props에 params를 넣어줘서 브라우저에서 잘 출력되는지 확인!

url의 [id]대로 123이 잘 출력된다