Next/router cannot handle notFound in getServerSideProps

Question

I have a link: appBaseUrl/edit/:userId
I want it to be transited by next/router like following:

router.push(`appBaseUrl/edit/${userId}`)

and in the getServerSideProps function is like following:

export const getServerSideProps: GetServerSideProps = async ({props}) => {
    const parsedProps = parseProps(props);
    const fetchedValues = await fetchFunction(params).data;
    // ... another 10 fetch queries
    if (!isValueValid(fetchedValues)) {return {notFound: true}}
    return {
        props: {
            ...parsedProps,
            fetchedValues,
            // ... other fetchedValues
        }
    }
}

No condition in the component function btw.

now the issue is,
if i visit the page directly by url with invalid userId, or by window.location.replace, the 404 show up as expected,
but when using next.router transition, it result in runtime error because react try to render page with undefined props).
Adding customized 404 page would not help.
I have not found working solutions so far.
Any help would be appreciated

Can you check if `getServerSideProps` is called when doing router.push? Your code should work as it is I believe — Tushar Shahi, Aug 22 '22 at 16:51
Just to sumarize your question, the `notFound:true` part is not working when you are doing router.push but is working when you change URL using other methods right — Tushar Shahi, Aug 22 '22 at 16:52
Can you check if getServerSideProps is called when doing router.push? Your code should work as it is I believe - did you try this? — Tushar Shahi, Aug 22 '22 at 17:26

score 0 · Answer 1 · answered Aug 22 '22 at 17:47

0

Open issue of Next.
See this issue: https://github.com/vercel/next.js/issues/38239

answered Aug 22 '22 at 17:47

QSBK

44
4

Next/router cannot handle notFound in getServerSideProps

1 Answers1