7. Internationalization

Overview

Our pages support multiple languages, allowing users to interact with the interface in their preferred language. This functionality is achieved through internationalization (i18n). In our project, we have two primary hooks for managing localization: useServerTranslation and useClientTranslation. Below, we'll outline the key aspects of their usage and the configuration of localization files.

Hooks for Internationalization

useServerTranslation

useServerTranslation is the primary hook for handling translations on the server side. We recommend using this hook at the top level of the application, particularly within the app directory. By leveraging this hook at the highest level, you ensure that all subsequent components have access to the necessary translations without the need for redundant translation logic.

useClientTranslation

useClientTranslation is designed for client-side translations. This hook is useful when we need to handle translations dynamically on the client, such as when updating the UI based on user interactions or fetching additional translation data after the initial server render. However, for most static content, useServerTranslation should be preferred to reduce the complexity of managing translations on the client side.

Localization Files

All localization files are stored in the shared/i18n/locales directory. These files contain the translation strings for each supported language. The structure of this directory typically includes subfolders for each language, with JSON files inside representing various namespaces or sections of the application.

Best Practices

1. Use useServerTranslation at the Top Level: To ensure that your application is efficiently handling translations, implement useServerTranslation at the top level within the app directory. This approach centralizes the translation logic and minimizes redundancy.

2. Pass Text as Props to Components: All components that display text should receive their text content as props. This practice ensures that components remain flexible and reusable, and that they do not directly depend on the i18n logic. By passing translated text as props, you also make it easier to manage and test the components in isolation.

By following these guidelines, we can ensure that our site remains scalable, maintainable, and accessible to users across different languages.