Come creare un blog multilingua in Next.js

Vediamo quindi come progettare un sito internazionale che supporti molte lingue in Next.js con JavaScript. Segui questo tutorial e impara come creare un blog multilingua in Next.js partendo da zero, ma prima cerchiamo di capire cosa significa internazionalizzazione.

Secondo il W3C, con internazionalizzazione si intende il processo di progettazione di contenuti, applicazioni e servizi che funzionino bene o possano essere facilmente adattati a utenti di qualsiasi cultura, regione o lingua. In altre parole, l'internazionalizzazione è lo sviluppo di prodotti o servizi che si adattano o possono essere adattati con poco sforzo a popolazioni diverse. 

Nello specifico, l'internazionalizzazione è uno degli elementi alla base della globalizzazione. Ecco perchè i siti web più popolari supportano diverse lingue. Allo stesso tempo, rendere un sito adatto a utenti da tutto il mondo non è facile. Tradurre tutti i testi non è sufficiente! Al contrario, è necessario verificare che la UI (Interfaccia utente) e il layout del sito si possano adattare alle lunghezze diverse del testo e agli aspetti caratteristici di ogni cultura, come colori e formattazione del testo.

Un altro concetto chiave legato all’internazionalizzazione è quello di locale. In dettaglio, con locale si fa riferimento al gruppo di parametri che definiscono il layout e le traduzioni associate alla lingua scelta dall'utente per la visualizzazione dell'interfaccia. I locali sono solitamente identificati secondo lo standard UTS Locale Identifier, che prevede sia un codice per la lingua sia uno per il Paese/regione. Ad esempio, l'italiano parlato in Italia è identificato con "it-IT", l'inglese degli Stati Uniti con "en-US" e l'inglese del Regno Unito con "en-EN".

L'internazionalizzazione viene solitamente abbreviata con la sigla “i18n”. Il motivo è dovuto al fatto che ci sono 18 lettere tra la "i" e la "n" della parola inglese “internationalization”. Pertanto, le parole "internazionalizzazione" e "i18n" si possono utilizzare in modo intercambiabile.

Cerchiamo ora di capire se è possibile costruire un sito multilingua Next.js.

Come indicato nella documentazione ufficiale, Next.js supporta nativamente lo sviluppo di applicazioni internazionalizzate fin dalla versione 10.0. Quindi, non sono necessarie librerie esterne per implementare l'internazionalizzazione in Next.js. 

Nello specifico, Next.js accetta un elenco di locali nel file di configurazione "next.config.js". Uno di questi dovrà essere marcato come quello predefinito, che di default è l’inglese americano. Ulteriori altri locali sono opzionali e vengono utilizzati automaticamente da Next.js durante il processo di routing. 

Vediamo quindi come sfruttare questa feature per creare un sito multilingua in Next.js.

In questa guida passo passo, imparerai come utilizzare il modulo i18n di Next.js per creare un blog che supporta italiano, inglese e spagnolo. Iniziamo!

C’è un solo prerequisito da soddisfare per seguire questo articolo: Node.js con npm aggiornato all’ultima versione LTS. 

Il tutorial che segue coprirà tutti i passi per creare un blog multilingua da zero. Se però volessi dare subito un occhio al risultato finale o tenere il codice sottomano clona la repo GitHub che supporta l’articolo e lancia il blog multilingua con:

Vediamo ora tutti i passi richiesti per creare un blog multilingua in Next.js!

Inizializza un nuovo progetto Next.js chiamato `blog-multilingua-next.js` lanciando il seguente comando nel terminale:

Questo utilizza Create Next App, lo strumento ufficiale per creare applicazioni Next.js da zero.

Aspetta che il processo di inizializzaione finisca. La cartella `blog-multilingua-nextjs` conterrà ora i seguenti file:

Così è come si presenta la più semplice applicazione Next.js possibile. Per lanciarla, entra nella cartella "blog-multilingua-nextjs" nel terminale e fai partire un server locale con i due comandi che seguono:

Visita "http://localhost:3000/" nel tuo browser e dovresti vedere la schermata di default di un’applicazione generata con Create Next App qui in basso:

Come accennato sopra, per prima cosa devi specificare nel file "next.config.js" i locali supportati dal tuo blog. 

Nell’oggetto "i18n" vengono definite le configurazioni di internazionalizzazione usate da Next.js. In particolare, la proprietà "locales" definisce i locali supportati, mentre la "defaultLocale" contiene il locale predefinito da utilizzare quando vengono visitati URL non localizzati. 

