i18n por componente

Traducción impulsada por IA. Editor visual. CMS multilingüe.

Docs • Next.js • React + Vite • CMS • Discord

¿Qué es Intlayer?

La mayoría de las bibliotecas i18n son demasiado complejas, demasiado rígidas o no están diseñadas para marcos modernos.

Intlayer es una solución i18n moderna para aplicaciones web y móviles.
Es independiente del marco, impulsado por IA, e incluye un CMS y editor visual gratuitos.

Con archivos de contenido por localidad, autocompletado de TypeScript, diccionarios tree-shakable e integración CI/CD, Intlayer hace que la internacionalización sea más rápida, más limpia y más inteligente.

Beneficios clave de Intlayer:

Característica	Descripción
	Soporte Multi-Frameworks Intlayer es compatible con todos los principales marcos y bibliotecas, incluidos Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.
	Gestión de contenido impulsada por JavaScript Aproveche la flexibilidad de JavaScript para definir y gestionar su contenido de manera eficiente. - Declaración de contenido
	Archivo de declaración de contenido por localidad Acelere su desarrollo declarando su contenido una vez, antes de la generación automática. - Archivo de declaración de contenido por localidad
	Compilador El compilador Intlayer extrae automáticamente el contenido de los componentes y genera los archivos de diccionario. - Compilador
	Entorno seguro para tipos Aproveche TypeScript para garantizar que sus definiciones de contenido y código estén libres de errores, mientras se beneficia del autocompletado del IDE. - Configuración de TypeScript
	Configuración simplificada Póngase en marcha rápidamente con una configuración mínima. Ajuste configuraciones para internacionalización, enrutamiento, IA, compilación y manejo de contenido con facilidad. - Explorar la integración con Next.js
	Recuperación de contenido simplificada No es necesario llamar a su función t para cada elemento de contenido. Recupere todo su contenido directamente utilizando un solo hook. - Integración con React
	Implementación consistente de componentes de servidor Perfectamente adecuado para componentes de servidor de Next.js, use la misma implementación tanto para componentes de cliente como de servidor, sin necesidad de pasar su función t por cada componente de servidor. - Componentes de servidor
	Base de código organizada Mantenga su base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Traducciones cerca de sus respectivos componentes, mejoran la mantenibilidad y claridad. - Cómo funciona Intlayer
	Enrutamiento mejorado Soporte completo de 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 para Markdown Importe e interprete archivos locales y Markdown remoto para contenido multilingüe como las políticas de privacidad, documentación, etc. Interprete y haga accesibles los metadatos de Markdown en su código. - Archivos de contenido
	Editor visual y CMS gratuitos Un editor visual y un CMS gratuitos están disponibles para los redactores de contenido, eliminando la necesidad de una plataforma de localización. Mantenga su contenido sincronizado usando Git, o externalícelo total o parcialmente con el CMS. - Editor Intlayer - CMS Intlayer
	Contenido tree-shakable Contenido tree-shakable, que reduce el tamaño del bundle final. Carga el contenido por componente, excluyendo cualquier contenido no utilizado de su paquete. Admite la carga diferida (lazy loading) para mejorar la eficiencia de carga de la aplicación. - Optimización de la compilación de la aplicación
	Renderizado estático No bloquea el renderizado estático. - Integración con Next.js
	Traducción impulsada por IA Transforme su sitio web a 231 idiomas con un solo clic utilizando las avanzadas herramientas de traducción impulsadas por IA de Intlayer con su propio proveedor de IA / clave API. - Integración CI/CD - CLI de Intlayer - Llenado 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 su entorno de desarrollo. - Servidor MCP
	Extensión de VSCode Intlayer proporciona una extensión para VSCode para ayudarle a gestionar su contenido y traducciones, construir sus diccionarios, traducir su contenido y más. - Extensión de VSCode
	Interoperabilidad Permitir la interoperabilidad con react-i18next, next-i18next, next-intl, react-intl, vue-i18n. - Intlayer y react-intl - Intlayer y next-intl - Intlayer y next-i18next - Intlayer y vue-i18n - Adaptadores de compatibilidad de Intlayer
	Rendimiento y Benchmark Utiliza tree-shaking avanzado y carga dinámica para mejorar el rendimiento y mantener la solución lo más ligera posible. - Rendimiento y Benchmark

