#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 받는 방법

서버 컴포넌트에서는 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 값 가져옴

---

✅ 클라이언트 컴포넌트에서 useSearchParams 사용하는 방법

클라이언트 컴포넌트에서 useSearchParams를 사용하려면 "use client"를 선언해야 합니다.

"use client";

import { useSearchParams } from "next/navigation";

export default function MovieDetail({ params }: { params: { id: string } }) {
  const searchParams = useSearchParams();
  const region = searchParams.get("region");

  return (
    <div>
      Movie ID: {params.id}, Region: {region}
    </div>
  );
}

 

📌 주의:

• useSearchParams는 클라이언트 컴포넌트에서만 사용 가능하므로, "use client"를 추가해야 합니다.
• 서버 컴포넌트에서 사용하려면 searchParams를 직접 받는 방식을 사용하세요.

---

✅ 결론: 언제 어떤 방법을 사용해야 할까?

컴포넌트 유형searchParams 사용 방법

서버 컴포넌트	export default function Page({ searchParams })
클라이언트 컴포넌트	"use client"; import { useSearchParams } from "next/navigation"

이제 Next.js 14에서도 올바르게 searchParams를 사용할 수 있습니다! 🚀