Dynamic Routes

• /movie/123?region=kr 처럼 동적 라우팅을 하는 법!

• react router ⇒ /movie/:id

NextJS의 동적 라우팅

1. 폴더 이름을 중괄호([])로 묶어서 생성 후, page를 작성

2. props는 모든 컴포넌트에서 받을 수 있는데, 동적 params, searchParams도 여기 안에 있음
• searchParams ⇒ 주소창에 ?region=kr 형태로 덧붙이면 자동으로 넘어옴

1. 받은 params를 컴포넌트 내에서 쓸 수 있음

export default function Movies({ params, searchParams }) {
  return params.id + searchParams.region;
}

export default function Movies({
  params: { id },
  searchParams: { region },
}: {
  params: { id: string };
  searchParams: { region: string };
}) {
  return id + region;
}

주의 (Next 15~)

async function Page({ params }) {
  // asynchronous access of `params.id`.
  const { id } = await params
  return <p>ID: {id}</p>
}