¿Por qué deberías considerar Intlayer?

¿Qué es Intlayer?

Intlayer es una biblioteca de internacionalización diseñada específicamente para desarrolladores de JavaScript. Permite la declaración de tu contenido en cualquier parte de tu código. Convierte las declaraciones de contenido multilingüe en diccionarios estructurados para integrarlos fácilmente en tu código. Usando TypeScript, Intlayer hace que tu desarrollo sea más sólido y eficiente.

¿Por qué se creó Intlayer?

Intlayer fue creado para resolver un problema común que afecta a todas las bibliotecas i18n comunes como next-intl, react-i18next, react-intl, next-i18next, react-intl y vue-i18n.

Todas estas soluciones adoptan un enfoque centralizado para listar y gestionar tu contenido. Por ejemplo:

.├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

O aquí usando espacios de nombres:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Este tipo de arquitectura ralentiza el proceso de desarrollo y hace que la base de código sea más compleja de mantener por varias razones:

1. Para cualquier nuevo componente creado, debes:

   • Crear el nuevo recurso/espacio de nombres en la carpeta locales
   • Recordar importar el nuevo espacio de nombres en tu página
   • Traducir tu contenido (a menudo hecho manualmente copiando/pegando desde proveedores de IA)

2. Para cualquier cambio realizado en tus componentes, debes:

   • Buscar el recurso/espacio de nombres relacionado (lejos del componente)
   • Traducir tu contenido
   • Asegurarte de que tu contenido esté actualizado para cualquier localización
   • Verificar que tu espacio de nombres no incluya claves/valores sin usar
   • Asegurarte de que la estructura de tus archivos JSON sea la misma para todas las localizaciones

En proyectos profesionales que utilizan estas soluciones, a menudo se emplean plataformas de localización para ayudar a gestionar la traducción de tu contenido. Sin embargo, esto puede volverse rápidamente costoso para proyectos grandes.

Para resolver este problema, Intlayer adopta un enfoque que delimita tu contenido por componente y mantiene tu contenido cerca de tu componente, como a menudo hacemos con CSS (styled-components), tipos, documentación (storybook) o pruebas unitarias (jest).

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

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

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

Este enfoque te permite:

1. Aumentar la velocidad de desarrollo

   • Los archivos .content.{{ts|mjs|cjs|json}} pueden ser creados usando una extensión de VSCode
   • Las herramientas de autocompletado con IA en tu IDE (como GitHub Copilot) pueden ayudarte a declarar tu contenido, reduciendo el copiar/pegar

2. Limpiar tu base de código

   • Reducir la complejidad
   • Incrementar la mantenibilidad

3. Duplicar tus componentes y su contenido relacionado más fácilmente (Ejemplo: componentes de login/registro, etc.)

   • Limitando el riesgo de impactar el contenido de otros componentes
   • Copiando/pegando tu contenido de una aplicación a otra sin dependencias externas

4. Evitar contaminar tu base de código con claves/valores no usados para componentes no usados

   • Si no usas un componente, Intlayer no importará su contenido relacionado
   • Si eliminas un componente, te será más fácil recordar eliminar su contenido relacionado ya que estará presente en la misma carpeta

5. Reducir el costo de razonamiento para que los agentes de IA declaren tu contenido multilingüe

   • El agente de IA no tendrá que escanear toda tu base de código para saber dónde implementar tu contenido
   • Las traducciones pueden realizarse fácilmente mediante herramientas de autocompletado con IA en tu IDE (como GitHub Copilot)

Características adicionales de Intlayer

Funcionalidad	Descripción
	Compatibilidad entre Frameworks Intlayer es compatible con todos los principales frameworks y bibliotecas, incluyendo Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.
	Gestión de Contenido Potenciada por JavaScript Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente. - Declaración de contenido
	Archivo de Declaración de Contenido por Localidad Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática. - Archivo de Declaración de Contenido por Localidad
	Entorno con Tipos Seguros Aprovecha TypeScript para asegurar que tus definiciones de contenido y código estén libres de errores, además de beneficiarte de la autocompletación en el IDE. - Configuración de TypeScript
	Configuración Simplificada Pon en marcha rápidamente con una configuración mínima. Ajusta fácilmente los ajustes para internacionalización, enrutamiento, IA, compilación y manejo de contenido. - Explora la integración con Next.js
	Recuperación de Contenido Simplificada No es necesario llamar a tu función t para cada contenido. Recupera todo tu contenido directamente usando un solo hook. - Integración con React
	Implementación Consistente de Componentes del Servidor Perfectamente adecuado para componentes del servidor de Next.js, utiliza la misma implementación tanto para componentes cliente como servidor, sin necesidad de pasar tu función t a través de cada componente del servidor. - Componentes del Servidor
	Base de Código Organizada Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Las traducciones cercanas a sus respectivos componentes mejoran la mantenibilidad y claridad. - Cómo funciona Intlayer
	Enrutamiento Mejorado Soporte completo para el enrutamiento de aplicaciones, adaptándose perfectamente a estructuras complejas de aplicaciones, para Next.js, React, Vite, Vue.js, etc. - Explorar la integración con Next.js
	Soporte Markdown Importa e interpreta archivos de localización y Markdown remoto para contenido multilingüe como políticas de privacidad, documentación, etc. Interpreta y haz accesibles los metadatos de Markdown en tu código. - Archivos de contenido
	Editor Visual y CMS Gratuitos Un editor visual y CMS gratuitos están disponibles para los redactores de contenido, eliminando la necesidad de una plataforma de localización. Mantén tu contenido sincronizado usando Git, o externalízalo total o parcialmente con el CMS. - Editor Intlayer - CMS Intlayer
	Contenido Tree-shakable Contenido tree-shakable, que reduce el tamaño del paquete final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu paquete. Soporta carga diferida para mejorar la eficiencia de carga de la aplicación. - Optimización de construcción de la aplicación
	Renderizado Estático No bloquea el Renderizado Estático. - Integración con Next.js
	Traducción impulsada por IA Transforma tu sitio web a 231 idiomas con un solo clic utilizando las avanzadas herramientas de traducción impulsadas por IA de Intlayer, usando tu propio proveedor de IA/clave API. - Integración CI/CD - CLI de Intlayer - Relleno automático
	Integración del Servidor MCP Proporciona un servidor MCP (Protocolo de Contexto de Modelo) para la automatización del IDE, permitiendo una gestión de contenido fluida y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo. - Servidor MCP
	Extensión para VSCode Intlayer proporciona una extensión para VSCode que te ayuda a gestionar tu contenido y traducciones, construir tus diccionarios, traducir tu contenido y más. - Extensión para VSCode
	Interoperabilidad Permite la interoperabilidad con react-i18next, next-i18next, next-intl y react-intl. - Intlayer y react-intl - Intlayer y next-intl - Intlayer y next-i18next

Comparación de Intlayer con otras soluciones

Historial del Documento