context parameter is empty on getServerSideProps when page refresh

Question

In one of my projects, I need to fill the meta keyword and the meta description by the data which is fetched from a REST API request.
so I used the getServerSideProps function, to fetch the response and pass it to the page.
Here's my getServerSideProps function

export async function getServerSideProps(context) {


    function makeParam() {
        let params = new URLSearchParams(context.params);
        let keysForDel = [];
        params.forEach((v, k) => {
            if (v === 'undefined')
                keysForDel.push(k)
        });
        keysForDel.forEach(k => {
            params.delete(k)
        });
        return params.toString()
    }

    let response = await axios.post(
        process.env.baseAddress + "getData.php",
        qs.stringify({
            data: "api/search/advance?" + makeParam()
        }),
        {
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            }
        })

    return {
        props: {
            dataFromServer: response.data,
            params: makeParam()
        },
    }
}

everything works fine in development mode (localhost), but after deploying, by refreshing the page Context parameter is an empty object.
this function was written in one of the pages that has one parameter called the city, which is shown below

I have already checked getServerSideProps props empty object. as Ankri said

Can you please check, that you pass the pageProps to your custom Component?

here is my Component tag, which contains pageProps.

<Layout>
    <Component {...pageProps} ref={current}/>
</Layout>

How are you verifying that the context parameter is an empty object? Also, can you show us the component where you're using the `params` prop to populate the meta tags? — juliomalves, Feb 19 '22 at 18:09

score 0 · Answer 1 · answered Feb 20 '22 at 09:16

First make the file structure like this:

pages:
  city:
   [...slug].js

Note: city is folder!

Now you can get the first param like this:

export async function getServerSideProps(context) {
 const slug = context?.query?.slug[0] || "";
 const req = await axios.post(`${url}?advance=${slug}`)
 // ... rest of the code 
}

now if url looks like this => http://localhost:300/city/japan slug = japan

context parameter is empty on getServerSideProps when page refresh

1 Answers1