Next.js Internazionalizzazione (i18n) con next-i18next e Intlayer

Sia next-i18next che Intlayer sono framework di internazionalizzazione (i18n) open-source progettati per applicazioni Next.js. Sono ampiamente utilizzati per gestire traduzioni, localizzazione e cambio di lingua nei progetti software.

Entrambe le soluzioni includono tre nozioni principali:

1. Dichiarazione dei Contenuti: Il metodo per definire i contenuti traducibili della tua applicazione.

   • Chiamata resource nel caso di i18next, la dichiarazione dei contenuti è un oggetto JSON strutturato contenente coppie chiave-valore per traduzioni in una o più lingue. Vedi documentazione di i18next per ulteriori informazioni.
   • Chiamata file di dichiarazione dei contenuti nel caso di Intlayer, la dichiarazione dei contenuti può essere un file JSON, JS o TS che esporta i dati strutturati. Vedi documentazione di Intlayer per ulteriori informazioni.

2. Utilities: Strumenti per costruire e interpretare le dichiarazioni dei contenuti nell'applicazione, come getI18n(), useCurrentLocale(), o useChangeLocale() per next-i18next, e useIntlayer() o useLocale() per Intlayer.

3. Plugin e Middleware: Funzionalità per gestire la reindirizzamento degli URL, ottimizzazione del bundle e altro, come next-i18next/middleware per next-i18next o intlayerMiddleware per Intlayer.

Intlayer vs. i18next: Principali Differenze

Per esplorare le differenze tra i18next e Intlayer, controlla il nostro post sul blog next-i18next vs. next-intl vs. Intlayer.

Come Generare Dizionari next-i18next con Intlayer

Perché Usare Intlayer con next-i18next?

I file di dichiarazione dei contenuti di Intlayer offrono generalmente una migliore esperienza per gli sviluppatori. Sono più flessibili e manutenibili grazie a due principali vantaggi:

1. Posizionamento Flessibile: Un file di dichiarazione dei contenuti di Intlayer può essere posizionato ovunque nell'albero dei file dell'applicazione, semplificando la gestione di componenti duplicati o eliminati senza lasciare dichiarazioni di contenuti non utilizzate.

   Esempi di strutture di file:

   bash

   .└── src    └── components        └── MyComponent            ├── index.content.ts # File di dichiarazione dei contenuti            └── index.tsx

2. Traduzioni Centralizzate: Intlayer memorizza tutte le traduzioni in un unico file, garantendo che nessuna traduzione manchi. Quando si utilizza TypeScript, le traduzioni mancanti vengono automaticamente rilevate e segnalate come errori.

Installazione

npm install intlayer i18next next-i18next i18next-resources-to-backend

Configurare Intlayer per Esportare Dizionari i18next

L'esportazione delle risorse di i18next non garantisce una compatibilità 1:1 con altri framework. Si consiglia di attenersi a una configurazione basata su Intlayer per minimizzare i problemi.

Per esportare le risorse di i18next, configura Intlayer in un file intlayer.config.ts. Esempi di configurazioni:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    dictionaryOutput: ["i18next"],    i18nextResourcesDir: "./i18next/resources",  },};export default config;

Ecco la continuazione e la correzione delle parti rimanenti del tuo documento:

Importare Dizionari nella Tua Configurazione i18next

Per importare le risorse generate nella tua configurazione i18next, utilizza i18next-resources-to-backend. Di seguito sono riportati esempi:

import i18next from "i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next.use(  resourcesToBackend(    (language: string, namespace: string) =>      import(`../i18next/resources/${language}/${namespace}.json`)  ));

Dichiarazione dei Contenuti

Esempi di file di dichiarazione dei contenuti in vari formati:

import { t, type DeclarationContent } from "intlayer";const content = {  key: "my-content",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} satisfies DeclarationContent;export default content;

Costruire le Risorse next-i18next

Per costruire le risorse next-i18next, esegui il seguente comando:

npx run intlayer build

Questo genererà risorse nella directory ./i18next/resources. L'output atteso:

.└── i18next    └── resources       └── en           └── my-content.json       └── fr           └── my-content.json       └── es           └── my-content.json

Nota: Il namespace di i18next corrisponde alla chiave di dichiarazione di Intlayer.

Implementare il Plugin Next.js

Una volta configurato, implementa il plugin Next.js per ricostruire le tue risorse i18next ogni volta che i file di dichiarazione dei contenuti di Intlayer vengono aggiornati.

import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

Usare il Contenuto nei Componenti Next.js

Dopo aver implementato il plugin Next.js, puoi utilizzare il contenuto nei tuoi componenti:

import type { FC } from "react";import { useTranslation } from "react-i18next";const IndexPage: FC = () => {  const { t } = useTranslation();  return (    <div>      <h1>{t("my-content.title")}</h1>      <p>{t("my-content.description")}</p>    </div>  );};export default IndexPage;