[Next.js] getStaticPaths 구현

getStaticPaths 구현

우선 파일을 설정해보겠습니다.

- pages/posts 디렉터리에 내부에 [id]. js라는 파일을 생성합니다.

- pages/posts 내부에 있는 first-post.js는 더 이상 사용하지 않기 때문에 제거합니다.

 

1️⃣ pages/posts/[id]. js 파일 내부에 다음 코드를 삽입합니다.

(.. 은 나중에 작성합니다.)

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

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

 

2️⃣ 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$/, '')
      }
    }
  })
}

 

❗중요❗

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

각 객체에는 id라는 키가 있어야 하고, params 키가 있는 객체 안에 포함해야 합니다.

(파일 이름이 [id]를 사용하기 때문에)

그렇지 않으면 getStaticPaths는 실패합니다.

 

4️⃣ 마지막으로 getAllPostIds 함수를 가져와서 getStaticPaths 내부에 사용합니다.

pages/posts/[id].js를 열고 아래 코드를 삽입합니다.

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

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

- paths에는 getAllPostIds()에서 반환된 배열(경로 목록)을 담습니다.

---

Learn | Next.js