getServerSideProps always returns empty object as props to Page component

[abhinandshetty]

I have been trying to fetch some data using getServerSideProps and pass it as props to my page component but the props received by the Page component is always an empty object.

page/About.js

function About( props ) {
console.log(props) // is an empty object
return
}

export async function getServerSideProps() {
const res = await fetch(https://api.github.com/repos/vercel/next.js)
const data = await res.json()
console.log(data) // has data
return { props : { data } }
}

export default About;

---

package.json
{
"name": "biz-page-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@apollo/react-components": "^3.1.5",
"@apollo/react-hooks": "^3.1.5",
"@material-ui/core": "latest",
"@zeit/next-css": "^1.0.1",
"apollo-boost": "^0.4.9",
"bootstrap": "^4.5.0",
"graphql": "^15.1.0",
"isomorphic-unfetch": "^3.0.0",
"next": "9.4.4",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "16.13.1",
"react-star-ratings": "^2.3.0"
}
}

The above example is from the official next.js docs.

[arso1er]

Hi,
Your About.js code is working fine in my test. Make sure to return something from the About function (return null if you want). Also, getServerSideProps will run on the server, so expect console.log(data) to show on your terminal.

[colton-savage-lmp]

I have the same issue, did you ever end up resolving it?

[arso1er]

Could you add a reproduction?

[colton-savage-lmp]

So I figured out what my issue was in another discussion thread. I was using a custom _app.tsx page and passed down the incorrect props, it expects pageProps but I used just props