Unable to fetch API data using getServerSideProps

Question

I'm trying to fetch a users name from the JSON placeholder API and just simply display it but it seems to be coming back as undefined and not sure why. Any help would be great!

function GetServer({ data }) {

  return (
    <>
      <h1>{data.name}</h1>
    </>
  )
}

export async function getServerSideProps() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/1`)
  const data = await res.json()

  return { props: { data } }
}

export default GetServer

Answer 1

At a guess, the above code is not inside a page. You have to be inside a page file.

getServerSideProps can only be exported from a page. You can’t export it from non-page files.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props