How i can use staticProps with dinamic routes?
Unanswered
Bumble bee posted this in #help-forum
Bumble beeOP
I added the getStaticProps function, however, the rendering function only receives the route params, ignoring the getStaticProps.
I'm trying to use getStaticProps so that the page is rendered only once per combination of topic/lang.
here is the code and a image of my folder's structure:
I'm trying to use getStaticProps so that the page is rendered only once per combination of topic/lang.
here is the code and a image of my folder's structure:
// page.tsx
export default function Home(props: {
params: { topic: string; lang: string };
}) {
console.log(props);
// { params: { topic: 'home', lang: 'null' }, searchParams: {} }
// url: http://localhost:3000/home/null
...
}
...
export const getStaticProps = ({
params,
}: {
params: { topic: string; lang: string };
}) => {
return {
props: {
topic: isValidTopic(params.topic) ? params.topic : "home",
lang: isValidlang(params.lang) ? params.lang : "pt-br",
},
// { props: { topic: 'home', lang: 'pt-br' }}
// url: http://localhost:3000/home/null
};
};12 Replies
@Bumble bee I added the getStaticProps function, however, the rendering function only receives the route params, ignoring the getStaticProps.
I'm trying to use getStaticProps so that the page is rendered only once per combination of topic/lang.
here is the code and a image of my folder's structure:
ts
// page.tsx
export default function Home(props: {
params: { topic: string; lang: string };
}) {
console.log(props);
// { params: { topic: 'home', lang: 'null' }, searchParams: {} }
// url: http://localhost:3000/home/null
...
}
...
export const getStaticProps = ({
params,
}: {
params: { topic: string; lang: string };
}) => {
return {
props: {
topic: isValidTopic(params.topic) ? params.topic : "home",
lang: isValidlang(params.lang) ? params.lang : "pt-br",
},
// { props: { topic: 'home', lang: 'pt-br' }}
// url: http://localhost:3000/home/null
};
};1
The app router doesn’t have getStaticProps. Use [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) and [the params prop](https://nextjs.org/docs/app/api-reference/file-conventions/page#params-optional) for this