CODEWITHSUNDEEP
javascriptnode.jsnext.jsgoogle-translate
Evan Jenkins
Evan Jenkins

Reputation: 11

How to let user switch displayed text language on page Node js Next js?

My client has a requirement for dual language on a web app. Users need to be able to toggle between French and English.

I added a button that toggles a state and sets a cookie so that I can remember their selection for next time.

What is the most efficient straight forward way to write the code to handle the user language preference, and display the correct language text on a page?

My current approach is to use an if Statement like this, to first check the State and render the text accordingly.

const [useLang, setLang] = useState('En')

(useLang == 'En') ? <p>English Text Here</p> : <p>French Text Here</p>

Would it be more efficient to try to get the English | French from a single source file, and if yes what should that look like, how should it be set up?

Upvotes: 0

Views: 1240

Answers (1)

Aflah vp
Aflah vp

Reputation: 383

Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.

You can also disable the routing based translation and adjust it to state specific translation.

Complete documentation can be found here

Upvotes: 1

Related Questions