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

Intlayer también proporciona un editor visual opcional que te permite editar y gestionar tu contenido fácilmente. 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>;
};

Características Principales

Intlayer ofrece una variedad de características diseñadas para satisfacer 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 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 detalladas en la Guía de Configuración.
• Herramientas Avanzadas de CLI: Gestiona tus proyectos de manera eficiente usando la interfaz de línea de comandos de Intlayer. Explora las capacidades en la Documentación de Herramientas CLI.

Conceptos Básicos

Diccionario

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

• Comenzando
  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
  Gestiona fácilmente conjuntos de datos repetidos o fijos en varios idiomas.

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

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

• Obtención de Funciones
  Aprende cómo obtener contenido dinámicamente con lógica personalizada para adaptarse al flujo de trabajo de tu proyecto.

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

• Incrustaciones de Archivos
  Descubre cómo incrustar 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 construido Intlayer pensando en la flexibilidad, ofreciendo una integración perfecta con los frameworks y herramientas de construcción más populares:

• 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 Native y Expo
• Intlayer con Lynx y React
• Intlayer con Express

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

Contribuciones y Retroalimentación

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 mismo. Experimenta un enfoque robusto y optimizado para la internacionalización que mantiene tu contenido organizado y a tu equipo más productivo.