getServerSideProps returns undefined

Question

I'm new to Next. I'm using getServerSideProps to pull a array of objects. It gets this array by making a call to a BE API. In the route for that call, I use the params of the page as explaiend in the docs for dynamic routes: https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

I take that array and give it to another component that maps over it.

When I run the app, I get an error message stating the following

TypeError: Cannot read properties of undefined (reading 'page')

I'm not sure why this is showing undefined. The BE server is definitely sending the objects.

Here is the Page

export interface LikedListRes {
    LikedArtwork: SearchResult[]
    page: number
}

const Account: NextPage<{data: LikedListRes}> = ({data}: {data: LikedListRes}) => {
    return (
        <Grid container spacing={2}>
            <Grid xs={4} sm={4} md={4} lg={4}></Grid>
            <Grid xs={8} sm={8} md={8} lg={8}>


                <Box sx={{margin: 'auto'}}>
                   <LikedArtworks page={data.page} likedArtwork={data.LikedArtwork} />
                </Box>


            </Grid>
        </Grid>
    )
}

Here is the function. Note the route using the userID

const getServerSideProps: GetServerSideProps = async ({params}) => {

    const getLikedArtwork = async (userID: string, page: number) => {
    const res = await fetch(`http://${api}/likedArtwork?page=${page.toString()}&userID=${userID}`).then(async res => {
        const response: LikedListRes = await res.json()
        return response 
    })

        return res
    }

    const res = await getLikedArtwork(params?.id as string, 0)

    return {
        props: {data: res}
    }


}

Any advice or guidance would be greatly appreciated!

Answer 1

I figured it out. You have to export the function.

export const getServerSideProps: GetServerSideProps = async (context) => {...