Il comportamento adottato da Next.js con internazionalizzazione attiva in fase di routing delle pagine è chiamato sub-path routing. Questo approccio prevede l'aggiunta del codice locale negli URL delle pagine. Capiamo meglio come funziona questo meccanismo con un esempio. 

Supponiamo di avere un file chiamato "pages/blog.js", corrispondente alla pagina HTML "blog" secondo le logiche di routing di Next.js. Per questo file, saranno disponibili i seguenti URL:

• "/blog": pagina in italiano.
• "/es-ES/blog": pagina in spagnolo.
• "/en-US/blog": pagina in inglese.

Come puoi vedere, il primo percorso corrisponde al locale predefinito e non contiene alcun prefisso. Gli altri due portano invece alla versione localizzata della stessa pagina. Questo è come funziona ciò che Next.js definisce come Internationalized Routing.

Vediamo ora come definire la Home page del blog multilingua. Aggiorna "pages/index.js" come segue:

Come puoi notare, le informazioni riguardo a Next.js i18n vengono recuperate direttamente attraverso l’hook "useRouter()". Questo dà accesso a:

• "locale": il locale attualmente attivo.
• "locales": l'array di locali supportati.
• "defaultLocale": il locale predefinito.
• "asPath": la stringa contenente il percorso completo relativo alla pagina corrente. 

Nel componente "Home", i locali configurati sono utilizzati per creare un menu per la selezione della desiderata e per la navigazione tra le tre versioni localizzate della home page. Successivamente, "locale" è usato per mostrare gli articoli blog che si riferiscono alla lingua selezionata. Questi vengono recuperati dal file "posts.json" che segue: 

Infine, gli articoli selezionati sono passati al componente custom `BlogCard`. Questo si fa carico di visualizzare una anteprima del post e può essere implementato così:

Ben fatto! Hai appena imparato come gestire la logica di gestione del multilingua in Next.js. Grazie alle sue feature native avanzate, questo richiede solo una manciata di righe di codice.

Come hai appena appreso, implementare un sito web internazionale in più lingue con Next.js non è complesso. Al contrario, le vere difficoltà si nascondono nella gestione dei contenuti multilingua. Creare dei contenuti localizzati e riuscire a distribuilrli a uno o più siti in modo efficace rappresenta la sfida più grande quando si parla di i18n.

Aggiungere una nuova lingua o tradurre un contenuto, dovrebbe poter essere fatto direttamente e in modo facile dal team editoriale, senza la necessità di passare dal team di sviluppo. Questo è particolarmente vero se si considera che il team di internazionalizzazione è solitamente composto da creatori di contenuti, non da ingegneri informatici. Non puoi chiedere ai tuoi editori di scrivere del codice per aggiungere un contenuto localizzato. Allo stesso modo, salvare i contenuti in un file `.json` non è una soluzione. Quell’approccio va bene per un esempio semplice come quello visto qui, ma non per un sito vero.

Proprio per questo motivo, Cantiere Creativo si affida a DatoCMS, un headless CMS veloce, completo ed avanzato che offre una soluzione efficace al problema del multilingua e a molti altri. Nello specifico, DatoCMS è stato concepito fin dal giorno uno con l’internazionalizzazione in mente ed è stato progettato per rendere la creazione di contenuti multilingua il più semplice possibile.

Come spiegato nella documentazione, DatoCMS permette di aggiungere nuove lingue, gestire le lingue esistenti, assegnare lingue a editori diversi e tradure contenuti in modo visuale direttamente dalla piattaforma web di gestione dei contenuti. Contenuti che possono poi essere recuperati dalla tua applicazione Next.js tramite API. Questo è il potere dell’headless!

In altre parole, DatoCMS offre tutto ciò che serve per gestire in modo facile uno o più siti multilingua. Ecco perchè Cantiere Creativo sceglie DatoCMS!

In questo articolo, hai imparato come costruire da un blog multilingua da zero in Next.js. L'internazionalizzazione è un concetto che dovrebbe essere familiare a chiunque, specialmente considerando che viviamo in un mondo in cui regna la globalizzazione. Fortunatamente, come visto qui, implementare un sito multilingua con tecnologie avanzate come Next.js è facile. La vera sfida sta nel generare, gestire e distribuire contenuti in più lingue. Ciò che esattamente permette di raggiungere DatoCMS, il sistema di gestione dei contenuti scelto da Cantiere Creativo.

Grazie per aver seguito il tutorial! Speriamo che questo articolo ti sia stato utile. Se oltre all’internazionalizzazione sei interessato al SEO in Next.js, abbiamo la risorsa giusta per te. Sentiti libero di contattarci qui per qualsiasi domanda, commento o suggerimento.