¿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 integrarse fácilmente en tu código. Usando TypeScript, Intlayer hace que tu desarrollo sea más sólido y eficiente.

¿Por qué elegir Intlayer sobre otras alternativas?

En comparación con las soluciones principales como next-intl o i18next, Intlayer es una solución que viene con optimizaciones integradas como:

¿Por qué se creó Intlayer?

Intlayer se creó para resolver un problema común que afecta a todas las bibliotecas de i18n habituales como next-intl, react-i18next, react-intl, next-i18next, react-intl y vue-i18n.

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

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

O aquí usando espacios de nombres (namespaces):

.
├── 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 componente nuevo 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 y pegando de 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 cada idioma (locale)
   • Verificar que tu espacio de nombres no incluya claves/valores no utilizados
   • Asegurarte de que la estructura de tus archivos JSON sea la misma para todos los idiomas

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

Para resolver este problema, Intlayer adopta un enfoque que delimita tu contenido por componente y lo mantiene cerca de tu componente, como solemos hacer 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|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml} se pueden crear utilizando una extensión de VSCode
   • Las herramientas de autocompletado de 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
   • Aumentar la mantenibilidad

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

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

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

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

5. Reducir el costo de razonamiento para los agentes de IA al declarar tu contenido multilingue

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

6. Optimizar el rendimiento de la carga

   • Si un componente se carga de forma diferida (lazy-loaded), su contenido relacionado se cargará al mismo tiempo

Características adicionales de Intlayer

Mostrar todo el contenido de la tabla

Mostrar todo el contenido de la tabla

Abrir la tabla en una ventana flotante para ver todo el contenido claramente

Característica	Descripción
	Soporte Multi-Framework Intlayer es compatible con todos los frameworks y librerías principales, incluidos Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.
	Administración de contenido basada en JavaScript Aprovecha la flexibilidad de JavaScript para definir y administrar tu contenido de manera eficiente. - Declaración de contenido
	Compilador El compilador de Intlayer extrae automáticamente el contenido de los componentes y genera los archivos de diccionario. - Compilador
	Archivo de declaración de contenido por idioma Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática. - Archivo de declaración de contenido por idioma
	Entorno seguro para tipos Aprovecha TypeScript para garantizar que tus definiciones de contenido y tu código estén libres de errores, mientras te beneficias del autocompletado del IDE. - Configuración de TypeScript
	Configuración simplificada Ponte en marcha rápidamente con una configuración mínima. Ajusta la configuración de internacionalización, enrutamiento, IA, compilación y manejo de contenido con facilidad. - Explorar la integración de Next.js
	Obtención simplificada de contenido No es necesario llamar a tu función t para cada fragmento de contenido. Recupera todo tu contenido directamente usando un único hook. - Integración con React
	Implementación consistente de componentes de servidor Perfectamente adecuado para los componentes de servidor de Next.js, usa la misma implementación para componentes de cliente y de servidor, sin necesidad de pasar tu función t a través de cada componente de servidor. - Componentes de 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 la claridad. - Cómo funciona Intlayer
	Enrutamiento mejorado Soporte completo de enrutamiento de aplicaciones, adaptándose sin problemas a estructuras de aplicaciones complejas, para Next.js, React, Vite, Vue.js, etc. - Explorar la integración de Next.js
	Soporte de Markdown Importa e interpreta archivos locales 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 un CMS gratuitos están disponibles para los escritores 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 de Intlayer - CMS de Intlayer
	Contenido eliminable en compilación (Tree-shakable) Contenido eliminable en compilación, reduciendo el tamaño del bundle final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu bundle. Soporta la carga diferida (lazy loading) para mejorar la eficiencia de carga de la aplicación. - Optimización de la compilación de aplicaciones
	Renderizado estático No bloquea el renderizado estático. - Integración de Next.js
	Traducción basada en IA Transforma tu sitio web a 231 idiomas con un solo clic utilizando las herramientas avanzadas de traducción basadas en IA de Intlayer usando tu propio proveedor de IA/clave API. - Integración de CI/CD - CLI de Intlayer - Autocompletar
	Integración del servidor MCP Proporciona un servidor MCP (Model Context Protocol) para la automatización del IDE, lo que permite una gestión de contenido perfecta y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo. - Servidor MCP
	Extension de VSCode Intlayer proporciona una extensión de VSCode para ayudarte a administrar tu contenido y traducciones, compilar tus diccionarios, traducir tu contenido y más. - Extensión de 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 - Adaptadores de compatibilidad de Intlayer
Probar traducciones faltantes (CLI/CI)	✅ CLI: npx intlayer content test (auditoría compatible con CI)

Comparación de Intlayer con otras soluciones

Estrellas de GitHub

Las estrellas de GitHub son un fuerte indicador de la popularidad de un proyecto, la confianza de la comunidad y su relevancia a largo plazo. Si bien no son una medida directa de la calidad técnica, reflejan cuántos desarrolladores encuentran útil el proyecto, siguen su progreso y es probable que lo adopten. Para estimar el valor de un proyecto, las estrellas ayudan a comparar la tracción entre alternativas y brindan información sobre el crecimiento del ecosystm.

Interoperabilidad

intlayer también puede ayudar a gestionar tus espacios de nombres para react-intl, react-i18next, next-intl, next-i18next y vue-i18n.

Usando intlayer, puedes declarar tu contenido en el formato de tu biblioteca de i18n favorita, e intlayer generará tus espacios de nombres en la ubicación de tu elección (ejemplo: /messages/{{locale}}/{{namespace}}.json).

Si deseas seguir usando la API de tu biblioteca i18n actual, intlayer también proporciona adaptadores de compatibilidad (compat adapters): paquetes que exponen exactamente la misma API que react-i18next, next-intl, react-intl, vue-i18n y otras, pero servidas por los diccionarios de Intlayer. Esto te permite migrar progresivamente sin reescribir tu código. Consulta la documentación de los adaptadores de compatibilidad.

Preguntas frecuentes