Next.js - (5) 동적 라우팅

 

안녕하세요! 이번 포스트에서는 Next.js에서 동적 라우팅(Dynamic Routing)을 설정하는 방법에 대해 알아보겠습니다.
URL에 따라 동적으로 페이지를 보여주는 기능은 블로그, 상품 상세페이지, 유저 프로필 등 다양한 곳에서 자주 사용됩니다.

 

 

🗂 기본 Blog 페이지 만들기

먼저 app/ 폴더 안에 blog/ 폴더를 만들고, 그 안에 page.js 파일을 생성해 아래와 같이 작성합니다:

import Link from "next/link";

export default function BlogPage() {
  return (
    <main>
      <h1>The Blog</h1>
      <p>
        <Link href='/blog/post-1'>Post 1</Link>
      </p>
      <p>
        <Link href='/blog/post-2'>Post 2</Link>
      </p>
    </main>
  );
}

 

이 페이지는 /blog 경로에서 렌더링되며, 각각의 블로그 게시물로 이동할 수 있는 링크를 제공합니다.

 

 

 

 

🔀 동적 라우팅 설정하기

이제 /blog/post-1, /blog/post-2 등과 같이 경로에 따라 다른 페이지를 보여주기 위한 동적 라우팅을 설정해보겠습니다.

✅ 폴더 구조 만들기

1. blog/ 폴더 안에 [slug]/라는 동적 폴더를 생성합니다.
2. 그 안에 page.js 파일을 추가해줍니다.

💡 slug는 아무 이름으로 정해도 되지만, 대괄호([])를 꼭 사용해야 Next.js가 동적으로 인식합니다.

 

// app/blog/[slug]/page.js
export default function BlogPostPage({ params }) {
  return (
    <main>
      <h1>Blog Post</h1>
      <p>{params.slug}</p>
    </main>
  );
}

 

위 코드는 /blog/post-1, /blog/post-2 등으로 접속했을 때, URL 경로에 포함된 slug 값을 동적으로 받아와 화면에 출력합니다.

• /blog/post-1 → params.slug === "post-1"
• /blog/post-2 → params.slug === "post-2"

params 객체는 Next.js가 자동으로 제공하는 props 중 하나로, URL의 동적 세그먼트를 포함하고 있습니다.

 

 

🧠 정리

• [폴더명] 형태로 디렉토리를 만들면 Next.js가 해당 경로를 동적으로 처리합니다.
• 해당 폴더 안에 page.js를 만들고, params를 통해 동적 값을 받아올 수 있습니다.
• 이 방식은 블로그 글, 상품 상세, 사용자 페이지 등 다양한 동적 콘텐츠에 활용됩니다.