How to add translated routes (translating the route paths) in a NextJS app?

cbdeveloper 0
Viewed 10

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?

next.js reactjs
1 Answers

This is how I solved it.

  • Added a pages/[slug].tsx file
  • Use getStaticPaths and getStaticProps 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;
cbdeveloper0
Related