Translation Catalogs Management
Relevant source files
The following files were used as context for generating this wiki page:
Translation Catalogs Management in this project facilitates a multi-language user interface, specifically supporting English (en) and Persian (fa). The system leverages next-intl to provide a localized experience, including Right-to-Left (RTL) support for the Persian locale.
The architecture relies on static JSON files acting as message catalogs, which are consumed by React components through hooks like useTranslations. This allows the application to dynamically swap text content, labels, and even UI directionality based on the active locale.
Catalog Architecture and Structure
The translation system is built around two primary JSON catalogs located in the messages/ directory. These files share an identical hierarchical structure to ensure consistency across languages.
Message Schema
| Key | Description | Example (en) |
|---|---|---|
apps | Labels for application icons and titles | "about": "About Me" |
window | Standard window control labels | "close": "Close" |
menu | System menu and language switcher labels | "language": "Language" |
widgets | Content for desktop widgets (weather, etc.) | "weatherCity": "Cupertino" |
about | Bio and professional details | "role": "Software Engineer" |
projects | Descriptions and titles for portfolio projects | "intro": "A few things I've built." |
contact | Form labels and status messages | "send": "Send" |
Sources: messages/en.json:1-60, messages/fa.json:1-60
Implementation and Data Flow
The project integrates translation through a provider-consumer model. The RootLayout initializes the NextIntlClientProvider, while individual features consume specific namespaces from the catalogs.
Translation Flow
The following diagram illustrates how a user interaction triggers a locale change and updates the UI.
Component Consumption
Components use the useTranslations hook to access specific nested objects within the translation catalogs.
- About Feature: Accesses the
aboutnamespace to render bio and roles. - Projects Feature: Uses dynamic keys (e.g.,
t("${p.id}.title")) to map content IDs to localized titles and descriptions. - Weather Widget: Localizes city names and weather conditions, while also utilizing
Intl.NumberFormatfor localized digits.
Layout and Directionality Logic
A critical aspect of Translation Catalogs Management in this project is the handling of text direction. When the locale is set to fa (Persian), the application automatically switches to an RTL (Right-to-Left) layout.
// app/layout.tsx
const locale = await getLocale();
const dir = locale === "fa" ? "rtl" : "ltr";
return (
<html lang={locale} dir={dir}>
{/* ... */}
</html>
);
Sources: app/layout.tsx:25-29
Localized Formatting
Beyond simple text strings, the system manages localized formatting for dates and numbers using standard browser APIs in conjunction with the active locale.
- Number Formatting: Used in
Widgets.tsxto display temperatures and calendar days using the locale-specific digit set (e.g., Eastern Arabic numerals forfa). - Date Formatting: The
CalendarWidgetusesIntl.DateTimeFormatwith the currentlocaleto generate month labels and narrow weekday headers (e.g., "M", "T", "W" vs localized equivalents).
Sources: features/desktop/components/Widgets.tsx:17-30, features/desktop/components/Widgets.tsx:85
Summary
Translation Catalogs Management provides the infrastructure for a bilingual, bi-directional portfolio. By centralizing text in en.json and fa.json and distributing it via next-intl, the project maintains a clean separation between content and logic while supporting complex requirements like RTL layouts and localized number formatting.