Dynamic Routes(동적 라우팅)

2025.1.12 일요일의 공부기록

Dynamic Routing(동적 라우팅)은 URL 경로가 고정되지 않고, 변수 형태로 동적으로 처리되는 라우팅 방식을 의미한다.
예를 들어, 블로그 게시물의 경로가 /blog/post-1, /blog/post-2처럼 고정되지 않고, /blog/[id]처럼 id 값에 따라 동적으로 변하는 경로를 처리하는 것이 동적 라우팅이다.

---

Next.js에서 Dynamic Routing 구현 방법

Next.js에서는 폴더 이름을 대괄호([])로 감싸서 동적 라우팅을 설정한다.
폴더 이름은 URL 매개변수 변수명으로 사용되며, 페이지 컴포넌트에서 해당 변수값을 참조할 수 있다.

동적 라우팅 설정 예제

1. 폴더와 파일 구조:

   app/
   ├── blog/
   │   ├── [id]/
   │   │   └── page.tsx

2. [id] 페이지 구현:

   export default function BlogPost({ params }: { params: { id: string } }) {
     return (
       <div>
         <h1>Blog Post ID: {params.id}</h1>
       </div>
     );
   }

3. 동작:

   • /blog/1 → params.id = "1"
   • /blog/hello-world → params.id = "hello-world"

---

동적 라우팅과 정적 라우팅 비교

특징	정적 라우팅(Static Routing)	동적 라우팅(Dynamic Routing)
URL 경로	고정된 경로 (/about, /contact)	동적으로 변하는 경로 (/blog/[id])
폴더/파일 구조	app/about/page.tsx	app/blog/[id]/page.tsx
유연성	URL이 고정되어 유연성이 낮음	다양한 변수 값을 URL로 처리 가능
예제 경로	/about, /contact	/blog/1, /blog/post-123

---

Dynamic Routing에서 params와 searchParams 사용법 (Next.js 15 이상)

Next.js 15 이상 버전에서는 동적 라우팅에서 params와 searchParams를 처리하기 위해 비동기 함수를 사용해야 한다.

주요 개념

1. params:
   동적 라우팅 경로의 매개변수를 의미한다. 예를 들어, /blog/[id] 경로에서 id 값을 담는다.

2. searchParams:
   쿼리 문자열의 값을 가져온다. 예를 들어, /blog/[id]?filter=popular에서 filter 값을 가져온다.

비동기 처리를 통한 사용 예제

export default async function BlogPost({ params, searchParams }: { params: { id: string }, searchParams: { [key: string]: string } }) {
  // 비동기 작업이 가능
  const data = await fetch(`https://api.example.com/posts/${params.id}`).then((res) => res.json());

  return (
    <div>
      <h1>Blog Post ID: {params.id}</h1>
      <p>Search Filter: {searchParams.filter}</p>
      <p>Post Content: {data.content}</p>
    </div>
  );
}

비동기 처리를 통한 사용 예제(강의)

type Props = {
  params: { id: string };
  searchParams: { region: string; page: string };
};

export default async function MovieDetail({ params, searchParams }: Props) {
  const { id } = await params;
  const { region, page } = await searchParams;
  return <h1>Movie {id}</h1>;
}

---

Dynamic Routing의 장점

1. URL 관리의 유연성
   고정된 경로를 미리 정의할 필요 없이, 변수로 동적으로 처리할 수 있다.

2. SEO 향상
   블로그, 상품 등 다양한 콘텐츠를 URL 경로에 맞게 노출하여 SEO를 최적화할 수 있다.

3. 코드 재사용성 증가
   동일한 컴포넌트를 재사용하여 다양한 변수값을 처리할 수 있다.