Traduza o seu site backend Fastify usando Intlayer | Internacionalização (i18n)

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

Veja a implementação do pacote no GitHub: https://github.com/aymericzip/intlayer/tree/main/packages/fastify-intlayer

Casos de Uso Práticos

• Exibição de Erros do Backend no Idioma do Usuário: Quando ocorre um erro, a exibição de 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 mostradas em componentes de front-end, como toasts ou modais.
• Recuperação de 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.
• Envio de E-mails Multilíngues: Sejam e-mails transacionais, campanhas de marketing ou notificações, o envio de e-mails no idioma do destinatário pode aumentar significativamente o engajamento e a eficácia.
• Notificações Push Multilíngues: Para aplicações móveis, o envio de 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 de sistema ou atualizações de interface de usuário, beneficia-se de estar no idioma do usuário, garantindo clareza e melhorando a experiência geral do usuário.

Ao internacionalizar o backend, a sua aplicação não apenas respeita as diferenças culturais, mas também se alinha melhor com as necessidades do mercado global, tornando-se um passo fundamental na escala de seus serviços em todo o mundo.

Primeiros Passos

Veja o Modelo de Aplicação no GitHub.

Instalação

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

npm install intlayer fastify-intlayernpx intlayer init

Configuração

Configure as definições de internacionalização criando um ficheiro 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;

Declare o seu Conteúdo

Crie e gira as suas declarações de conteúdo para armazenar traduções:

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

const indexContent = {
  key: "index",
  content: {
    exampleOfContent: t({
      en: "Example of returned content in English",
      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)",
    }),
  },
} satisfies Dictionary;

export default indexContent;

As suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que sejam incluídas no diretório contentDir (por padrão, ./src). E devem corresponder à extensão do ficheiro de declaração de conteúdo (por padrão, .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Para mais detalhes, consulte a documentação de declaração de conteúdo.

Configuração da Aplicação Fastify

Configure a sua aplicação Fastify para usar o fastify-intlayer:

import Fastify from "fastify";
import { intlayer, t, getDictionary, getIntlayer } from "fastify-intlayer";
import dictionaryExample from "./index.content";

const fastify = Fastify({ logger: true });

// Carregar plugin de internacionalização
await fastify.register(intlayer);

// Rotas
fastify.get("/t_example", async (_req, reply) => {
  return t({
    en: "Example of returned content in English",
    fr: "Exemple de contenu renvoyé en français",
    "es-ES": "Ejemplo de contenido devuelto en español (España)",
    "es-MX": "Ejemplo de conteúdo devuelto en español (México)",
  });
});

fastify.get("/getIntlayer_example", async (_req, reply) => {
  return getIntlayer("index").exampleOfContent;
});

fastify.get("/getDictionary_example", async (_req, reply) => {
  return getDictionary(dictionaryExample).exampleOfContent;
});

// Iniciar servidor
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Compatibilidade

fastify-intlayer é totalmente compatível com:

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

Também funciona perfeitamente com qualquer solução de internacionalização em diversos ambientes, incluindo browsers e solicitações de API. Pode personalizar o middleware para detetar a locale através de headers ou cookies:

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

const config: IntlayerConfig = {
  // ... Outras opções de configuração
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

Por padrão, o fastify-intlayer interpretará o header Accept-Language para determinar o idioma preferido do cliente.

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

Configurar TypeScript

O fastify-intlayer aproveita as robustas capacidades do TypeScript para melhorar o processo de internacionalização. A tipagem estática do TypeScript garante que cada chave de tradução seja considerada, reduzindo o risco de traduções em falta 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 ficheiro tsconfig.json.

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

Extensão do VS Code

Para melhorar a sua experiência de desenvolvimento com o Intlayer, pode instalar a extensão oficial Intlayer VS Code Extension.

Instalar a partir do VS Code Marketplace

Esta extensão fornece:

• Autocompletion para chaves de tradução.
• Deteção de erros em tempo real para traduções em falta.
• Inline previews do conteúdo traduzido.
• Ações rápidas para criar e atualizar traduções facilmente.

Para mais detalhes sobre como usar a extensão, consulte a documentação da Extensão Intlayer para VS Code.

Configuração de Git

Recomenda-se ignorar os ficheiros gerados pelo Intlayer. Isso permite-lhe evitar enviá-los para o seu repositório Git.

Para isso, pode adicionar as seguintes instruções ao seu ficheiro .gitignore:

# Ignorar os ficheiros gerados pelo Intlayer.intlayer