Add internationalization (i18n) with next-intl and Italian translations

- Integrated `next-intl` for server-side and client-side i18n support.
- Added English (`en.json`) and Italian (`it.json`) localization files.
- Configured routing with locale-based subdirectories (`/[locale]/path`) using `next-intl`.
- Introduced type-safe i18n utilities and TypeScript definitions for translation keys.
- Updated middleware to handle locale detection and routing.
- Implemented dynamic translation loading to reduce bundle size.
- Enhanced developer experience with auto-complete and compile-time validation for i18n keys.
This commit is contained in:
Felipe Cardoso
2025-11-17 20:27:09 +01:00
parent b7c1191335
commit fe6a98c379
11 changed files with 873 additions and 13 deletions

25
frontend/src/types/i18n.d.ts vendored Normal file
View File

@@ -0,0 +1,25 @@
// src/types/i18n.d.ts
/**
* TypeScript type definitions for i18n with next-intl.
*
* This file configures TypeScript autocomplete for translation keys.
* By importing the English messages as the reference type, we get:
* - Full autocomplete for all translation keys
* - Type safety when using t() function
* - Compile-time errors for missing or incorrect keys
*
* Usage:
* ```tsx
* const t = useTranslations('auth.login');
* t('title'); // ✅ Autocomplete shows available keys
* t('invalid'); // ❌ TypeScript error
* ```
*/
type Messages = typeof import('../../messages/en.json');
declare global {
// Use type safe message keys with `next-intl`
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
interface IntlMessages extends Messages {}
}