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

Answered

Golden northern bumble bee posted this in #help-forum

Golden northern bumble beeOP

2023-09-02T12:27:45.000Z

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

@Golden northern bumble bee 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.

joulev

2023-09-02T12:28:10.000Z

Can you show your code?

Golden northern bumble beeOP

2023-09-02T12:28:26.000Z

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!

joulev

2023-09-02T12:30:17.000Z

Hmm interestingâ€¦ can you make a minimal reproduction repo cuz your code looks fine to me

Golden northern bumble beeOP

2023-09-02T12:31:18.000Z

@joulev I'm pretty sure I messed something up in _app.tsx

joulev

2023-09-02T12:32:02.000Z

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

Golden northern bumble beeOP

2023-09-02T12:32:15.000Z

ok, thanks. However it's pretty difficult ðŸ™‚

Golden northern bumble beeOP

2023-09-02T12:37:57.000Z

function App({ Component: Page, pageProps }: AppProps) {

Answer

joulev

2023-09-02T12:38:27.000Z

Yeah what you said is completely correct

Golden northern bumble beeOP

2023-09-02T12:38:55.000Z

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>