[Docs] 동적 라우트(Dynamic Routes)

앞서 index 페이지에 블로그 데이터를 불러왔으니 이제 개별 페이지를 만들어 보자.

해당 페이지의 URL이 아래 사진처럼 외부 블로그 데이터에 따라 달라지게 하려면 어떻게 해야할까?

외부 데이터에 따라 경로가 달라지는 페이지를 정적으로 생성하면, 동적 URL이 활성화된다.

 

 

단계 살펴보기

우선 각 포스트 경로는 /posts/<id>로 설정하자. 여기서 <id>는 posts폴더 내 마크다운 파일의 이름이다.

파일명이 ssg-ssr.md와 pre-rendering.md므로, 경로는 /posts/ssg-ssr 및 /posts/pre-rendering이다.

 

우선 pages/posts 아래에 [id].js 페이지를 만든다.

[ ] 형태의 페이지는 Next.js의 다이나믹 라우트를 의미한다.
앞서 만든 다른 페이지와 마찬가지로 페이지를 렌더링 하는 코드를 작성한다.

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

 

그리고 비동기 함수  getStaticPaths를 익스포트 한다. 이 함수는 id가 될 수 있는 가능한 값 목록을 반환한다.

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

export async function getStaticPaths() {
  // Return a list of possible value for id
}

 

마지막으로, getStaticProps를 다시 구현한다.

이번에는 getStaticProps가 id가 포함된 params를 받는다.

주어진 id에 해당하는 블로그 게시물에 필요한 데이터를 페치 하기 위해서다.

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

export async function getStaticPaths() {
  // Return a list of possible value for id
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

 

 

지금까지 작성한 내용을 사진으로 요약하면 아래와 같다.