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?