getting undefined data while using getStaticProps() in next.js

Question

I am getting Cannot read property 'map' of undefined when using getStaticProps in next.js inside components/featured-posts.js but if i use it directly on pages/index.js page it shows the results, anybody know why its doing this?

export async function getStaticProps(){
  const data = await fetch('http://localhost/newblog/newblogapi/posts')
  const posts=await data.json();
  return {
    props: { posts }, // will be passed to the page component as props
  }
}
const FeaturedPosts = ({posts}) => {
 
console.log(posts)

  return (
    <div className="album py-5 bg-light">
      <div className="container mt-5">
      { posts.map(post=>(
        <div key={post.id}>
        <h3>{post.title}</h3>
          </div>
      ))}
      </div>
    </div>

  );
}

export default FeaturedPosts;

Santeri Sarle · Accepted Answer · 2021-03-27 12:17:09Z

3

You can only use getStaticProps on pages (files in the /pages directory), not in regular React components. I suggest you get the posts in your pages/index.js file and pass them as props to the FeaturedPosts component.

answered Mar 27, 2021 at 12:17

Santeri Sarle

1,0211 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelward82 Over a year ago

Agreed. Even if was allowed, getting data in the component is not good practice. The component should handle its implementation and data should be passed to it for handling.

Collectives™ on Stack Overflow

getting undefined data while using getStaticProps() in next.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related