Why pageProps in NextJS page component is not being passed?

Question

I have index.js page where I use getServerSideProps() to fetch Strapi data via graphql. For some reason the props object is coming empty. I have properly configured _app.js and I definitely return value with SSR.

index.js

const IndexPage = props => {

  useEffect(() => {
    console.log(props) // logs empty object {}
  }, [props])

return (
    <>
     ...
    </>
}

export const getServerSideProps = async () => {
  return {
    props: {
      data: ["Hello World!"]
    }
  }
}

_app.js

function MyApp({ Component, pageProps, router }) {
  console.log(pageProps) // this logs { data: ['Hello World] } object

  return (
    <AppProvider>
      <AnimatePresence
        initial={false}
        onExitComplete={() => window.scrollTo({ top: 0 })}
        mode="wait"
      >
        <Component {...pageProps} key={router.route} />
      </AnimatePresence>
    </AppProvider>
  )
}

So, am I doing something wrong or is it a bug?

Answer 1

I found the answer. I completely overlooked the fact I use custom HOC for page transition animations:

export default withTransition(IndexPage)

It didn't pass parent component's props down.

export const withTransition = ParentComponent => {
  ...

  return () => (
    <>
      <ParentComponent />
      ...
    </>
  )
}

FIX:

export const withTransition = ParentComponent => {
  ...

  return (props) => (
    <>
      <ParentComponent {...props} />
      ...
    </>
  )
}