Next.js Discord

Discord Forum

props returned by getServerSideProps don't get into page, why?

Answered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Avatar
Golden northern bumble beeOP
I return props from my getServerSideProps, I literally print them on the console.
Then I print what my page receives, and it receives just an empty object.
Why this can happen?

Next 12 here.
Answered by Golden northern bumble bee
Ok, it's fixed. And it was really stupid mistake. I'll leave it here for future generations.

Page doesn't get called "by" getServerSideProps, instead it's being called from _app.tsx. So if you mess things up there, your page can be rendered incorrectly.

In my case, while refactoring, I noticed that in
function App({ Component: Page, pageProps }: AppProps) {

the type of pageProps is empty, just {}
So I automatically removed it. And also removed it from <Page {...pageProps} />

While I realize how stupid it was, I have one justification: I was following Typescript, which fails to provide proper types.
View full answer

14 Replies

Avatar
joulev & fuma pray for Schneider
Can you show your code?
Avatar
Golden northern bumble beeOP
function isTreeType(type: string | string[]): type is TreeType {
  return typeof type === 'string' && TREE_TYPES.includes(type as TreeType)
}

export const getServerSideProps: GetServerSideProps<CategoriesPageProps> = async (ctx) => {
  const { tab } = ctx.query
  if (!tab) {
    return {
      redirect: {
        permanent: false,
        destination: `/?tab=fpna`,
      },
    }
  }
  console.log('tab = ', tab)
  const res = isTreeType(tab) ? { props: { treeType: tab } } : ({ notFound: true } as const)
  console.log('res = ', res)
  return res
}

export default function Page(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
  console.log('page props', props)
  return <CategoriesPage {...props} />
}
Console output:
tab =  fpna
res =  { props: { treeType: 'fpna' } }
page props {}
Oh, wait. Damn, I forgot something... Let me check it quickly
I forgot that Page doesn't get called immediately!
Avatar
joulev & fuma pray for Schneider
Hmm interesting… can you make a minimal reproduction repo cuz your code looks fine to me
Avatar
Golden northern bumble beeOP
@joulev & fuma pray for Schneider I'm pretty sure I messed something up in _app.tsx
Avatar
joulev & fuma pray for Schneider
Hmm. Just try to reduce your code to a minimal state (see https://nextjs-discord-common-questions.joulev.dev/how-to-create-a-minimal-reproduction-repository), then give the github link to me
Your code looks fine so the problematic part is elsewhere
Avatar
Golden northern bumble beeOP
ok, thanks. However it's pretty difficult 🙂
Avatar
Golden northern bumble beeOP
Ok, it's fixed. And it was really stupid mistake. I'll leave it here for future generations.

Page doesn't get called "by" getServerSideProps, instead it's being called from _app.tsx. So if you mess things up there, your page can be rendered incorrectly.

In my case, while refactoring, I noticed that in
function App({ Component: Page, pageProps }: AppProps) {

the type of pageProps is empty, just {}
So I automatically removed it. And also removed it from <Page {...pageProps} />

While I realize how stupid it was, I have one justification: I was following Typescript, which fails to provide proper types.
Answer
Avatar
joulev & fuma pray for Schneider
Yeah what you said is completely correct
Avatar
Golden northern bumble beeOP
I often overestimate TS 😦
From _app.d.ts:
export declare type AppProps<P = {}> = AppPropsType<Router, P>

Maybe one of these would be a little less confusing?
export declare type AppProps<P = object> = AppPropsType<Router, P>
export declare type AppProps<P = Record<string, unknown>> = AppPropsType<Router, P>