Internazionalizzazione (i18n) per Applicazioni Web

Internazionalizzazione (i18n) per Applicazioni Web

L'internazionalizzazione (i18n) prepara la tua app per più lingue. La localizzazione (l10n) la adatta per regioni specifiche. Pianifica presto per evitare refactor costosi.

Rilevamento Locale

URL-based: /en/, /fr/ (SEO-friendly, esplicito). Domain-based: en.example.com, fr.example.com. Header-based: Accept-Language (implicito). Preferenza utente: Memorizzata in cookie/localStorage. Priorità: URL > Pref utente > Header > Default. Redirect root a locale rilevato.

Gestione Traduzioni

File JSON: Semplici, version-controlled (en.json, fr.json). ICU MessageFormat: Plurali, select, date/time, number. Piattaforme traduzione: Crowdin, Lokalise, Transifex, Phrase, Weblate. Integrazione CI: Auto-sync, PR checks. Chiavi: Namespaced (common:button.save), descrittive.

ICU MessageFormat

Plurali: {count, plural, one {# item} other {# items}}. Select: {gender, select, male {He} female {She} other {They}}. Date/Time: {date, date, short}, {date, time, medium}. Number: {price, number, currency}. Nested: Combina per messaggi complessi. Supportato da: FormatJS, i18next, next-intl, lingui.

Supporto Right-to-Left (RTL)

Lingue: Arabo, Ebraico, Persiano, Urdu. CSS: dir=rtl su html, logical properties (margin-inline-start vs margin-left), flex/grid auto-reverse. Icone: Mirror directional icone (frecce, chevron). Immagini: Flip se direzionali. Librerie: rtlcss (post-process), tailwindcss-rtl.

Formattazione Date, Ora e Numeri

Intl.DateTimeFormat: Date/ore locale-aware. Intl.NumberFormat: Decimali, valuta, percentuale, unità. Intl.RelativeTimeFormat: '2 days ago'. Intl.ListFormat: 'A, B, and C'. Fusi orari: IANA (America/New_York), UTC. Memorizza UTC, mostra locale.

Integrazione Framework

Next.js: next-intl (App Router), next-i18next (Pages). React: i18next + react-i18next, FormatJS (react-intl), lingui. Vue: vue-i18n. Svelte: svelte-i18n. Astro: astro-i18n. Remix: remix-i18n. Condiviso: Logica core in package platform-agnostico.

SEO per Siti Multilingue

hreflang:. Sitemap: Includi tutti i locale. Canonical: Per-locale canonical. x-default: Fallback per lingue non matchate. Contenuto: Traduci, non solo redirect. Evita: Auto-redirect basato su IP (rompe crawl).

Workflow Traduzione

Estrai: CLI tools (i18next-scanner, lingui extract). Review: Contesto (screenshot, commenti). Traduci: Umano + MT (machine translation) post-edit. QA: Revisione linguistica, pseudo-localizzazione (espandi testo 30%). Deploy: Atomico, versionato. Monitora: Chiavi mancanti, non tradotte.

Considerazioni Performance

Lazy load traduzioni: Dynamic import per locale. Bundle size: Tree-shake locale inutilizzati. Caching: TTL lungo per file traduzioni. Edge: Servi da CDN. SSR: Includi locale in HTML lang attribute. Evita: Client-side only rendering per contenuto SEO-critico.