#6. Dynamic Routes

페이지주소 뒤에 파라메터를 이용한 Route 방식 하위 폴더명을 대괄호를 이용해서 작성 => [id] 

 

/app/(movies)/movies/[id]/page.tsx

 

요청 URL:  http://localhost:3000/movies/1

 

params, searchParams 

export const metadata = {
  title: 'Movie Detail',
}

export default async function MovieDetail({
  params,	// [id] 폴더이름
  searchParams, // ?key=value&key=value 형식
}: {
  params: Promise<{ id: string}>;
  searchParams: Promise<{ region?: string, genre?: string }>; 
}) {

  const {id} = await params;
  const {region, genre} = await searchParams;
   
  return (
    <div>
      <p>Movie Id : {id}</p>
      <p>region : {region}</p>
      <p>Genre : {genre}</p>      
    </div>
  )
}

 

요청 예시

• 요청 URL: http://localhost:3000/movies/132423222?region=kr&genre=comedy
• 결과: Movie ID: 123456, Region: kr

📌 설명

• params.id → 동적 경로에서 값 가져옴 (/movies/[id] 설정 필요)
• searchParams.region → URL 쿼리에서 region 값 가져옴
• searchParams.genre → URL 쿼리에서 genre 값 가져옴

 

 

 

서버 컴포넌트에서 searchParams 받는 방법  (15버전부터 promise 명시해야됨) 

서버 컴포넌트에서는 searchParams를 직접 인자로 받을 수 있습니다.

export default function MovieDetail({
  params,
  searchParams,
}: {
  params: { id: string };
  searchParams: { region?: string };
}) {
  return (
    <div>
      Movie ID: {params.id}, Region: {searchParams.region}
    </div>
  );
}

요청 예시

• 요청 URL: http://localhost:3000/movies/123456?region=kr
• 결과: Movie ID: 123456, Region: kr

📌 설명

• params.id → 동적 경로에서 값 가져옴 (/movies/[id] 설정 필요)
• searchParams.region → URL 쿼리에서 region 값 가져옴

 

Next.js 15부터는 params / searchParams가 “요청(request) 기반의 동적 값”으로 분류되면서, Page/Layout에 전달될 때 타입이 Promise로 바뀌었습니다. 그래서 예전처럼 동기 객체로 바로 쓰면(특히 cacheComponents 같은 캐싱/프리렌더 옵션이 켜진 경우) 에러가 납니다. nextjs.org+2nextjs.org+2

왜 Promise로 바뀌었나?

• params, searchParams, cookies(), headers() 같은 값들은 요청이 들어와야 확정되는 데이터라서, Next가 “이 페이지가 정적으로 프리렌더 가능한지 / 동적으로 렌더해야 하는지”를 더 정확히 판단하고,
• 스트리밍/캐싱/프리렌더 단계에서 요청 정보를 동기적으로(즉시) 접근하는 것을 막기 위해 “Async Request APIs”로 통일했습니다. nextjs.org+1
• Next 문서 메시지에서도 Next 15에서 params와 searchParams가 Promise라고 명시합니다.