Traduce tu Nest backend con Intlayer | Internacionalización (i18n)

express-intlayer es un middleware poderoso de internacionalización (i18n) para aplicaciones Express, diseñado para hacer que tus servicios backend sean accesibles globalmente proporcionando respuestas localizadas basadas en las preferencias del cliente. Dado que NestJS está construido sobre Express, puedes integrar sin problemas express-intlayer en tus aplicaciones NestJS para manejar contenido multilingüe de manera efectiva.

Casos de Uso Prácticos

• Mostrar Errores del Backend en el Idioma del Usuario: Cuando ocurre un error, mostrar mensajes en el idioma nativo del usuario mejora la comprensión y reduce la frustración. Esto es especialmente útil para mensajes de error dinámicos que podrían mostrarse en componentes front-end como toasts o modals.

• Recuperación de Contenido Multilingüe: Para aplicaciones que obtienen contenido de una base de datos, la internacionalización garantiza que pueda servir este contenido en múltiples idiomas. Esto es crucial para plataformas como sitios de comercio electrónico o sistemas de gestión de contenido que necesitan mostrar descripciones de productos, artículos y otro contenido en el idioma preferido por el usuario.

• Envío de Correos Electrónicos Multilingües: Ya sea correos transaccionales, campañas de marketing o notificaciones, enviar correos electrónicos en el idioma del destinatario puede aumentar significativamente la participación y la efectividad.

• Notificaciones Push Multilingües: Para aplicaciones móviles, enviar notificaciones push en el idioma preferido del usuario puede mejorar la interacción y retención. Este toque personal puede hacer que las notificaciones se sientan más relevantes y accionables.

• Otras comunicaciones: Cualquier forma de comunicación desde el backend, como mensajes SMS, alertas del sistema o actualizaciones de la interfaz de usuario, se beneficia de estar en el idioma del usuario, asegurando claridad y mejorando la experiencia general del usuario.

Al internacionalizar el backend, tu aplicación no solo respeta las diferencias culturales sino que también se alinea mejor con las necesidades del mercado global, lo que la convierte en un paso clave para escalar tus servicios en todo el mundo.

Comenzando

Crear un nuevo proyecto NestJS

npm install -g @nestjs/cli
nest new my-nest-app

Instalación

Para comenzar a usar express-intlayer, instale el paquete usando npm:

npx intlayer init --interactive

la bandera --interactive es opcional. Usa intlayer-cli init si eres un agente de IA.

Este comando detectará su entorno e instalará los paquetes necesarios. Por ejemplo:

npm install intlayer express-intlayer

Configurar tsconfig.json

Para usar Intlayer con TypeScript, asegúrese de que su tsconfig.json esté configurado para soportar módulos ES. Puede hacerlo estableciendo las opciones module y moduleResolution en nodenext.

{
  compilerOptions: {
    module: "nodenext",
    moduleResolution: "nodenext",
    // ... otras opciones
  },
}

Configuración

Configure los ajustes de internacionalización creando un archivo intlayer.config.ts en la raíz de su proyecto:

import { Locales, type IntlayerConfig } from "intlayer";

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

export default config;

Declare Su Contenido

Cree y gestione sus declaraciones de contenido para almacenar traducciones:

Tus declaraciones de contenido pueden definirse en cualquier parte de tu aplicación siempre que estén incluidas 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,cjs,md,mdx,yaml,yml}).

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

Configuración del Middleware de Express

Integrar el middleware express-intlayer en tu aplicación NestJS para manejar la internacionalización:

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { intlayer } from "express-intlayer";

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(intlayer()).forRoutes("*"); // Aplicar a todas las rutas
  }
}

Usar Traducciones en Tus Servicios o Controladores

Ahora puedes usar la función getIntlayer para acceder a las traducciones en tus servicios o controladores:

import { Injectable } from "@nestjs/common";
import { getIntlayer } from "express-intlayer";

@Injectable()
export class AppService {
  getHello(): string {
    return getIntlayer("app").greet; // Obtener saludo desde las traducciones
  }
}

Compatibilidad

express-intlayer es totalmente compatible con:

• react-intlayer para aplicaciones React
• next-intlayer para aplicaciones Next.js
• vite-intlayer para aplicaciones Vite

También funciona sin problemas con cualquier solución de internacionalización en diversos entornos, incluyendo navegadores y solicitudes API. Puedes personalizar el middleware para detectar la configuración regional a través de encabezados o cookies:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Otras opciones de configuración
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

Por defecto, express-intlayer interpretará el encabezado Accept-Language para determinar el idioma preferido del cliente.

Para más información sobre configuración y temas avanzados, visita nuestra documentación.

Configurar TypeScript

express-intlayer aprovecha las robustas capacidades de TypeScript para mejorar el proceso de internacionalización. La tipificación estática de TypeScript asegura que cada clave de traducción esté contemplada, reduciendo el riesgo de traducciones faltantes y mejorando el mantenimiento.

Asegúrate de que los tipos autogenerados (por defecto en ./types/intlayer.d.ts) estén incluidos en tu archivo tsconfig.json.

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

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.
• Previsualizaciones 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.

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 añadir las siguientes instrucciones a tu archivo .gitignore:

# Ignorar los archivos generados por Intlayer
.intlayer

Preguntas frecuentes