Next.js getStaticProps undefined 에러

getStaticProps() undefined 에러 해결하기

pre-render에서 데이터를 fetch해오기 위해 Next 9.3에서 권장하는 getStaticProps()를 이용하여 불러왔다.

하지만 분명히 공식 홈페이지에서 한대로 컴포넌트에 props로 넘겨주었는데, 막상 실행시켰을 때는 undefined가 뜬다.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  return {
    props: { posts },
  }
}

export default Blog

아직 이 개념이 나온지 몇 달이 되지 않아 구글링하며 preview나 mdx도 시도해보고 next.config.js에서 설정도 하면서 며칠 삽질 했는데 정말 너무 간단하게 해결됐다…

사용할 컴포넌트에 { props } 값이 아닌 props 자체를 넘겨주면 된다.

필자는 카테고리 listgetStaticProps()로 불러와 사용했기에 해당 예제로 바꾸겠다.

export async function getStaticProps() {
  const res = await fetch(CATEGORY)
  const list = await res.json()
  return {
    props: { list },
  }
}

export default function HomePage(props) {
  console.log(props);

  return (...)
}

01 console.log 결과

따라서 아래와 같이 변수에 할당하여 사용했다.

const categoryfromAPI = props.pageProps.list
const contentList = categoryfromAPI.content_types
const stackList = categoryfromAPI.stacks
const creatorList = categoryfromAPI.channels

이제 pre-render 단계에서 데이터를 fetch해오기 때문에 렌더링 될때 깜빡임이 없어졌다.


👆@김민정(howdy-mj)
안녕하세요, 공부한 것을 기록하고 공유하는 걸 좋아하는 프론트엔드 개발자 김민정입니다. 회고록, 일상 및 다른 관심사는 티스토리에 기록하고 있습니다.

GitHubTistory