SSG 도입하기 / getStaticPaths, getStaticProps

요약

Error : getstaticpaths is required for dynamic ssg pages and is missing for... 를 만나서 정리하였습니다

 

getStaticPaths와 getStaticProps은 동적라우팅할 때 getStaticProps를 통해 불러올 데이터들을 getStaticPaths로 정해준다고 생각하면 됩니다.

 

우선 동적인 페이지를 SSG로 빌드시키기 위해선 빌드할 때 페이지를 만들어야 합니다.

하지만  SPA, SSR 방식으로 구현했을 때를 생각해보면 페이지 요청시마다 데이터를 받아오고 보여주면 되지만 SSG로 구현하는 경우 요청이 없더라도 미리 만들기 위해 데이터를 받아와야합니다

 

이 때 만약 동적인 페이지라면 해당 URL의 모든 경우에 따라 데이터를 요청해서 받아올 수 없으니 어느 범위의 데이터만 받아와야한다고 지정해줘야 하는데 그 역할을 하는게 getStaticPaths입니다

개요

Notion API를 활용해서 NextJS로 간단한 블로그 사이트를 만들어보고자 했습니다

 

유튜브에서 API 문서와 실제 사용해보는 테스트 환경을 참조해서 getStaticProps로 홈에서 데이터를 받아 params로 [id].tsx 를 통해 넘겨주던 중 단순히 NextJS hook인 useRouter 를 쓰는 것 보단 NextJS의 장점을 활용하기 위해 SSG로 받으려고 했습니다.

 

그런데 Error : getstaticpaths is required for dynamic ssg pages and is missing for가 뜨게 되었고 에러를 찾던 중 params로 SSG를 활용하기 위해선 getStaticPaths 가 필요하다는 것을 알게되었습니다. 하지만 바로 이해가 되지 않아 삽질했던 정보를 적어보려고 합니다.

// 해결한 코드!
import React, { useEffect } from 'react'
import { Client } from '@notionhq/client'
import { NextPage, GetStaticPropsContext } from 'next'

const Article: NextPage = ({ post }: any) => {
  console.log(post)
  return <div>123</div>
}

export default Article

// 빌드될 때 실행
export const getStaticPaths = async () => {
  // posts를 받기 위해 fetch
  const notion = new Client({ auth: process.env.NOTION_API_KEY })
  const databaseID = '5a74d44910624069aa52d4ac84db5f0e'
  const respose = await notion.databases.query({
    database_id: databaseID,
  })
  // pre-render할 Path를 얻음 (posts를 통해서)

  const paths = respose.results.map((result) => ({
    params: {
      id: result.id,
    },
  }))
  // 우리는 오로지 이 path들만 빌드타임에 프리렌더 함
  // { fallback: false } 는 다른 routes들은 404임을 의미
  // true이면 만들어지지 않은 것도 추후 요청이 들어오면 만들어 줄 거라는 뜻
  return { paths, fallback: false }
}

export async function getStaticProps({ params }: GetStaticPropsContext) {
  const notion = new Client({ auth: process.env.NOTION_API_KEY })
  const blockID = params?.id?.toString() || ''
  const response = await notion.blocks.children.list({
    block_id: blockID,
  })
  return {
    props: {
      post: response.results,
    },
  }
}

 

참고한 자료

https://velog.io/@qwerzxcvss/35.-Next.js-pre-rendering

#35. Next.js 사전렌더링으로 데이터 가져오기

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Data Fetching: getStaticPaths | Next.js