Internationalization in your Next.js app

Using the app router system and implementing a local switcher with a sub-path strategy

Photo by Nick Fewings on Unsplash

Notes: no third-party libraries like next-translate or react-i18next will be used, as I encountered issues and glitches with them after Next.js 13.

Recently, I built a website from scratch using React.js, Spring Boot, PostgreSQL and other technologies. For React.js, I used i18n-next for easy internalization without any hassle.

However, when SEO became a consideration, I decided to reimplement the entire site in Next.jsusing this starter with a content layer.

It was enjoyable until I needed to make the site bilingual. This task consumed a lot of my time. I initially used the next-translate library because it seemed promising, and it worked for simple scenarios. But when I tried to implement the locale switcher, the “server-side-client-side-middleware-app-routing” system malfunctioned, and nothing worked.

I was at a loss and tried numerous tutorials, starting over multiple times. I also attempted other third-party libraries, but none were successful. Feeling hopeless, I turned to GitHub issues and Q&As. Then, fortunately, I decided to…