For the past few weeks, I have been working on adding a translation feature to my Next.js App. I don’t see too many tutorials to start with and come across a lot of problems during the process. Therefore, I decided to write down this article for my own reference and hopefully, it can help you too!

If I write everything in one article, it is going to be TOO LONG! So I planned to separate it into a few articles. Here are my plan(I will add a link to it once I finish):

  1. Set up the translation feature with next-i18next package_ (this article)_
  2. Add a path for each language with the localSubpaths(coming soon)
  3. Add Button to change the language (coming soon)
  4. Handle some possible problems when you deploy the Next.js App with localSubpaths for each language (coming soon)

Resources:

  1. next-i18next
  2. My example repo

#translation #react #i18n #javascript #nextjs

How to Add a Translation feature to your Next.js App
4.65 GEEK