Next.js에 대해서 알아보자 #3. Dynamic Routes와 SSG

이번 포스팅에서는 Next.js에서 지원하는 동적 라우트(Dynamic Route)에 대한 개념을 살펴보고 간단한 예제로 실습까지 해보는 시간을 가지려고 한다. 참고로 튜토리얼은 Next.js 공식 홈페이지에서 제공하는 자료 및 소스코드를 가지고 진행하였다.

예제는 간단한 블로그를 만드는 프로젝트이다. 블로그의 페이지 컨텐츠는 외부 데이터에 의존하는데, getStaticProps 함수를 통해서 데이터를 패치하고 렌더링한다.

이번에는 각각의 블로그 포스팅 페이지 경로가 외부 데이터에 의존하는 부분에 대해서 다뤄보려고 한다. Next.js에서는 경로를 바탕으로 정적으로 페이지를 생성할 수 있는 기능을 제공한다. 이 기능이 Next.js에서 동적 url을 가능하게 한다.

동적 라우트를 생성한다는 말은 만약에 블로그 포스트의 파일 이름이 posts 디렉토리 하에 'id' 라고 되어 있다면 경로가 '/posts/:id' 가 된다는 의미이다. 예를 들어 예제에서는 'ssg-ssr.md' 파일과 'pre-rendering.md' 파일이 있으므로 이 파일들에 대한 페이지 경로는 '/posts/ssg-ssr' 그리고 '/posts/pre-rendering' 이 되는 것이다.

그러면 지금부터 동적 라우트를 가지고 정적 페이지를 어떻게 생성하는지 살펴보자.

동적 라우팅을 위해 /posts/[id].js 와 /lib/posts.js 파일을 다음과 같이 작성한다.

 /posts/[id].js 에서는 Post 컴포넌트를 작성하고, getStaticProps를 통해 게시물의 data를 가져오고 getStaticPaths를 통해 경로를 불러온다.

/lib/posts.js에서는 게시물의 모든 Id가 담긴 배열을 만들어주는 getAllPostIds 함수와 id 값을 가지고 포스트 데이터를 얻는 getPostData 함수를 각각 구현해 준다.

그 이후에 페이지를 더 예쁘게 렌더링하는 과정은 옵셔널한 부분이므로 생략한다. Next.js 튜토리얼을 보면 자세한 방법이 나와 있으니 필요한 경우 참고하길 바란다. http://localhost:3000/posts/ssg-ssr 이런 식으로 로컬에서 상세 페이지 url을 들어갈 수 있게 만들었다.

 

부가적으로 getAllPostIds() 함수에서 필요한 경우 API 엔드포인트에서 데이터를 패치할 수도 있다. 그리고 개발 모드(development)에서는 getStaticPaths가 모든 요청 때 마다 실행되지만, 운영 모드(production)에서는 getStaticPaths가 빌드 시에만 실행이 된다는 것을 기억하자. 동적 라우트는 중첩해서도 상용할 수 있다. 예를 들어 'pages/posts/[...id].js' 와 같이 작업을 하면 '/posts/a', '/posts/a/b'. 'posts/a/b/c' 등과 같이 중첩해서 url을 설정할 수 있다.

 

다음 포스팅에서는 API Routes에 대해서 다뤄 보고자 한다.