Translating a Next Js Website (App Router i18n)
I migrated my website to the `app` directory router. However, it’s a multilingual website with content both in French and English, and the translation library I was using, i18next, doesn’t work server-side. So this is the story of how I rolled my own translation system and what I had to set up to make it work.
And even if you don’t need to translate your NextJS website, you might need to use a middleware or a lookup for something else. If you don’t, this video on the new SEO features in Next JS might be interesting to you.
For those of you who are still here, there are three parts to this :
- first how I structured my app directory to handle locales
- second, how I coded the lookup function to translate strings within pages
- third, how I set up the middleware to switch users from one version to the other depending on their browser language.
Let’s dive right in.
You can find the latest code here : https://github.com/Kodaps/gradient-as...
----
Want to go into further depth? Head to https://kodaps.dev/