Next.js Internacionalización (i18n) con next-i18next y Intlayer

Tanto next-i18next como Intlayer son frameworks de internacionalización (i18n) de código abierto diseñados para aplicaciones de Next.js. Son ampliamente utilizados para gestionar traducciones, localización y cambio de idioma en proyectos de software.

Ambas soluciones incluyen tres nociones principales:

1. Declaración de Contenido: El método para definir el contenido traducible de tu aplicación.

   • Nombrado resource en el caso de i18next, la declaración de contenido es un objeto JSON estructurado que contiene pares clave-valor para traducciones en uno o varios idiomas. Consulta la documentación de i18next para más información.
   • Nombrado archivo de declaración de contenido en el caso de Intlayer, la declaración de contenido puede ser un archivo JSON, JS o TS que exporta los datos estructurados. Consulta la documentación de Intlayer para más información.

2. Utilidades: Herramientas para construir e interpretar declaraciones de contenido en la aplicación, como getI18n(), useCurrentLocale(), o useChangeLocale() para next-i18next, y useIntlayer() o useLocale() para Intlayer.

3. Plugins y Middleware: Características para gestionar la redirección de URL, optimización de empaquetado, y más, como next-i18next/middleware para next-i18next o intlayerMiddleware para Intlayer.

Intlayer vs. i18next: Principales Diferencias

Para explorar las diferencias entre i18next e Intlayer, consulta nuestra publicación de blog next-i18next vs. next-intl vs. Intlayer.

Cómo Generar Diccionarios de next-i18next con Intlayer

¿Por qué Usar Intlayer con next-i18next?

Los archivos de declaración de contenido de Intlayer generalmente ofrecen una mejor experiencia de desarrollador. Son más flexibles y mantenibles debido a dos ventajas principales:

1. Colocación Flexible: Un archivo de declaración de contenido de Intlayer se puede colocar en cualquier lugar del árbol de archivos de la aplicación, simplificando la gestión de componentes duplicados o eliminados sin dejar declaraciones de contenido no utilizadas.

   Ejemplos de estructuras de archivos:

   bash

   .└── src    └── components        └── MyComponent            ├── index.content.ts # Archivo de declaración de contenido            └── index.tsx

2. Traducciones Centralizadas: Intlayer almacena todas las traducciones en un solo archivo, asegurando que no falte ninguna traducción. Al usar TypeScript, las traducciones faltantes se detectan automáticamente y se informan como errores.

Instalación

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

Configurando Intlayer para Exportar Diccionarios de i18next

La exportación de recursos de i18next no asegura una compatibilidad 1:1 con otros frameworks. Se recomienda adherirse a una configuración basada en Intlayer para minimizar problemas.

Para exportar recursos de i18next, configura Intlayer en un archivo intlayer.config.ts. Ejemplos de configuraciones:

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;

Aquí está la continuación y corrección de las partes restantes de tu documento:

Importando Diccionarios en tu Configuración de i18next

Para importar los recursos generados en tu configuración de i18next, utiliza i18next-resources-to-backend. A continuación se muestran ejemplos:

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

Declaración de Contenido

Ejemplos de archivos de declaración de contenido en varios formatos:

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;

Construye los Recursos de next-i18next

Para construir los recursos de next-i18next, ejecuta el siguiente comando:

npx run intlayer build

Esto generará recursos en el directorio ./i18next/resources. La salida esperada:

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

Nota: El espacio de nombres de i18next corresponde a la clave de declaración de Intlayer.

Implementar el Plugin de Next.js

Una vez configurado, implementa el plugin de Next.js para reconstruir tus recursos de i18next cada vez que los archivos de declaración de contenido de Intlayer se actualicen.

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

Usando Contenido en Componentes de Next.js

Después de implementar el plugin de Next.js, puedes usar el contenido en tus componentes:

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;