[Next.js] getStaticProps의 리턴값(return value)이 not defined 일 때

Next.js의 공식 홈페이지 튜토리얼에 따르면,

 

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

 

이런 식으로 되어있다.

 

정적인 방식으로 만들 getStaticProps 메서드에서는 { props: { posts } } 이렇게 리턴하고

받을 때는 Blog({ posts }) 이렇게 되어있다.

 

상황에 따라 이렇게 하면 해당 값은 계속 not defined라고 뜨면서 작동이 안된다.

 

이 경우에는 해당 props를 입력받는 컴포넌트가 그냥 받아야한다. 

 

저 예시라면 Blog( posts ) 이렇게 해야지 작동한다는 것이다.

 

자신이 넣는 props의 형태를 잘보고 작동이 되지 않는다면 중괄호를 없애보자..