Internazionalizzare un Sito React o Next.js (next-intl) | We.Inc
Traduci correttamente un sito React o Next.js: file di messaggi, routing per lingua con next-intl, formattazione Intl per date, prezzi e plurali, layout da destra a sinistra e tag hreflang.
Tieni ogni stringa in un file di messaggi JSON per lingua, dai a ogni lingua il proprio URL come /de/about e formatta date, prezzi e plurali con le API Intl integrate nel browser. Nel Next.js App Router, next-intl collega tutto: un segmento di route [locale], un proxy che sceglie la lingua e useTranslations nei componenti.
Le parti di un sito tradotto
Parte
Cosa usare
Stringhe
messages/en.json, messages/de.json e così via
URL
Un prefisso di percorso per lingua: /en/..., /de/...
Rilevamento della lingua
createMiddleware di next-intl in proxy.ts (middleware.ts prima di Next.js 16)
Date, numeri, valute
Intl.DateTimeFormat e Intl.NumberFormat
Plurali
Sintassi dei messaggi ICU o Intl.PluralRules
Motori di ricerca
Link hreflang per ogni versione linguistica, più x-default
Tradurre non significa solo sostituire le parole. L'ordine delle parole cambia, le regole del plurale sono diverse, l'arabo si legge da destra a sinistra e ogni paese scrive le date a modo suo. Prova il selettore qui sotto per vedere una piccola scheda prodotto cambiare lingua, poi costruisci la stessa cosa nella tua app con i file di configurazione e il generatore di hreflang.
Scegli una lingua nella demo. La scheda cambia i messaggi, formatta prezzo e data per quella lingua e inverte la direzione per l'arabo.
Cambia il numero di articoli per vedere ogni lingua scegliere la propria forma plurale.
Copia i file di configurazione di next-intl in un progetto Next.js App Router.
Inserisci il tuo dominio e le tue lingue nel generatore di hreflang e incolla i tag, o l'oggetto metadata, nel tuo layout.
Non costruire mai frasi unendo frammenti. Traduci frasi intere con segnaposto come {count}, perché l'ordine delle parole varia.
Lascia spazio nel layout, perché un'etichetta tradotta è spesso molto più lunga di quella inglese.
Imposta lang sull'elemento html per ogni lingua e dir="rtl" per quelle da destra a sinistra.
Evita le bandiere nei selettori di lingua. Le bandiere rappresentano paesi, e molte lingue sono parlate in più paesi.
Lascia che le persone cambino lingua manualmente e ricorda la loro scelta invece di affidarti solo alle impostazioni del browser.
Domande frequenti
Quale libreria i18n dovrei usare con React?
Per il Next.js App Router, next-intl è pensata apposta e supporta i Server Component. Per un'app React semplice senza Next.js, scegli una libreria che salva i messaggi in JSON, così passare a un'altra in futuro resta gestibile.
Le lingue devono stare in sottocartelle, sottodomini o domini separati?
Le sottocartelle come example.com/de/ sono le più semplici da gestire, perché un solo sito e un solo dominio contengono tutto. next-intl supporta anche il routing per dominio se ti servono de.example.com o un dominio nazionale.
Come aggiungo hreflang in Next.js?
Restituisci alternates.languages da metadata o generateMetadata, con una voce per ogni URL di lingua. Next.js stampa un tag link rel="alternate" hreflang per ciascuna. Ogni versione linguistica deve elencare tutte le altre e se stessa, altrimenti i motori di ricerca possono ignorare l'insieme.
Posso tradurre il mio sito con la traduzione automatica?
Puoi usare la traduzione automatica come prima bozza, ma falla rivedere a un madrelingua, soprattutto titoli, prezzi e testi legali. Traduzioni scarne o non riviste possono confondere i lettori e indebolire la fiducia.
Messaggi, non stringhe nei componenti
Ogni testo che una persona vede dovrebbe venire da un file di messaggi con chiavi basate sul significato, come Cart.checkoutButton. Gli sviluppatori modificano l'inglese, i traduttori modificano gli altri file e nessuno deve cercare testi scritti a mano nei componenti.
Suddividere per componente mantiene i file leggibili. useTranslations('Cart') di next-intl ti dà poi t('checkoutButton') solo dentro quel componente.
Lascia la formattazione a Intl
Intl.NumberFormat scrive 1234.5 euro come 1.234,50 € per un lettore tedesco, con simbolo e separatori posizionati come si aspetta quella lingua. Intl.DateTimeFormat fa lo stesso per le date, e Intl.PluralRules ti dice se un numero prende la forma one, few, many o other in una data lingua.
Queste API sono presenti in ogni browser moderno e in Node, quindi la formattazione non appesantisce il bundle e resta corretta anche per lingue che non hai mai studiato.
Lingue da destra a sinistra
Arabo, ebraico, persiano e urdu si leggono da destra a sinistra. Impostare dir="rtl" sull'elemento html rispecchia l'allineamento del testo e l'ordine dei contenuti inline, ma i valori fissi left e right nel CSS restano dove sono.
Usa proprietà logiche come margin-inline-start e padding-inline-end, oppure le utility ms- e pe- di Tailwind, così la spaziatura si inverte automaticamente con la direzione.
Configurazione di next-intl per l'App Router
Installa con npm install next-intl. Questi file seguono la struttura della guida introduttiva di next-intl per il routing basato sulla lingua.
Un file per lingua, con le stesse chiavi in ciascuno. La sintassi ICU gestisce i plurali dentro il messaggio.
src/i18n/routing.ts e src/proxy.ts
Il routing elenca le tue lingue una sola volta. Il proxy (chiamato middleware.ts prima di Next.js 16) reindirizza i visitatori a un prefisso di lingua.
src/i18n/request.ts
Legge la lingua dal segmento [locale], rifiuta quelle sconosciute e carica i messaggi di quella lingua.
next.config.ts, layout e una pagina
Il plugin collega request.ts. Sposta le pagine sotto app/[locale]/ e leggi i messaggi con useTranslations. next/root-params è attivo di default da Next.js 16.3; le versioni precedenti richiedono experimental.rootParams.
Formattare senza una libreria
Intl in JavaScript puro
Funziona in qualsiasi app React, tradotta o no.
Regole hreflang che i motori di ricerca controllano
Annotazioni di lingua corrette
Regola
Esempio
Usa URL assoluti completi
Ogni versione elenca se stessa e tutte le altre
La pagina tedesca rimanda a en, de, ar e x-default
La lingua è ISO 639-1, la regione opzionale ISO 3166-1 alpha-2
de, en-GB, pt-BR
Mai una regione da sola
be è il bielorusso, non il Belgio; usa nl-BE o fr-BE
x-default per tutti gli altri
Punta a un selettore di lingua o alla tua versione principale
Provalo: una scheda in cinque lingue
Cambia lingua e numero di articoli. Le stringhe arrivano da un oggetto di messaggi, mentre prezzo, data e forma plurale arrivano dalle API Intl del browser.
Lingua
Articoli nel carrello: {n}
Categoria plurale scelta:
Direzione:
La demo non converte valute; formatta solo lo stesso numero.
Generatore di hreflang
Inserisci il tuo dominio, il percorso di una pagina e i codici delle lingue per ottenere i tag link per l'head, oppure l'oggetto alternates di Next.js.
Dominio
Percorso della pagina
Codici lingua (separati da virgole)
Lingua x-default
Codici non validi ignorati: {codes}. Usa un formato come de o en-GB.