i18n por componente

    Type-Safe. Traduce con IA. Edita visualmente.

    Define traducciones junto a los componentes para acelerar tu desarrollo. Mantén tu paquete tan ligero como debe ser. Invita a editores a través del CMS. Cada contribución es realmente apreciada.

    npm install intlayer

    Disponible para

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    Pruébelo gratis usando el playground.Ir al playground
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    Mejore la mantenibilidad del código manteniendo sus definiciones de contenido cerca de sus componentes. Reduzca la redundancia, mejore la claridad y simplifique las actualizaciones con un enfoque estructurado que facilita la gestión y el escalado del código con el tiempo.

    Extraiga su contenido instantáneamente con el Compilador Intlayer. Generará automáticamente los archivos de diccionario necesarios para su contenido a fin de internacionalizar su aplicación en un segundo.

    Aproveche el editor visual gratuito para construir y gestionar su sitio sin esfuerzo. Cree, edite y organice componentes y páginas sin necesidad de tocar código, facilitando la colaboración entre gestores de contenido y desarrolladores.

    Amplíe su alcance con la función de traducción incorporada. Traduza fácilmente su contenido utilizando una interfaz intuitiva, garantizando experiencias multilingües fluidas para sus usuarios sin la molestia de gestionar múltiples versiones de contenido manualmente.

    Utiliza la CLI de Intlayer para probar y rellenar tu contenido con IA, asegurando que todas las traducciones estén completas y sean precisas.

    ¿Por qué elegir Intlayer?

    Gratis y de Código Abierto

    Intlayer es gratuito y de código abierto, lo que le permite usarlo gratuitamente y contribuir a adaptarse a sus necesidades.

    Gestión de Contenido Impulsada por JavaScript

    Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido eficientemente.

    Type-Safe Entorno

    Utiliza TypeScript para asegurar que todas tus definiciones de contenido sean precisas y sin errores.

    Declaración a nivel de componente

    Mantén tus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.

    Configuración Simplificada

    Ponte en marcha rápidamente con una configuración mínima, especialmente optimizado para proyectos Next.js.

    CMS Integrado

    Edite sus contenidos con un CMS directamente integrado en su sitio web. Aumente la generación de contenido gracias a la IA.

    Tecnología

    Carga JSON dinámica

    Carga traducciones en tiempo de ejecución

    JSON con alcance (namespacing)

    Espacios de nombres de traduction por página

    Benchmark de Rendimiento I18n

    No hay datos disponibles

    ¿Qué es esta métrica?

    El tamaño total comprimido en gzip del paquete de la biblioteca de internacionalización. Solo incluye el proveedor y la lógica de recuperación de contenido después del tree-shaking y la minificación.

    ¿Por qué es importante?

    Un tamaño de biblioteca más pequeño reduce la carga útil inicial de JavaScript, lo que acelera el tiempo de descarga y ejecución en el cliente.

    Ver como

    Analice el puntaje de localización global de su sitio web

    Evalúe rápidamente y de forma gratuita la calidad de la localización de su sitio web. Analice los principales elementos multilingües de su sitio web para obtener una puntuación integral y recomendaciones prácticas para ampliar su alcance.

    i18n basado en código

    Traducciones con seguridad de tipos en tu repositorio.

    Declara contenido junto a tus componentes en TypeScript o JavaScript. Intlayer genera tipos automáticamente, dándote autocompletado, validación y feedback instantáneo. Adiós a las claves faltantes y cambios de contexto.

    AI CLI Tool

    Automatiza las traducciones desde tu terminal.

    La CLI para auditar, completar y traducir JSON y Markdown con IA.

    Ejecuta `npx intlayer fill` para detectar claves faltantes y generar traducciones con OpenAI, Claude o modelos locales. Mantén tu historial Git limpio y un tipado seguro.

    Intlayer TMS

    Deja de pagar por palabra. Automatiza con IA.

    La alternativa de código abierto a Crowdin y Lokalise. Creado para flujos de trabajo modernos.

    Gestiona traducciones directamente en tu código o vía editor visual. Usa IA para traducir al instante. Colabora con tu equipo sin límites de usuarios.

    CMS Headless

    Conecta tu código local con contenido remoto.

    Gestiona contenido multilingüe sin complicaciones. Intlayer interconecta diccionarios locales con gestión remota, permitiendo Live Sync para actualizaciones en caliente sin reconstruir. Usa webhooks para CI/CD, gestiona feature flags y deja que la IA de traducción automática (WIP) haga el resto.

    Feature Flags

    Alterna funciones al instante. Sin despliegues.

    Los diccionarios de Intlayer son más que texto. Úsalos para declarar lógica, estilos y configuraciones. Con Live Sync, alterna funciones, cambia temas de UI y actualiza el comportamiento de la app en tiempo real desde el CMS.

    AB testing

    Tu campo de juego para experimentos de producto.

    Sé el primero en explorar la nueva beta de A/B Testing impulsado por IA de Intlayer, diseñada para impulsar la descubribilidad y guiar decisiones de producto más inteligentes. Prueba cualquier cosa en tiempo real, desde copy y diseño hasta funciones completas, y deja que los datos te muestren lo que realmente funciona.

    Disponible en

    Prueba la demo en vivo

    Construido por la comunidad

    Conoce a los increíbles colaboradores que hacen posible Intlayer

    Preguntas frecuentes

    ¿Qué es la internacionalización (i18n)?

    La internacionalización (i18n) es el proceso de diseñar y desarrollar aplicaciones como Next.js, React o Express para admitir fácilmente múltiples idiomas. Te permite crear sitios web multilingües simplificando el proceso de traducción. Herramientas como TypeScript facilitan la implementación de i18n, permitiendo una adaptación eficiente y fácil de tu aplicación a diferentes idiomas y regiones.Leer más sobre la internacionalización

    ¿Cuáles son las principales características de Intlayer?

    Intlayer simplifica la gestión de configuraciones y habilita la internacionalización para varios tipos de aplicaciones JavaScript, incluidos los server components. Permite declarar el contenido directamente junto a los componentes, mejorando el mantenimiento del código. Además, Intlayer utiliza TypeScript para evitar declaraciones faltantes. Finalmente, Intlayer ofrece un editor visual que permite a los no desarrolladores editar el contenido del sitio web, traducir automáticamente con IA y optimizar el SEO de la aplicación.Leer más sobre las características de Intlayer

    ¿Hay un editor visual en Intlayer?

    Sí, Intlayer proporciona un editor visual opcional para gestionar contenido fácilmente sin necesidad de entrar en el código.Leer más sobre el editor visual

    ¿Cuál es el costo de usar Intlayer?

    Intlayer integra una selección de paquetes NPM gratuitos junto con un editor visual. Además, ofrece un CMS para externalizar contenido. Este CMS es gratuito, pero incluye características adicionales para los miembros de los planes Premium y Enterprise.Leer más sobre los planes de Intlayer

    ¿Puedo integrar Intlayer sobre soluciones existentes?

    Sí, Intlayer se puede integrar como un wrapper alrededor de i18next, next-intl, vue-i18next y más. Esto te permite automatizar tus traducciones y usar Intlayer sin tener que refactorizar tu código existente.

    ¿Qué es Intlayer?

    Intlayer es un paquete que te permite gestionar tu sitio web multilingüe. Proporciona un conjunto de herramientas y utilidades que facilitan la configuración de tu sitio web para el contenido multilingüe y la localización.Leer más sobre Intlayer

    ¿Cómo se integra Intlayer con Next.js?

    Intlayer se integra con Next.js para habilitar el renderizado del lado del servidor y la generación de sitios estáticos, haciendo más eficiente la entrega de contenido multilingüe.Leer más sobre la integración de Next.js

    ¿Cómo puedo contribuir a Intlayer?

    Puedes contribuir enviando pull requests o reportando problemas en el repositorio de GitHub.Leer más sobre cómo contribuir

    ¿Qué plataformas son compatibles con Intlayer?

    Intlayer está disponible para React (incluido Create React App), Vite con React, Next.js, Tanstack Start, Vue, Nuxt, Express, NestJS, Preact, y más. Esto garantiza una integración fluida con marcos de JavaScript modernos y entornos del lado del servidor.Leer más sobre las plataformas compatibles
    Leer todas las preguntas frecuentes