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?
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