CODEWITHSUNDEEP
javascriptreactjsnext.jsstrapi
Srajan Barkade
Srajan Barkade

Reputation: 51

using Getserversideprops inside page to fetch data from strapi, still getting undefined as the data

so i am trying to fetch data from strapi backend using getServerSideprops in nextjs but the data i am getting is undefined even tho the link works just fine inside browser, and yes i am fetching inside a page not inside a component using same method as described in docs what i am doing wrong ?

function Products({props}) {
  console.log(props); //<-- returns undefined 

  return (
    <div className=''>
      <div>
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`http://localhost:1337/api/products?populate=*`)
  const data = await res.json()
console.log(data) //<-- returns undefined 
  // Pass data to the page via props
  return { props: { data } }
}


export default Products;

Upvotes: 0

Views: 80

Answers (1)

Jonathan Wieben
Jonathan Wieben

Reputation: 671

You're passing data into your component via getServerSideProps, so you should destructure accordingly:

function Products({data}) {
  console.log(data);
  ...
}

You can also log your full props object like so:

function Products(props) {
  console.log(props);
  ...
}

Upvotes: 1

Related Questions