Introdução à Internacionalização (i18n) com Intlayer e Express

express-intlayer é um middleware poderoso de internacionalização (i18n) para aplicações Express, projetado para tornar seus serviços de backend globalmente acessíveis, fornecendo respostas localizadas com base nas preferências do cliente.

Por que Internacionalizar Seu Backend?

Internacionalizar seu backend é essencial para atender a um público global de forma eficaz. Isso permite que sua aplicação entregue conteúdo e mensagens no idioma preferido de cada usuário. Essa capacidade melhora a experiência do usuário e amplia o alcance da sua aplicação, tornando-a mais acessível e relevante para pessoas de diferentes origens linguísticas.

Casos de Uso Práticos

• Exibir Erros do Backend no Idioma do Usuário: Quando ocorre um erro, exibir mensagens no idioma nativo do usuário melhora a compreensão e reduz a frustração. Isso é especialmente útil para mensagens de erro dinâmicas que podem ser exibidas em componentes de front-end, como toasts ou modais.

• Recuperar Conteúdo Multilíngue: Para aplicações que buscam conteúdo de um banco de dados, a internacionalização garante que você possa servir esse conteúdo em vários idiomas. Isso é crucial para plataformas como sites de e-commerce ou sistemas de gerenciamento de conteúdo que precisam exibir descrições de produtos, artigos e outros conteúdos no idioma preferido pelo usuário.

• Enviar E-mails Multilíngues: Seja para e-mails transacionais, campanhas de marketing ou notificações, enviar e-mails no idioma do destinatário pode aumentar significativamente o engajamento e a eficácia.

• Notificações Push Multilíngues: Para aplicativos móveis, enviar notificações push no idioma preferido do usuário pode melhorar a interação e a retenção. Esse toque pessoal pode fazer com que as notificações pareçam mais relevantes e acionáveis.

• Outras Comunicações: Qualquer forma de comunicação do backend, como mensagens SMS, alertas do sistema ou atualizações da interface do usuário, se beneficia por estar no idioma do usuário, garantindo clareza e melhorando a experiência geral do usuário.

Ao internacionalizar o backend, sua aplicação não apenas respeita as diferenças culturais, mas também se alinha melhor às necessidades do mercado global, tornando-se um passo fundamental para escalar seus serviços mundialmente.

Começando

Instalação

Para começar a usar o express-intlayer, instale o pacote usando npm:

npm install intlayer express-intlayer

Configuração

Configure as definições de internacionalização criando um arquivo intlayer.config.ts na raiz do seu projeto:

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

Configuração da Aplicação Express

Configure sua aplicação Express para usar o express-intlayer:

// Importações necessáriasimport express, { type Express } from "express";import { intlayer, t } from "express-intlayer";const app: Express = express();// Carregar o manipulador de requisições de internacionalizaçãoapp.use(intlayer());// Rotasapp.get("/", (_req, res) => {  res.send(    t({      en: "Exemplo de conteúdo retornado em inglês",      fr: "Exemple de contenu renvoyé en français",      "es-ES": "Ejemplo de contenido devuelto en español (España)",      "es-MX": "Ejemplo de contenido devuelto en español (México)",    })  );});// Iniciar servidorapp.listen(3000, () => console.log(`Ouvindo na porta 3000`));

Compatibilidade

express-intlayer é totalmente compatível com:

• react-intlayer para aplicações React
• next-intlayer para aplicações Next.js
• vite-intlayer para aplicações Vite

Ele também funciona perfeitamente com qualquer solução de internacionalização em diversos ambientes, incluindo navegadores e requisições de API. Você pode personalizar o middleware para detectar o idioma através de cabeçalhos ou cookies:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... Outras opções de configuração  middleware: {    headerName: "meu-cabecalho-locale",    cookieName: "meu-cookie-locale",  },};export default config;

Por padrão, o express-intlayer interpretará o cabeçalho Accept-Language para determinar o idioma preferido do cliente.

Para mais informações sobre configuração e tópicos avançados, visite nossa documentação.

Configurar TypeScript

O express-intlayer aproveita as capacidades robustas do TypeScript para melhorar o processo de internacionalização. A tipagem estática do TypeScript garante que cada chave de tradução seja contabilizada, reduzindo o risco de traduções ausentes e melhorando a manutenção.

Certifique-se de que os tipos gerados automaticamente (por padrão em ./types/intlayer.d.ts) estão incluídos no seu arquivo tsconfig.json.

{  // ... Suas configurações existentes do TypeScript  "include": [    // ... Suas configurações existentes do TypeScript    ".intlayer/**/*.ts", // Incluir os tipos gerados automaticamente  ],}

Configuração do Git

Recomenda-se ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam enviados para o seu repositório Git.

Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo .gitignore:

# Ignorar os arquivos gerados pelo Intlayer.intlayer