props returned by getServerSideProps don't get into page, why?
Answered
Golden northern bumble bee posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Golden northern bumble beeOP
I return props from my
Then I print what my page receives, and it receives just an empty object.
Why this can happen?
Next 12 here.
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
In my case, while refactoring, I noticed that in
the type of
So I automatically removed it. And also removed it from
While I realize how stupid it was, I have one justification: I was following Typescript, which fails to provide proper types.
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.
14 Replies
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
Can you show your code?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
Hmm interesting… can you make a minimal reproduction repo cuz your code looks fine to me
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Golden northern bumble beeOP
@joulev I'm pretty sure I messed something up in _app.tsx
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
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](https://cdn.discordapp.com/embed/avatars/0.png)
Golden northern bumble beeOP
ok, thanks. However it's pretty difficult 🙂
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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
In my case, while refactoring, I noticed that in
the type of
So I automatically removed it. And also removed it from
While I realize how stupid it was, I have one justification: I was following Typescript, which fails to provide proper types.
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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
Yeah what you said is completely correct
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Golden northern bumble beeOP
I often overestimate TS 😦
From
Maybe one of these would be a little less confusing?
_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>