Issue
This Content is from Stack Overflow. Question asked by cbdeveloper
I’m creating a NextJS web-app that will be deployed in multiple countries. But it’ll be deployed separately. I’ll change only the env.country
variables on each deploy.
The issue is that I have some routes with meaningful slugs that need to be translated for the language of the country.
Ex:
de: '/route-path-in-de',
es: '/route-path-in-es',
fr: '/route-path-in-fr',
Since NextJS uses a file/folder based routing system. What is the best way for me to achieve this? Will I need to create a file per translation, like?
pages/
route-path-in-de.tsx
route-path-in-es.tsx
route-path-in-fr.tsx
Is that the only way?
Solution
This is how I solved it.
- Added a
pages/[slug].tsx
file - Use
getStaticPaths
andgetStaticProps
to render the translated slugs,
[slug].tsx
export const getStaticPaths: GetStaticPaths = async () => {
const slugs = ['route-path-in-de', 'route-path-in-es', 'route-path-in-fr'];
return {
paths: slugs.map((item) => ({ params: { slug: item } })),
fallback: 'blocking',
};
};
export const getStaticProps: GetStaticProps<PageProps, { slug: string }> = async (context) => {
const slug = context.params?.slug as string;
// Do data fetching
return {
props: {
// Data
},
};
};
type PageProps = {}
const Page: NextPage<PageProps> = (props) => {
// Get the props
// return whatever the page should return
};
export default Page;
This Question was asked in StackOverflow by cbdeveloper and Answered by cbdeveloper It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.