Documentación de Intlayer

¡Bienvenido a la documentación oficial de Intlayer! Aquí encontrarás todo lo que necesitas para integrar, configurar y dominar Intlayer para todas tus necesidades de internacionalización (i18n), ya sea que trabajes con Next.js, React, Vite, Express u otro entorno de JavaScript.

Introducción

¿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 la declaración 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 robusto y eficiente.

Intlayer también proporciona un editor visual opcional que te permite editar y gestionar fácilmente tu contenido. Este editor es particularmente útil para desarrolladores que prefieren una interfaz visual para la gestión de contenido, o para equipos que generan contenido sin tener que preocuparse por el código.

Ejemplo de uso

.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

¿Por qué Intlayer en lugar de otras alternativas?

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

Características principales

Intlayer ofrece una variedad de características adaptadas a las necesidades del desarrollo web moderno. A continuación se presentan las características clave, con enlaces a la documentación detallada de cada una:

• Soporte de internacionalización: Mejora el alcance global de tu aplicación con soporte integrado para la internacionalización.
• Editor Visual: Mejora tu flujo de trabajo de desarrollo con plugins de editor diseñados para Intlayer. Consulta la Guía del Editor Visual.
• Flexibilidad de configuración: Personaliza tu configuración con amplias opciones de configuración detalladas en la Guía de Configuración.
• Herramientas avanzadas de CLI: Administra tus proyectos de manera eficiente utilizando la interfaz de línea de comandos de Intlayer. Explora las capacidades en la Documentación de herramientas CLI.

Conceptos clave

Diccionario

Organiza tu contenido multilingüe cerca de tu código para mantener todo consistente y mantenible.

• Comenzar
  Aprende los conceptos básicos para declarar tu contenido en Intlayer.

• Traducción
  Comprende cómo se generan, almacenan y utilizan las traducciones en tu aplicación.

• Enumeración
  Administra fácilmente conjuntos de datos repetidos o fijos en varios idiomas.

• Condición
  Aprende a usar la lógica condicional en Intlayer para crear contenido dinámico.

• Inserción
  Descubre cómo insertar valores en una cadena de texto utilizando marcadores de posición de inserción.

• Recuperación de Funciones
  Observa cómo recuperar contenido dinámicamente con lógica personalizada para que coincida con el flujo de trabajo de tu proyecto.

• Markdown
  Aprende a usar Markdown en Intlayer para crear contenido enriquecido.

• Integraciones de archivos
  Descubre cómo integrar archivos externos en Intlayer para usarlos en el editor de contenido.

• Anidamiento
  Comprende cómo anidar contenido en Intlayer para crear estructuras complejas.

Entornos e Integraciones

Hemos creado Intlayer pensando en la flexibilidad, ofreciendo una integración perfecta en frameworks y herramientas de construcción populares:

• Intlayer con Next.js 16
• Intlayer con Next.js 15
• Intlayer con Next.js 14 (App Router)
• Intlayer con Next.js Page Router
• Intlayer con React CRA
• Intlayer con Vite + React
• Intlayer con React Router v7
• Intlayer con Tanstack Start
• Intlayer con React Native y Expo
• Intlayer con Lynx y React
• Intlayer con Vite + Preact
• Intlayer con Vite + Vue
• Intlayer con Nuxt
• Intlayer con Vite + Svelte
• Intlayer con SvelteKit
• Intlayer con Express
• Intlayer con NestJS
• Intlayer con Hono
• Intlayer con Angular

Cada guía de integración incluye las mejores prácticas para utilizar las características de Intlayer, como el renderizado del lado del servidor, el enrutamiento dinámico o el renderizado del lado del cliente, de modo que puedas mantener una aplicación rápida, optimizada para SEO y altamente escalable.

Contribución y comentarios

Valoramos el poder del código abierto y el desarrollo impulsado por la comunidad. Si deseas proponer mejoras, agregar una nueva guía o corregir cualquier problema en nuestra documentación, no dudes en enviar un Pull Request o abrir un issue en nuestro repositorio de GitHub.

¿Listo para traducir tu aplicación de manera más rápida y eficiente? Sumérgete en nuestra documentación para comenzar a usar Intlayer hoy. Experimenta un enfoque robusto y optimizado para la internacionalización que mantiene tu contenido organizado y a tu equipo más productivo.

Preguntas frecuentes