String with query parameters in generateStaticParams

75 Views Asked by At

Could you please advise me, I have a following page.tsx which gets the data from the server and delivers it to the Component:

export async function generateStaticParams ({ params: { product } }: IParamsProps) {
    switch (product) {
        case 'first':
            return [
                { doc: `doc?name=${product}&version=1.4&language=de` },
                { doc: `doc?name=${product}&version=1.3&language=de` },

                { doc: `doc?name=${product}&version=1.4&language=en` },
                { doc: `doc?name=${product}&version=1.3&language=en` },
            ];

        case 'second':
            return [
                { doc: `doc?name=${product}&version=1.6&language=de` },
                { doc: `doc?name=${product}&version=1.6&language=en` },
            ];

        default:
            return [];
    };
};

async function getData ({ params }: IPageProps & IParamsProps) {
    const {
        doc,
        product,
    } = params;

    const res = await fetch(
        `http://localhost:3000/${product}${doc.slice(3)}`,
        {
            method: 'GET',
            cache: 'no-store',
        }
    );
    const data = await res.json();

    return data;
}

const Page = async (props) => {
    const {
        params 
    } = props;

    const data = await getData({ params });

    return <Component data={data} />
}

app directory: [lang]/web/[product]/[doc]

next.js version: 14.0.2

After executing the npm run build, the question mark is replaced by %3F. So that instead of

doc?name=product_name&version=1.4&language=de

I got the following path:

doc%3Fname=product_name&version=1.4&language=de.

How can this be fixed? And is it even normal practice to generate query strings as static paths?

0

There are 0 best solutions below