[Docs] 동적 라우트 - getStaticPaths 구현

이제 id값이 포함된 배열을 반환하 함수를 생성해줘야 한다.

 

lib/posts.js를 열고 하단에 다음과 같이 getAllPostIds 함수를 작성한다.

이 함수는 posts 디렉터리에 있는 파일 이름의 목록(.md 파일 제외)을 반환한다.

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);

  // Returns an array that looks like this:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

중요

반환되는 목록은 단순한 문자열 배열이 아니라, 위의 주석과 같은 객체 배열이어야 한다.

각 객체에는 params 키가 있어야 하고 id 키가 있는 객체가 포함되어야 한다(파일 이름에 [id]를 사용하고 있기 때문).

그렇지 않으면 getStaticPaths는 정상 작동하지 않을 것이다.

마지막으로 getAllPostIds 함수를 임포트하여 getStaticPaths 내부에서 사용한다.

import { getAllPostIds } from '../../lib/posts';

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

 

paths에는 getAllPostIds()가 반환한 경로의 배열이 포함되며, fallback은 일단 false로 두고진행하자.