Fetching data in next.js returning undefined

Question

i'm trying to fetch data from from this API https://rapidapi.com/apidojo/api/shazam using next.js but i'm getting undefined and i don't know what is the problem, here's a snippet of the code, i'll be very glad if someone could help me understand what i'm doing wrong.

export async function getServerSideProps(context) {
  const res = await fetch(
    'https://shazam.p.rapidapi.com/charts/track?locale=en-US&pageSize=20&startFrom=0',
    {
      method: 'GET',
      headers: {
        'x-rapidapi-host': 'shazam.p.rapidapi.com',
        'x-rapidapi-key': 'my_key',
      },
    },
  );

  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data: data,
    },
  };
}

Answer 1

Try this code snippet. It will provide you a better perspective also it will throw some errors, if any

fetch("https://shazam.p.rapidapi.com/charts/track?locale=en-US&pageSize=20&startFrom=0", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "shazam.p.rapidapi.com",
        "x-rapidapi-key": "*****"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});