최근 웹 애플리케이션 개발에서 Next.js의 인기가 급증하고 있습니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 제공하여 SEO와 성능을 최적화할 수 있도록 도와줍니다. 이 글에서는 Next.js의 동적 라우팅과 페이지 생성에 대해 깊이 있게 살펴보겠습니다. 특히, 블로그 게시글의 상세 페이지를 동적으로 생성하는 방법을 중점적으로 다룰 것입니다.
1. 동적 라우팅(Dynamic Routing) 이해하기
Next.js의 라우팅은 파일 시스템 기반입니다. 이 말은 페이지를 생성하기 위해 파일 및 디렉토리 구조를 따르는 것을 의미합니다. Next.js에서 동적 라우팅을 구현하려면, 파일명에 대괄호([])를 사용하여 동적인 부분을 표시할 수 있습니다.
1.1 동적 페이지 생성
예를 들어, 블로그 게시글에 대한 상세 페이지를 만들고자 할 때, 각 게시글의 ID나 슬러그를 기반으로 URL을 동적으로 생성할 수 있습니다. 동적 경로를 생성하기 위해, pages 디렉토리 내에 다음과 같은 파일을 생성합니다:
pages/posts/[id].js1.2 페이지 컴포넌트 작성하기
이제 [id].js 파일에서 동적 페이지 컴포넌트를 작성하겠습니다. 먼저, Next.js에서 제공하는 useRouter 훅을 사용하여 URL 파라미터에 접근하고, 게시글 데이터를 가져오는 함수를 작성합니다.