-
Book Overview & Buying
-
Table Of Contents
React Application Architecture for Production - Second Edition
By :
In this chapter, we built a complete internationalization system for our application. We started by understanding why separating text from code makes translations manageable.
We organized translations using namespaces to keep files small and focused. App-level namespaces like common contain shared translations, while feature-scoped translations live alongside their feature code. This organization makes translations easy to find and maintain.
We set up react-i18next with both server and client initialization. The server renders pages with correct translations, and the client hydrates smoothly. We created an API endpoint for serving translations on demand, enabling partial bundling, which keeps the initial JavaScript bundle small.
Type safety catches translation errors early. By telling TypeScript about our translation structure, we get autocomplete and compile-time checking for translation keys. We also configure language and direction attributes so browsers, screen readers, and...