📦 Instalación

Comience su viaje con Intlayer hoy y experimente un enfoque más fluido y potente para la internacionalización.

npm install intlayer react-intlayer

yarn add intlayer react-intlayer

pnpm add intlayer react-intlayer

bun add intlayer react-intlayer

⚡ Inicio rápido (Next.js)

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

Obtenga la guía completa →

🎥 Tutorial en vivo en YouTube

Tabla de contenidos

Explore nuestra documentación completa para comenzar con Intlayer y aprender cómo integrarlo en sus proyectos.

📘 Comenzar

• ¿Por qué Intlayer?
• Introducción

⚙️ Concepto

• Cómo funciona Intlayer
• Configuración
• CLI de Intlayer
• Compilador
• Editor de Intlayer
• CMS de Intlayer
• Diccionario
  • Archivo de declaración de contenido por localidad
  • Traducción
  • Enumeración
  • Condición
  • Anidamiento
  • Markdown
  • Recuperación de funciones
  • Inserción
  • Archivo

🌐 Entorno

• Intlayer con Next.js 16
  • Next.js 15
  • Next.js 14 (App Router)
  • Next.js Page Router
  • Next.js usando el Compilador
• React CRA
• Vite + React
• Vite + React usando el Compilador
• React-router-v7
• Remix 3
• Tanstack start
  • Solid
• Astro
  • React
  • Vue
  • Svelte
  • Solid
  • Lit
• React Native
• Vite + Svelte
• SvelteKit
• Vite + Preact
• Vite + Vue
• Vite + Nuxt
• Vite + Solid
• Solid Start
• Angular
• Backend
  • Express
  • NestJS
  • Fastify
  • AdonisJS
  • Hono
  • Elysia

📊 Benchmark

• Next.js
• TanStack Start
• Vue
• Solid
• Svelte

📰 Blog

• Qué es i18n ?
• i18n y SEO
• Intlayer e i18next
• Intlayer y react-intl
• Intlayer y next-intl

Sistema de gestión de contenidos multilingüe

Más que una biblioteca i18n, Intlayer es un sistema de gestión de contenidos multilingüe completo. Un CMS completo está disponible de forma gratuita en app.intlayer.org.

Intlayer conecta a desarrolladores, redactores y agentes de IA en un único flujo de trabajo para crear y mantener sitios web multilingües sin esfuerzo. Intlayer reemplaza la siguiente pila en una sola solución:

• Soluciones i18n (por ejemplo, i18next, next-intl, vue-i18n)
• TMSs (Sistemas de Gestión de Traducciones) (por ejemplo, Crowdin, Phrase, Lokalise)
• CMSs Headless (por ejemplo, Contentful, Strapi, Sanity)

🌐 Readme en otros idiomas

English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe

🤝 Comunidad

Intlayer se construye con y para la comunidad, ¡y nos encantaría recibir tus comentarios!

• ¿Tienes alguna sugerencia? Abre un issue
• ¿Encontraste un error o una mejora? Envía un PR
• ¿Necesitas ayuda o quieres conectarte? Únete a nuestro Discord

También puedes seguirnos en:

Contribución

Para pautas más detalladas sobre cómo contribuir a este proyecto, consulta el archivo CONTRIBUTING.md. Contiene información esencial sobre nuestro proceso de desarrollo, convenciones de mensajes de commit y procedimientos de lanzamiento. ¡Tus contribuciones son valiosas para nosotros y apreciamos tus esfuerzos para mejorar el proyecto!

Contribuye a través de GitHub, GitLab o Bitbucket.

Gracias por el apoyo

Si te gusta Intlayer, danos una ⭐ en GitHub. ¡Ayuda a otros a descubrir el proyecto! Descubre por qué las estrellas de GitHub importan.