Como automatizar suas traduções JSON do i18next usando Intlayer

O que é o Intlayer?

Intlayer é uma biblioteca inovadora e de código aberto para internacionalização, projetada para superar as limitações das soluções tradicionais de i18n. Ela oferece uma abordagem moderna para o gerenciamento de conteúdo em aplicações JavaScript.

Veja uma comparação concreta com o i18next em nosso post no blog next-i18next vs. next-intl vs. Intlayer.

Por que combinar Intlayer com i18next?

Embora o Intlayer forneça uma excelente solução de i18n independente (veja nosso guia de integração com Next.js), você pode querer combiná-lo com o i18next por vários motivos:

1. Base de código existente: Você já possui uma implementação estabelecida do i18next e deseja migrar gradualmente para a melhor experiência de desenvolvedor do Intlayer.
2. Requisitos legados: Seu projeto requer compatibilidade com plugins ou fluxos de trabalho existentes do i18next.
3. Familiaridade da equipe: Sua equipe está confortável com o i18next, mas deseja um melhor gerenciamento de conteúdo.

Para isso, o Intlayer pode ser implementado como um adaptador para o i18next, ajudando a automatizar suas traduções JSON em pipelines CLI ou CI/CD, testar suas traduções e muito mais.

Este guia mostra como aproveitar o sistema superior de declaração de conteúdo do Intlayer enquanto mantém a compatibilidade com o i18next.

Índice

Guia passo a passo para configurar o Intlayer com i18next

Passo 1: Instalar dependências

Instale os pacotes necessários:

npm install intlayer @intlayer/sync-json-plugin

Descrição dos pacotes:

• intlayer: Biblioteca principal para gerenciamento de internacionalização, declaração de conteúdo e construção
• @intlayer/sync-json-plugin: Plugin para exportar declarações de conteúdo do Intlayer para o formato JSON compatível com i18next

Passo 2: Implemente o plugin Intlayer para encapsular o JSON

Crie um arquivo de configuração do Intlayer para definir os locais suportados:

Se você também quiser exportar dicionários JSON para o i18next, adicione o plugin syncJSON:

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,    }),  ],};export default config;

O plugin syncJSON irá automaticamente encapsular o JSON. Ele irá ler e escrever os arquivos JSON sem alterar a arquitetura do conteúdo.

Se você quiser fazer coexistir esse JSON com arquivos de declaração de conteúdo do Intlayer (.content), o Intlayer procederá da seguinte forma:

1. carregar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo e transformá-los em um dicionário Intlayer.2. se houver conflitos entre o JSON e os arquivos de declaração de conteúdo, o Intlayer irá proceder à mesclagem de todos esses dicionários. Dependendo da prioridade dos plugins e da do arquivo de declaração de conteúdo (todos são configuráveis).

Se alterações forem feitas usando o CLI para traduzir o JSON, ou usando o CMS, o Intlayer atualizará o arquivo JSON com as novas traduções.

Configuração do Git

É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer:

# Ignorar arquivos gerados pelo Intlayer.intlayer

Esses arquivos podem ser regenerados durante o processo de build e não precisam ser commitados no controle de versão.

Extensão VS Code

Para uma melhor experiência de desenvolvimento, instale a extensão oficial Intlayer VS Code Extension:

Instalar no VS Code Marketplace

Instalar a partir do Marketplace do VS Code