Next.js

동적 라우트 생성

이전 장에서는 정적인 URL 경로를 가진 페이지를 만들고 연결하는 방법을 다뤘습니다. 하지만 실제 서비스에서는 URL 일부가 데이터에 따라 동적으로 바뀌는 경우가 훨씬 많습니다.

URL 세그먼트가 데이터 식별자가 되는 경우 params를 받아 동적 페이지를 구성하는 기준을 정리합니다.

동적 라우트 생성 흐름

1

동적 라우트의 개념과 기준

동적 라우트는 URL 일부를 변수처럼 다룹니다.

2

동적 라우트 생성하기: 대괄호 [] 사용

Next.js App Router에서 동적 라우트 세그먼트를 정의하려면, 폴더 이름을 대괄호([])로 감쌉니다.

3

다중 동적 라우트 세그먼트

하나의 라우트에 여러 개의 동적 세그먼트를 포함할 수도 있습니다.

4

generateStaticParams 함수

SSG 동적 라우트는 빌드할 params를 미리 알려야 합니다.