{"id":20850,"date":"2023-05-12T09:34:05","date_gmt":"2023-05-12T07:34:05","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=20850"},"modified":"2023-11-10T12:57:19","modified_gmt":"2023-11-10T11:57:19","slug":"sito-multilingua-in-next-js","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/","title":{"rendered":"Come creare un sito multilingua in Next.js con next-i18next"},"content":{"rendered":"\n<p>Next.js supporta il routing multilingua di default. <strong>Allo stesso tempo, non offre un sistema per gestire la traduzione dei contenuti<\/strong>. Tutto ci\u00f2 che fa \u00e8 leggere il \u201clocale\u201d contenuto nell\u2019URL di una pagina e mostrare all\u2019utente la lingua corretta di conseguenza. Per creare un sito internazionale in Next.js \u00e8 necessario gestire manualmente le traduzioni, operazione macchinosa e banale. Per fortuna esiste&nbsp;<code>next-i18next<\/code>, una libreria Next.js per il 18n che rende il processo di localizzazione pi\u00f9 agevole e intuitivo.<\/p>\n\n\n\n<p>Alla fine di questo tutorial, saprete come utilizzare l\u2019i18n in <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/\" target=\"_blank\" aria-label=\"Next.js (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Next.js<\/a>. Non perdiamo altro tempo e iniziamo!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cosa-\u00e8-next-i18next\">Cosa \u00e8 next-i18next?<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/i18next\/next-i18next\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>next-i18next<\/code><\/a>&nbsp;\u00e8 un framework per la localizzazione dei contenuti in applicazioni Next.js. Nel dettaglio, offre un modo semplice per gestire l\u2019internazionalizzazione e la localizzazione. Per utilizzarlo, tutto ci\u00f2 che devi fare \u00e8 configurarlo e iniziare ad aggiungere le tue traduzioni in specifici file JSON. La libreria si occuper\u00e0 di tutto il resto.<\/p>\n\n\n\n<p>Il framework \u00e8 basato su&nbsp;<a href=\"https:\/\/www.i18next.com\/\" class=\"ek-link\"><code>i18next<\/code><\/a>&nbsp;e&nbsp;<a href=\"https:\/\/github.com\/i18next\/react-i18next\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>react-i18next<\/code><\/a>, due tra le pi\u00f9 popolare librerie di i18n per JavaScript e React, rispettivamente. In particolare,&nbsp;<code>next-i18next<\/code>&nbsp;aggiunge il supporto per il rendering lato server (SSR), la generazione di siti statici (SSG) e la rigenerazione statica incrementale (ISR). Nel caso in cui stessi utilizzando Next.js 13 con la directory&nbsp;<a href=\"https:\/\/beta.nextjs.org\/docs\/routing\/fundamentals\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>app<\/code><\/a>, non \u00e8 necessario&nbsp;<code>next-i18next<\/code>. In questo scenario, \u00e8 possibile utilizzare direttamente&nbsp;<code>i18next<\/code>&nbsp;e&nbsp;<code>react-i18next<\/code>, come spiegato nella&nbsp;<a href=\"https:\/\/locize.com\/blog\/next-13-app-dir-i18n\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">guida citata nella documentazione<\/a>.<\/p>\n\n\n\n<p>Con&nbsp;<code>next-i18next<\/code>, puoi costruire un sito Next.js che supporta pi\u00f9 lingue senza alcuno sforzo. Provalo nella&nbsp;<a href=\"https:\/\/next.i18next.com\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">demo sul sito ufficiale<\/a>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"perch\u00e9-next-i18next-\u00e8-meglio-di-altre-librerie-i18n\">Perch\u00e9 next-i18next \u00e8 meglio di altre librerie i18n?<\/h2>\n\n\n\n<p>Sono disponibili diverse librerie per l\u2019i18n in Next.js. Ad esempio,&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/react-intl\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>react-intl<\/code><\/a>&nbsp;\u00e8 una delle pi\u00f9 popolari, con milioni di download settimanali. Tuttavia, nessuna di esse \u00e8 facile da usare, richiede poca configurazione e offre tante funzionalit\u00e0 quanto&nbsp;<code>next-i18next<\/code>. Questo \u00e8 ci\u00f2 che la rende la migliore libreria i18n per Next.js.<\/p>\n\n\n\n<p>Integrare&nbsp;<code>next-i18next<\/code>&nbsp;in un\u2019applicazione Next.js richiede pochissimi passaggi. Configurarlo \u00e8 ancora pi\u00f9 semplice. Fatto ci\u00f2, puoi iniziare a passare le traduzioni ai componenti di pagina attraverso le props tramite&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getserversideprops-server-side-rendering\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>getServerSideProps()<\/code><\/a>&nbsp;o&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/basic-features\/data-fetching#getstaticprops-static-generation\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>getStaticProps()<\/code><\/a>. Questo ti permette di complementare le funzionalit\u00e0 di routing multilingua offerte da Next.js, fornendoti tutto il necessario per gestire contenuti localizzati.<\/p>\n\n\n\n<p>Ecco alcune feature chiave supportate da&nbsp;<code>next-i18next<\/code>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Supporto per il SSR e il SSG<\/li>\n\n\n\n<li>Componenti e hook per tradurre i vostri componenti React<\/li>\n\n\n\n<li>Traduzioni salvate in file JSON e non nei componenti<\/li>\n\n\n\n<li>Sistema di cambio della lingua corrente personalizzabile<\/li>\n\n\n\n<li>Supporto per i placeholder, i plurali e i namespace di&nbsp;<code>i18next<\/code><\/li>\n\n\n\n<li>Rilevamento automatico del locale in base alla lingua del browser dell\u2019utente<\/li>\n<\/ul>\n\n\n\n<p>Nel complesso,&nbsp;<code>next-i18next<\/code>&nbsp;\u00e8 un framework per l\u2019i18n potente e flessibile. \u00c8 tempo di imparare a usarlo nella costruzione di un sito Next.js multilingua!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Lettura consigliata: <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\" class=\"ek-link\">Come ottimizzare Next.js per andare in produzione<\/a><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-configurare-next-i18next\">Come configurare next-i18next<\/h2>\n\n\n\n<p>Segui i ogni passo e impara a integrare&nbsp;<code>next-i18next<\/code>&nbsp;in una applicazione Next.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prerequisiti\">Prerequisiti<\/h3>\n\n\n\n<p>Per poter seguire questo tutorial, occorre innanzitutto un\u2019applicazione Next.js da localizzare. Se preferisci partire da zero, pu\u00f2 inizializzare un progetto Next.js con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Rispondi a tutte le domande, attendi che l\u2019installazione delle dipendenze termini ed esegui il comando seguente per lanciare il server di sviluppo:<\/p>\n\n\n\n<p><code>npm run dev<\/code><\/p>\n\n\n\n<p>Se il processo di inizializzazione \u00e8 terminato come previsto, dovresti vedere la pagina predefinita&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/create-next-app\">Create Next App<\/a>&nbsp;qui sotto:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_191A662EDA462332388B4BD2B7D72CAA60238F6E34C4854D37969598EE3708A1_1679600583465_image.png\" alt=\"La pagina principale creata da Create Next App\"\/><\/figure>\n\n\n\n<p>Fantastico! Ora hai un progetto pronto per essere trasformato in un sito multilingua in Next.js!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installa-next-i18next\">Installa next-i18next<\/h3>\n\n\n\n<p>Aggiungi&nbsp;<code>next-i18next<\/code>&nbsp;alle dipendenze del progetto con:<\/p>\n\n\n\n<p>npm install next-i18next react-i18next i18next<\/p>\n\n\n\n<p>Nota che il comando di installazione coinvolge anche&nbsp;<code>react-i18next<\/code>&nbsp;e&nbsp;<code>i18next<\/code>. Ci\u00f2 \u00e8 necessario perch\u00e9 queste due librerie sono dipendenze peer di&nbsp;<code>next-i18next<\/code>. In altre parole,&nbsp;<code>next-i18next<\/code>&nbsp;non funzionerebbe senza di esse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configura-la-tua-app-next.js\">Configura la tua app Next.js<\/h3>\n\n\n\n<p>Crea un file&nbsp;<code>next-i18next.config.js<\/code>&nbsp;nella cartella root del tuo progetto. Questo altro non \u00e8 che il file di configurazione richiesto da&nbsp;<code>next-i18next<\/code>. Inizializzalo come segue:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ next-i18next.config.js<\/span>\n\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n    <span class=\"hljs-attr\">i18n<\/span>: {\n    <span class=\"hljs-comment\">\/\/ i locali supportati dall'applicazione<\/span>\n    <span class=\"hljs-attr\">locales<\/span>: &#91;<span class=\"hljs-string\">'en'<\/span>, <span class=\"hljs-string\">'it'<\/span>, <span class=\"hljs-string\">'es'<\/span>],\n    <span class=\"hljs-comment\">\/\/ il locale predefinito da usare quando si visita<\/span>\n    <span class=\"hljs-comment\">\/\/ un percorso non localizzato (per esempio `\/about`)<\/span>\n    <span class=\"hljs-attr\">defaultLocale<\/span>: <span class=\"hljs-string\">'en'<\/span>\n    },\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Il file deve obbligatoriamente esportare un oggetto&nbsp;<code>i18n<\/code>, la cui struttura \u00e8 definita nella&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/internationalization\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">documentazione di Next.js<\/a>. Nello specifico, deve includere un array&nbsp;<code>locales<\/code>&nbsp;con le lingue supportate dal sito e una variabile&nbsp;<code>defaultLocale<\/code>&nbsp;contenente uno dei locali inclusi nell\u2019array. Nota che i locali devono essere specificati utilizzando i loro&nbsp;<a href=\"https:\/\/www.unicode.org\/reports\/tr35\/tr35-59\/tr35.html#Identifiers\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">identificatori UTS<\/a>.<\/p>\n\n\n\n<p>Per abilitare la funzione di routing multilingua di Next.js passa l\u2019oggetto&nbsp;<code>i18n<\/code>&nbsp;al file<br><code>next.config.js<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ next.config.js<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> { i18n } = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'.\/next-i18next.config'<\/span>)\n\n<span class=\"hljs-keyword\">const<\/span> nextConfig = {\n    i18n,\n    <span class=\"hljs-attr\">reactStrictMode<\/span>: <span class=\"hljs-literal\">true<\/span>,\n}\n\n<span class=\"hljs-built_in\">module<\/span>.exports = nextConfig<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Infine, aggiorna il file&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/custom-app\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>src\/pages\/_app.js<\/code><\/a>&nbsp;come segue:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/pages\/_app.js<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { appWithTranslation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-i18next'<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> App = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ Component, pageProps }<\/span>) =&gt;<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Component<\/span> {<span class=\"hljs-attr\">...pageProps<\/span>} \/&gt;<\/span><\/span>\n)\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> appWithTranslation(App)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Come puoi vedere, \u00e8 necessario wrappare il componente main&nbsp;<code>App<\/code>&nbsp;con&nbsp;<a href=\"https:\/\/github.com\/i18next\/next-i18next#appwithtranslation\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>appWithTranslation()<\/code><\/a>. Questa funzione \u00e8 in realt\u00e0 un componente HOC (High-Order Component) di React. In dettaglio, si occupa di abilitare a livello globale le funzionalit\u00e0 i18n esposte da&nbsp;<code>next-i18next<\/code>&nbsp;nella tua app Next.js.<\/p>\n\n\n\n<p>Ottimo! Il tuo sito multilingua Next.js \u00e8 ora pronto ad accettare contenuti localizzati.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"struttura-il-tuo-progetto\">Struttura il tuo progetto<\/h3>\n\n\n\n<p><code>next-i18next<\/code>&nbsp;si aspetta che i file JSON con le traduzioni siano organizzati nella cartella&nbsp;<code>public<\/code>&nbsp;in questo modo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">public<\/span>\n    \u2514\u2500\u2500 locales\n    \u251c\u2500\u2500 en\n    | \t\u2514\u2500\u2500 common.json\n    \u251c\u2500\u2500 es\n    | \t\u2514\u2500\u2500 common.json\n    \u2514\u2500\u2500 it\n        \u2514\u2500\u2500 common.json<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Puoi customizzare questo comportamento predefinito impostando i valori&nbsp;<code>localePath<\/code>&nbsp;e&nbsp;<code>localeStructure<\/code>&nbsp;nel file&nbsp;<code>next-i18next.config.js<\/code>.<\/p>\n\n\n\n<p>Cos\u00ec \u00e8 come si presenta ora il tuo progetto Next.js:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_BC40C0853C0EC0693F1303AB7D959D84618893E1F6E0A665758D66711F0BDB27_1683104144947_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>La cartella&nbsp;<code>locales<\/code>&nbsp;in&nbsp;<code>public<\/code>&nbsp;\u00e8 strutturata come richiesto e contiene i file&nbsp;<code>common.json<\/code>, che al momento sono vuoti.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"definisci-una-pagina-localizzata\">Definisci una pagina localizzata<\/h3>\n\n\n\n<p>\u00c8 ora giunto il momento di costruire una pagina Next.js con contenuti multilingua. Modifica la home page del tuo sito aggiornando il file&nbsp;<code>src\/pages\/index.js<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ src\/pages\/index.js<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { serverSideTranslations } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-i18next\/serverSideTranslations'<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { useTranslation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-i18next'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<span class=\"hljs-keyword\">const<\/span> { t } = useTranslation()\n\n<span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{t(\"HELLO_WORLD\")}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n\t)\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getStaticProps<\/span>(<span class=\"hljs-params\">context<\/span>) <\/span>{\n    <span class=\"hljs-comment\">\/\/ estrae l'identificatore UTS del locale dall'URL<\/span>\n\n    <span class=\"hljs-keyword\">const<\/span> { locale } = context\n\n    <span class=\"hljs-keyword\">return<\/span> {\n        <span class=\"hljs-attr\">props<\/span>: {\n        <span class=\"hljs-comment\">\/\/ passa le props con le traduzioni al componente di pagina<\/span>\n        ...(<span class=\"hljs-keyword\">await<\/span> serverSideTranslations(locale)),\n        },\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Capiamo ora come funziona questo componente, un passo alla volta.<\/p>\n\n\n\n<p>La funzione&nbsp;<code>getStaticProps()<\/code>&nbsp;di Next.js si occupa di definire la strategia di rendering della pagina. Come spiegato nella&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/internationalization#accessing-the-locale-information\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">documentazione ufficiale<\/a>, \u00e8 possibile recuperare il locale estratto dall\u2019URL della pagina tramite il parametro&nbsp;<code>context<\/code>.<\/p>\n\n\n\n<p>Gli URL&nbsp;<code>\/<\/code>,&nbsp;<code>\/es<\/code>&nbsp;e&nbsp;<code>\/it<\/code>&nbsp;mandano tutti alla home page, ma:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In&nbsp;<code>\/<\/code>,&nbsp;<code>locale<\/code>&nbsp;\u00e8&nbsp;<code>en<\/code>&nbsp;perch\u00e8&nbsp;<code>defaultLocale<\/code>&nbsp;\u00e8&nbsp;<code>en<\/code><\/li>\n\n\n\n<li>In&nbsp;<code>\/es<\/code>,&nbsp;<code>locale<\/code>&nbsp;\u00e8&nbsp;<code>es<\/code><\/li>\n\n\n\n<li>In&nbsp;<code>\/it<\/code>,&nbsp;<code>locale<\/code>&nbsp;\u00e8&nbsp;<code>it<\/code><\/li>\n<\/ul>\n\n\n\n<p>Dovrebbe ora essere chiaro come funziona la feature di routing multilingua di Next.js.<\/p>\n\n\n\n<p>Successivamente, l\u2019HOC&nbsp;<code>serverSideTranslations()<\/code>&nbsp;di&nbsp;<code>next-i18next<\/code>&nbsp;prende&nbsp;<code>locale<\/code>&nbsp;come parametro e genera le configurazioni di traduzione, passate come props al componente di pagina. Tieni a mente che, in ogni pagina da localizzare, devi passare il risultato di questa funzione alle props.<\/p>\n\n\n\n<p>Nota che la logica descritta qui sopra rimane uguale sia nel caso di&nbsp;<code>getStaticProps()<\/code>&nbsp;che di&nbsp;<code>getServerSideProps()<\/code>.<\/p>\n\n\n\n<p>Il componente di pagina o qualsiasi altro componente sotto il suo albero pu\u00f2 ora usare l\u2019hook&nbsp;<code>useTranslation()<\/code>&nbsp;di&nbsp;<code>next-i18next<\/code>. Come sottolineato nella&nbsp;<a href=\"https:\/\/github.com\/i18next\/next-i18next#usetranslation\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">documentazione<\/a>, stai attento a non importare&nbsp;<code>useTranslation()<\/code>&nbsp;da&nbsp;<code>react-i18next<\/code>!<\/p>\n\n\n\n<p>Questo hook restituisce la funzione&nbsp;<code>t<\/code>, la quale accetta una stringa come parametro e la usa come chiave per trovare la corrispondente traduzione dal file&nbsp;<code>common.json<\/code>&nbsp;corretto. Se non vengono trovate traduzioni corrispondenti, restituisce la stringa chiave.<\/p>\n\n\n\n<p>Verifica che ci\u00f2 \u00e8 vero lanciando il server di sviluppo con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm run dev<\/code><\/span><\/pre>\n\n\n<p>Apri&nbsp;<code>http:\/\/localhost:3000<\/code>&nbsp;nel browser.<\/p>\n\n\n\n<p>Poich\u00e9 tutti i file&nbsp;<code>common.json<\/code>&nbsp;sono vuoti, indipendentemente dalla pagina visitata, sia questa&nbsp;<code>\/<\/code>,&nbsp;<code>\/es<\/code>&nbsp;o&nbsp;<code>\/it<\/code>, vedrai sempre:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_BC40C0853C0EC0693F1303AB7D959D84618893E1F6E0A665758D66711F0BDB27_1683106277129_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Tempo di definire qualche traduzione!<\/p>\n\n\n\n<p><strong>Traduci il tuo contenuto<\/strong><\/p>\n\n\n\n<p>Nei file&nbsp;<code>common.json<\/code>, aggiungi la chiave&nbsp;<code>HELLO_WORLD<\/code>&nbsp;con i seguenti valori:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>\/en\/common.json<\/code>:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n    <span class=\"hljs-attr\">\"HELLO_WORLD\"<\/span>: <span class=\"hljs-string\">\"Hello, World!\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>\/es\/common.json<\/code>:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n    <span class=\"hljs-attr\">\"HELLO_WORLD\"<\/span>: <span class=\"hljs-string\">\"\u00a1Hola, mundo!\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>\/it\/common.json<\/code>:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n    <span class=\"hljs-attr\">\"HELLO_WORLD\"<\/span>: <span class=\"hljs-string\">\"Ciao, mondo!\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Non dimenticare che ogni volta che modifichi qualcosa nella cartella&nbsp;<code>public<\/code>, devi poi riavviare il server di sviluppo. Killa l\u2019istanza corrente e riavviarla.<\/p>\n\n\n\n<p><strong>Metti tutto insieme<\/strong><\/p>\n\n\n\n<p>Se apri le tre versioni localizzate della home page del tuo sito Next.js nel browser, vedrai:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>http:\/\/localhost:3000\/<\/code>:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_BC40C0853C0EC0693F1303AB7D959D84618893E1F6E0A665758D66711F0BDB27_1683106715652_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>http:\/\/localhost:3000\/es<\/code>:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_BC40C0853C0EC0693F1303AB7D959D84618893E1F6E0A665758D66711F0BDB27_1683106759741_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>http:\/\/localhost:3000\/it<\/code>:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_BC40C0853C0EC0693F1303AB7D959D84618893E1F6E0A665758D66711F0BDB27_1683106785090_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Et voil\u00e0! Hai appena imparato a costruire un sito internazionale in Next.js!<\/p>\n\n\n\n<p>Puoi trovare il codice dell\u2019applicazione di esempio sviluppata qui nella&nbsp;<a href=\"https:\/\/github.com\/Tonel\/i18n-next-demo\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">repository GitHub che supporta l\u2019articolo<\/a>. Clonate la repo e lancia il sito in locale con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">git <span class=\"hljs-keyword\">clone<\/span> https:<span class=\"hljs-comment\">\/\/github.com\/Tonel\/i18n-next-demo<\/span>\ncd i18n-next-demo\nnpm i\nnpm run dev<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Visita&nbsp;<code>http:\/\/localhost:3000<\/code>&nbsp;and ammira l\u2019app localizzata di demo!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>In questo articolo abbiamo visto come creare un <strong>sito multilingua in Next.js<\/strong>. Con l\u2019aiuto di&nbsp;<code>next-i18next<\/code>, \u00e8<strong> possibile implementare facilmente l\u2019i18n in Next<\/strong>.js, rendendo pi\u00f9 semplice l\u2019integrazione di contenuti localizzati in un sito.<\/p>\n\n\n\n<p>Per prima cosa, hai capito quali sono le funzionalit\u00e0 di i18n offerte nativamente da Next.js e perch\u00e9 \u00e8 necessaria una dipendenza aggiuntiva per gestire la logica di traduzione. Hai appreso perch\u00e9&nbsp;<code>next-i18next<\/code>&nbsp;\u00e8 la migliore libreria i18n per Next.js e come configurarla in un tutorial passo dopo passo. Costruire un sito localizzato in Next.js non \u00e8 mai stato cos\u00ec facile!<\/p>\n\n\n\n<p>Grazie per aver letto questo articolo! Speriamo che ti sia stato utile!<\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js supporta il routing multilingua di default. Allo stesso tempo, non offre un sistema per gestire la traduzione dei contenuti. Tutto ci\u00f2 che fa \u00e8 leggere il \u201clocale\u201d contenuto nell\u2019URL di una pagina e mostrare all\u2019utente la lingua corretta di conseguenza. Per creare un sito internazionale in Next.js \u00e8 necessario gestire manualmente le traduzioni, operazione&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/\">Read more<\/a><\/p>\n","protected":false},"author":160,"featured_media":20811,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[10329,11475],"collections":[],"class_list":{"0":"post-20850","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-framework","9":"tag-nextjs-it","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Multilingual site in Next.js With next-i18next - Codemotion<\/title>\n<meta name=\"description\" content=\"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare un sito multilingua in Next.js con next-i18next\" \/>\n<meta property=\"og:description\" content=\"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-12T07:34:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-10T11:57:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1193\" \/>\n\t<meta property=\"og:image:height\" content=\"879\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"Come creare un sito multilingua in Next.js con next-i18next\",\"datePublished\":\"2023-05-12T07:34:05+00:00\",\"dateModified\":\"2023-11-10T11:57:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/\"},\"wordCount\":1406,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/iStock-498555620.jpg\",\"keywords\":[\"Framework\",\"NextJS\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/\",\"name\":\"Multilingual site in Next.js With next-i18next - Codemotion\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/iStock-498555620.jpg\",\"datePublished\":\"2023-05-12T07:34:05+00:00\",\"dateModified\":\"2023-11-10T11:57:19+00:00\",\"description\":\"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/iStock-498555620.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/iStock-498555620.jpg\",\"width\":1193,\"height\":879,\"caption\":\"World map made of colorful speech bubbles. Translating, language interpreter and communication vector concept illustration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/sito-multilingua-in-next-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come creare un sito multilingua in Next.js con next-i18next\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/antonello-zanini\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Multilingual site in Next.js With next-i18next - Codemotion","description":"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Come creare un sito multilingua in Next.js con next-i18next","og_description":"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-05-12T07:34:05+00:00","article_modified_time":"2023-11-10T11:57:19+00:00","og_image":[{"width":1193,"height":879,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"Come creare un sito multilingua in Next.js con next-i18next","datePublished":"2023-05-12T07:34:05+00:00","dateModified":"2023-11-10T11:57:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/"},"wordCount":1406,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg","keywords":["Framework","NextJS"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/","name":"Multilingual site in Next.js With next-i18next - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg","datePublished":"2023-05-12T07:34:05+00:00","dateModified":"2023-11-10T11:57:19+00:00","description":"Segui questo tutorial passo passo e impara a costruire un sito multilingua in Next.js con next-i18next. Esempi di codice inclusi!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg","width":1193,"height":879,"caption":"World map made of colorful speech bubbles. Translating, language interpreter and communication vector concept illustration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Come creare un sito multilingua in Next.js con next-i18next"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg",1193,879,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-300x221.jpg",300,221,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-768x566.jpg",768,566,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-1024x754.jpg",1024,754,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg",1193,879,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg",1193,879,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620.jpg",100,74,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/05\/iStock-498555620-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"Next.js supporta il routing multilingua di default. Allo stesso tempo, non offre un sistema per gestire la traduzione dei contenuti. Tutto ci\u00f2 che fa \u00e8 leggere il \u201clocale\u201d contenuto nell\u2019URL di una pagina e mostrare all\u2019utente la lingua corretta di conseguenza. Per creare un sito internazionale in Next.js \u00e8 necessario gestire manualmente le traduzioni, operazione&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=20850"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20850\/revisions"}],"predecessor-version":[{"id":24482,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20850\/revisions\/24482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/20811"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=20850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=20850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=20850"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=20850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}