M

MLOG

Italiano

Impara come implementare l'internazionalizzazione (i18n) in modo fluido nelle tue applicazioni Next.js per raggiungere un pubblico globale. Tratta routing, traduzione dei contenuti e best practice.

Internazionalizzazione con Next.js: Creare App Multilingua per un Pubblico Globale

Nel mondo interconnesso di oggi, creare applicazioni che si rivolgono a un pubblico globale non è più un lusso, ma una necessità. Next.js, un potente framework per React, fornisce funzionalità robuste per l'implementazione dell'internazionalizzazione (i18n), consentendoti di creare applicazioni multilingua che offrono un'esperienza localizzata agli utenti di tutto il mondo. Questa guida completa ti illustrerà i concetti, le tecniche e le best practice essenziali per creare applicazioni Next.js internazionalizzate.

Comprendere l'Internazionalizzazione e la Localizzazione

Prima di addentrarci nelle specificità dell'i18n di Next.js, chiariamo i termini chiave:

In sostanza, l'i18n prepara la tua applicazione per la localizzazione. Separando gli elementi dipendenti dalla lingua dal codice principale, si rende più semplice localizzare l'applicazione per mercati diversi.

Perché Implementare l'Internazionalizzazione in Next.js?

Implementare l'i18n nella tua applicazione Next.js offre numerosi vantaggi:

Funzionalità e Configurazione i18n di Next.js

Next.js offre un supporto integrato per l'i18n attraverso le sue funzionalità di routing e gestione dei contenuti. Di seguito è riportata una scomposizione delle caratteristiche importanti:

1. Configurazione dell'i18n in next.config.js

La configurazione principale per l'i18n si trova nel file next.config.js. Ecco un esempio:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Un array delle localizzazioni supportate (codici lingua)
    defaultLocale: 'en', // La localizzazione predefinita da usare
    localeDetection: true, // Abilita/disabilita il rilevamento automatico della localizzazione basato sulle impostazioni del browser (opzionale)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Spiegazione:

2. Routing con Prefissi di Localizzazione

Next.js aggiunge automaticamente un prefisso alle route con la localizzazione. Ad esempio, se hai una pagina a /about e la localizzazione è 'es' (spagnolo), l'URL diventerà /es/about. Ciò abilita versioni linguistiche diverse delle pagine e permette ai motori di ricerca di indicizzare i contenuti per ogni localizzazione. Il framework gestisce il reindirizzamento e il routing per te.

3. Utilizzo dell'Hook useRouter

L'hook useRouter da next/router fornisce accesso alla localizzazione corrente e ad altre informazioni di routing.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Localizzazione corrente: {locale}

      
Localizzazioni disponibili: {locales.join(', ')}

      
Localizzazione predefinita: {defaultLocale}

    

  );
}

export default MyComponent;

L'oggetto router offre le seguenti proprietà chiave:

Strategie di Traduzione dei Contenuti

Una volta configurata la tua applicazione Next.js per l'i18n, dovrai implementare strategie per tradurre i tuoi contenuti. Ecco diversi approcci popolari:

1. Usare un Sistema di Gestione delle Traduzioni (TMS) Dedicato

Per progetti su larga scala con molte lingue, un TMS è altamente raccomandato. Le opzioni popolari includono:

Vantaggi:

2. Creare File di Traduzione JSON

Per progetti più piccoli, l'uso di file JSON per archiviare le traduzioni è un metodo semplice ed efficace.

Esempio di Struttura delle Directory:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Esempio en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Esempio es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Esempio MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Questo approccio offre flessibilità ed è semplice per progetti più piccoli. È generalmente facile da aggiornare e mantenere.

3. Usare una Libreria di Traduzione

Diverse librerie JavaScript semplificano la traduzione dei contenuti all'interno dei tuoi componenti React.

Esempio con next-i18next (Installazione: npm install next-i18next i18next react-i18next):

Crea un file di configurazione i18n (es., i18n.js nella tua directory principale):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Crea la tua configurazione Next.js per next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // altra configurazione
}

module.exports = nextConfig

Aggiungi la configurazione e l'importazione della traduzione al tuo _app.js:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Crea una cartella e popola con le localizzazioni per le tue traduzioni.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Esempio en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Usare la traduzione in un componente:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Questo esempio usa l'hook useTranslation per recuperare le traduzioni in base alla localizzazione corrente.

