Creación:2024-03-07Última actualización:2025-10-03

Ver la plantilla de aplicación en GitHub

Esta página tiene una plantilla de aplicación disponible.

Referencia esta doc a tu asistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Añadir MCP Server a tu asistente de IA

Al integrar el servidor MCP Intlayer a tu asistente de IA, puedes recuperar todos los documentos directamente desde ChatGPT, DeepSeek, Cursor, VSCode, etc.

Ver la documentación del servidor MCP

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Traduce tu Astro con Intlayer | Internacionalización (i18n)

Consulta el Plantilla de Aplicación en GitHub.

¿Qué es Intlayer?

Intlayer es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.

Con Intlayer, puedes:

Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
Localizar dinámicamente metadatos, rutas y contenido.
Garantizar soporte para TypeScript con tipos autogenerados, mejorando la autocompletación y la detección de errores.
Beneficiarte de funciones avanzadas, como la detección y el cambio dinámico de locales.

Guía paso a paso para configurar Intlayer en Astro

Paso 1: Instalar dependencias

Instala los paquetes necesarios usando tu gestor de paquetes:

npm install intlayer astro-intlayer# Opcional: agregar soporte para React islandnpm install react react-dom react-intlayer @astrojs/react

intlayer El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, declaración de contenido, transpilación y comandos CLI.
astro-intlayer Incluye el plugin de integración de Astro para integrar Intlayer con el empaquetador Vite, así como middleware para detectar la configuración regional preferida del usuario, gestionar cookies y manejar la redirección de URL.

Paso 2: Configuración de tu proyecto

Crea un archivo de configuración para configurar los idiomas de tu aplicación:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Tus otros locales    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Tus otros locales    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

A través de este archivo de configuración, puedes configurar URLs localizadas, redirección mediante middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola y más. Para una lista completa de los parámetros disponibles, consulta la documentación de configuración.

Paso 3: Integra Intlayer en tu configuración de Astro

Agrega el plugin intlayer en tu configuración.

astro.config.ts

Copiar código

Copiar el código al portapapeles

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

El plugin de integración intlayer() para Astro se utiliza para integrar Intlayer con Astro. Asegura la construcción de archivos de declaración de contenido y los supervisa en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Astro. Además, proporciona alias para optimizar el rendimiento.

Paso 4: Declara tu contenido

Crea y administra tus declaraciones de contenido para almacenar traducciones:

src/app.content.tsx

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;export default appContent;

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;export default appContent;

Tus declaraciones de contenido pueden definirse en cualquier parte de tu aplicación siempre que se incluyan en el directorio contentDir (por defecto, ./src). Y coincidan con la extensión de archivo de declaración de contenido (por defecto, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Para más detalles, consulta la documentación de declaración de contenido.

Paso 5: Usa tu contenido en Astro

Puedes consumir diccionarios directamente en archivos .astro usando los helpers principales exportados por intlayer.

src/pages/index.astro

Copiar código

Copiar el código al portapapeles

<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>  </head>  <body>    <h1>{title}</h1>  </body></html>

<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>  </head>  <body>    <h1>{title}</h1>  </body></html>

Paso 6: Enrutamiento localizado

Crea un segmento de ruta dinámica para servir páginas localizadas, por ejemplo src/pages/[locale]/index.astro:

src/pages/[locale]/index.astro

Copiar código

Copiar el código al portapapeles

<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

La integración de Astro añade un middleware de Vite durante el desarrollo que ayuda con el enrutamiento consciente del locale y las definiciones de entorno. Aún puedes enlazar entre locales usando tu propia lógica o funciones utilitarias como getLocalizedUrl de intlayer.

Paso 7: Continúa usando tu framework favorito

Continúa usando tu framework favorito para construir tu aplicación.

Intlayer + React: Intlayer con React
Intlayer + Vue: Intlayer con Vue
Intlayer + Svelte: Intlayer con Svelte
Intlayer + Solid: Intlayer con Solid
Intlayer + Preact: Intlayer con Preact

Configurar TypeScript

Intlayer utiliza la ampliación de módulos para aprovechar los beneficios de TypeScript y fortalecer tu base de código.

texto alternativo

Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.

tsconfig.json

Copiar código

Copiar el código al portapapeles

{  // ... Tus configuraciones existentes de TypeScript  "include": [    // ... Tus configuraciones existentes de TypeScript    ".intlayer/**/*.ts", // Incluir los tipos autogenerados  ],}

{  // ... Tus configuraciones existentes de TypeScript  "include": [    // ... Tus configuraciones existentes de TypeScript    ".intlayer/**/*.ts", // Incluir los tipos autogenerados  ],}

Configuración de Git

Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar comprometerlos en tu repositorio Git.

Para hacer esto, puedes agregar las siguientes instrucciones a tu archivo .gitignore:

# Ignorar los archivos generados por Intlayer.intlayer

Extensión de VS Code

Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la Extensión oficial de Intlayer para VS Code.

Instalar desde el Marketplace de VS Code

Esta extensión proporciona:

Autocompletado para las claves de traducción.
Detección de errores en tiempo real para traducciones faltantes.
Vistas previas en línea del contenido traducido.
Acciones rápidas para crear y actualizar traducciones fácilmente.

Para más detalles sobre cómo usar la extensión, consulta la documentación de la Extensión de Intlayer para VS Code.

Ir Más Allá

Para ir más allá, puedes implementar el editor visual o externalizar tu contenido usando el CMS.

Tanstack Start

React CRA