DEV Community

Discussion on: Making a multilingual site with Next.js - Part 2

Collapse
 
sodhisaab profile image
Prince Sodhi

Is it possible to translate slugs as well? like following?

example.com/en/contact
example.com/de/kontakt

Collapse
 
elvessousa profile image
Elves Sousa

I just wrote a new article on that.
I hope you like it!

Collapse
 
elvessousa profile image
Elves Sousa

Hello, Prince! You can do it in two ways:

  • Manually: Create a page named "kontakt" in the pages folder and add a link for it in the navigation (add a string for translating the term "contact" to "kontakt"). I know it is not fancy, but hey, if your site is not that big, it will do the trick.
  • Programmatically: If your site is getting big, or with a lot of languages, the best way is creating these pages dynamically, in the same fashion posts were made. Create your pages content in Markdown in the target languages and add a new dynamic route for the pages, for them to act as a template. Using the repository used in this article as an example, to achieve your target slugs above, the dynamic route should be like: /pages/[lang]/[page].tsx.

I'll create a third part of this article, showing this stuff. But the logic is the one I explained if you wish to try by yourself.

Take care!