How can I do that the slug changes when I change the language... I'm using server component and generateStaticParams but impossible to change the slug..
#generateStaticParams
hoary agate
sudden nexusBOT
Hi @hoary agate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The generateStaticParams function in Next.js is used to statically generate routes at build time. It can be used in combination with dynamic route segments to generate different versions of a page based on the parameters returned by the function.
If you want to generate different slugs based on the language, you can return an array of objects from generateStaticParams, where each object represents a different version of the page with a different slug. Here's an example:
export function generateStaticParams() {
return [{ slug: ['en', '1'] }, { slug: ['es', '2'] }, { slug: ['fr', '3'] }]
}
In this example, three versions of the page will be statically generated:
- /product/en/1
- /product/es/2
- /product/fr/3
The params object returned by generateStaticParams is then passed to your page component, where you can use it to render different content based on the slug.
export default function Page({ params }: { params: { slug: string[] } }) {
const { slug } = params
// ...
}
Remember that generateStaticParams replaces the getStaticPaths function in the Pages Router. It will be called during next dev when you navigate to a route, and during next build before the corresponding Layouts or Pages are generated. However, it will not be called again during revalidation (ISR).
For more information, you can refer to the Next.js documentation on generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params).
If you're using internationalization, you can also use generateStaticParams to generate static routes for a given set of locales. Here's an example:
export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
In this example, two versions of the page will be statically generated, one for 'en-US' and one for 'de'. The params object returned by generateStaticParams is then passed to your layout component, where you can use it to render different content based on the language.
export default function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
)
}