CODEWITHSUNDEEP
javascriptnext.js
Trung Kiên
Trung Kiên

Reputation: 185

Double-language application problem with Next.js

I'm currently developing a web application using Next.js which will support 2 languages: my mother language and English. Right now I'm thinking of the following approach:

  1. Create a folder: /pages/en-us
pages/
|--(all app pages)
|--en-us/
   |--(all app pages like above)
  1. Wrap the app with a LanguageContext, and use a middleware to detect visitor's country by their IP on load, and redirects to /en-us path if they're foreign visitor or current language is set to English.
    For example, /login will be redirected to /en-us/login.

I know that there're some multi-language frameworks like i18next but my web app is quite simple and only needs 2 languages, so it won't be necessary to use them.

Is my approach good? If not, please give me some advice and recommendation.

Upvotes: 1

Views: 201

Answers (1)

redacted
redacted

Reputation: 71

I would recommend you integrating i18next. Otherwise, you have to face code duplications and you cannot adjust all changes in the language files. The middleware approach is interesting, but actually a better way me be to see the language of the user with Navigator.language. The Navigator.language read-only property returns a string representing the preferred language of the user, usually the language of the browser UI.

I hope I could help you. Good luck with your project!

Upvotes: 3

Related Questions