The customer web app has a preconfigured internationalization to support multiple languages that you need in your app. The template uses the next-intl library https://next-intl-docs.vercel.app/ . Right now the template only the highlights the usage of this library on the landing page. The only relevant files and folders for internationalization purposes are
apps/web-app/src/config.ts
apps/web-app/src/middleware.ts
apps/web-app/src/navigation.ts
apps/web-app/messages
apps/web-app/src/components/locale-switcher.tsx
How it works in a nutshell
NextJS will pull all language translations inside the messages folder as a server side component and then store all of those language translations in a global context
So that once you need that language translation, you can easily use it using this way
apps/web-app/messages/en.json
{
"Index": {},
"Hero": {
"description": "<strong>TheNextStartup</strong> is an open-source template designed with scalability in mind, providing a swift pathway to launch your startup. It ensures high engineering quality while being cost-effective, making it an ideal choice for aspiring entrepreneurs.",
"starOnGithub": "<star>Star it on</star><github>Github</github>",
"getStarted": "Get Started"
},
"BuiltWith": {
"supercharge": "Supercharge Your Business With Batteries"
},
"LocaleSwitcher": {
"label": "Change language",
"locale": "{locale, select, jp {🇯🇵 Japanese} en {🇺🇸 English} other {Unknown}}"
}
}