Gestire Route Dinamiche e Generazione di Siti Statici (SSG)

L'internazionalizzazione diventa più complessa quando si ha a che fare con route dinamiche (ad es., post di blog, pagine di prodotti) e generazione di siti statici (SSG).

1. Route Dinamiche (es., /blog/[slug])

Per le route dinamiche, dovrai generare i percorsi corretti per ogni localizzazione durante il tempo di build usando getStaticPaths. Questa funzione restituisce un array di percorsi che Next.js dovrebbe pre-renderizzare.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Recupera i dati dei post del blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // o 'blocking' se vuoi mostrare uno stato di caricamento
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Spiegazione:

2. Generazione di Siti Statici (SSG) con getStaticProps

In getStaticProps, puoi recuperare i contenuti tradotti in base al parametro locale.


export async function getStaticProps({ params, locale }) {
  // Recupera i contenuti in base alla localizzazione e ai parametri
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

La funzione getPostBySlug dovrebbe recuperare il contenuto tradotto per lo slug e la localizzazione dati, che potrebbero essere recuperati dai tuoi file di traduzione, dal database o da un CMS.

3. Rendering Lato Server (SSR) con getServerSideProps

Per i contenuti che devono essere recuperati al momento della richiesta, usa getServerSideProps. Questo è utile se il contenuto cambia frequentemente o è personalizzato per ogni utente.


export async function getServerSideProps({ params, locale, req, res }) {
  // Recupera i dati in base alla localizzazione e ai parametri (ad es., da un database)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Best Practice per l'Internazionalizzazione con Next.js

Seguire queste best practice ti aiuterà a creare applicazioni multilingua robuste, manutenibili e facili da usare:

Considerazioni SEO per Siti Web Internazionalizzati

Ottimizzare il tuo sito web internazionalizzato per i motori di ricerca è essenziale per generare traffico organico da tutto il mondo. Ecco alcune best practice SEO chiave:

Esempio: Costruire un Semplice Blog Multilingua

Creiamo un esempio semplificato di un blog multilingua usando Next.js. Questo fornirà un'illustrazione più concreta di come applicare i concetti discussi sopra.

1. Configurazione del Progetto

Crea un nuovo progetto Next.js:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Configurare l'i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Creare i File di Traduzione

Crea una cartella locales nella directory principale e aggiungi i seguenti file JSON:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Creare il Componente del Post del Blog (es., components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Creare la Pagina Indice (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Questo esempio semplificato mostra i principi fondamentali dell'internazionalizzazione di Next.js. Puoi espandere questa struttura di base per includere funzionalità più complesse, come route dinamiche e integrazione con sistemi di gestione delle traduzioni. Considera di migliorare i link sopra con il componente Link e di aggiungere l'attributo locale appropriato.

6. Eseguire l'Applicazione

Esegui l'applicazione con:


npm run dev

Ora puoi accedere al tuo blog su http://localhost:3000 (Inglese), http://localhost:3000/es (Spagnolo) e http://localhost:3000/fr (Francese). Dovresti vedere il titolo e il contenuto del post del blog tradotti in base alla localizzazione selezionata.

Conclusione

Next.js fornisce un set completo di funzionalità per implementare l'internazionalizzazione nelle tue applicazioni web. Seguendo i principi e le tecniche delineate in questa guida, puoi creare applicazioni multilingua che offrono esperienze localizzate agli utenti di tutto il mondo. Ricorda di pianificare la tua strategia di i18n in anticipo, scegliere il metodo di traduzione giusto per le tue esigenze e dare priorità all'esperienza utente. Con un'attenta pianificazione ed esecuzione, puoi creare applicazioni che entrano in sintonia con un pubblico globale e sbloccano nuove opportunità di crescita. L'apprendimento continuo, tenersi aggiornati con le ultime versioni e le best practice garantirà di utilizzare i tuoi strumenti e le tue tecnologie in modo efficace.

Con l'avanzare della tecnologia, aspettati di vedere emergere funzionalità i18n più avanzate. La capacità di raggiungere utenti di culture e gruppi linguistici diversi rimarrà una priorità chiave per gli sviluppatori di applicazioni in tutto il mondo. Pertanto, padroneggiare i fondamenti dell'i18n è un'abilità preziosa che aumenterà il tuo valore nel panorama dello sviluppo globale di oggi.