Por que você deve considerar o Intlayer?

O que é o Intlayer?

Intlayer é uma biblioteca de internacionalização projetada especificamente para desenvolvedores JavaScript. Ela permite a declaração do seu conteúdo em qualquer lugar do seu código. Ela converte declarações de conteúdo multilíngue em dicionários estruturados para integrar facilmente no seu código. Usando TypeScript, o Intlayer torna seu desenvolvimento mais robusto e eficiente.

Por que o Intlayer foi criado?

O Intlayer foi criado para resolver um problema comum que afeta todas as bibliotecas i18n comuns, como next-intl, react-i18next, react-intl, next-i18next, react-intl e vue-i18n.

Todas essas soluções adotam uma abordagem centralizada para listar e gerenciar seu conteúdo. Por exemplo:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Ou aqui usando namespaces:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Este tipo de arquitetura retarda o processo de desenvolvimento e torna a base de código mais complexa de manter por vários motivos:

1. Para cada novo componente criado, você deve:

   • Criar o novo recurso/namespace na pasta locales
   • Lembrar de importar o novo namespace em sua página
   • Traduzir seu conteúdo (muitas vezes feito manualmente por copiar/colar de provedores de IA)

2. Para qualquer alteração feita em seus componentes, você deve:

   • Procurar o recurso/namespace relacionado (longe do componente)
   • Traduzir seu conteúdo
   • Garantir que seu conteúdo esteja atualizado para cada localidade
   • Verificar se seu namespace não inclui chaves/valores não utilizados
   • Garantir que a estrutura de seus arquivos JSON seja a mesma para todas as localidades

Em projetos profissionais que utilizam essas soluções, plataformas de localização são frequentemente usadas para ajudar a gerenciar a tradução do seu conteúdo. No entanto, isso pode rapidamente se tornar dispendioso para grandes projetos.

Para resolver este problema, o Intlayer adota uma abordagem que delimita seu conteúdo por componente e mantém seu conteúdo próximo ao seu componente, como costumamos fazer com CSS (styled-components), tipos, documentação (storybook) ou testes unitários (jest).

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

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

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Esta abordagem permite que você:

1. Aumente a velocidade de desenvolvimento

   • Arquivos .content.{{ts|mjs|cjs|json}} podem ser criados usando uma extensão do VSCode
   • Ferramentas de IA de preenchimento automático em seu IDE (como o GitHub Copilot) podem ajudá-lo a declarar seu conteúdo, reduzindo o copiar/colar

2. Limpe sua base de código

   • Reduza a complexidade
   • Aumente a manutenibilidade

3. Duplique seus componentes e seus conteúdos relacionados com mais facilidade (Exemplo: componentes de login/registro, etc.)

   • Limitando o risco de impactar o conteúdo de outros componentes
   • Copiando/colando seu conteúdo de uma aplicação para outra sem dependências externas

4. Evite poluir sua base de código com chaves/valores não utilizados para componentes não utilizados

   • Se você não usar um componente, o Intlayer não importará seu conteúdo relacionado
   • Se você excluir um componente, será mais fácil lembrar de remover seu conteúdo relacionado, pois ele estará presente na mesma pasta

5. Reduza o custo de raciocínio para agentes de IA declararem seu conteúdo multilíngue

   • O agente de IA não terá que varrer toda a sua base de código para saber onde implementar seu conteúdo
   • As traduções podem ser feitas facilmente por ferramentas de IA de preenchimento automático em seu IDE (como o GitHub Copilot)

6. Otimize o desempenho de carregamento

   • Se um componente for carregado tardiamente (lazy-loaded), seu conteúdo relacionado será carregado ao mesmo tempo

Recursos adicionais do Intlayer

Mostrar todo o conteúdo da tabela

Mostrar todo o conteúdo da tabela

Abrir a tabela em um modal para ver todo o conteúdo claramente

Recurso	Descrição
	Suporte Multi-Framework O Intlayer é compatível com todos os principais frameworks e bibliotecas, incluindo Next.js, React, Vite, Vue.js, Nuxt, Preact, Express e muito mais.
	Gestão de Conteúdo Baseada em JavaScript Aproveite a flexibilidade do JavaScript para definir e gerenciar seu conteúdo com eficiência. - Declaração de conteúdo
	Compilador O Compilador Intlayer extrai automaticamente o conteúdo dos componentes e gera os arquivos de dicionário. - Compilador
	Arquivo de Declaração de Conteúdo por Localidade Acelere seu desenvolvimento declarando seu conteúdo uma vez, antes da geração automática. - Arquivo de Declaração de Conteúdo por Localidade
	Ambiente com Segurança de Tipos Utilize o TypeScript para garantir que suas definições de conteúdo e código estejam livres de erros, beneficiando-se também do preenchimento automático do IDE. - Configuração do TypeScript
	Configuração Simplificada Comece a rodar rapidamente com configuração mínima. Ajuste as configurações de internacionalização, roteamento, IA, build e tratamento de conteúdo com facilidade. - Explore a integração com Next.js
	Recuperação de Conteúdo Simplificada Não há necessidade de chamar sua função t para cada item de conteúdo. Recupere todo o seu conteúdo diretamente usando um único hook. - Integração com React
	Implementação Consistente de Server Components Perfeitamente adequado para server components do Next.js, use a mesma implementação para componentes client e server, sem necessidade de passar sua função t por cada server component. - Server Components
	Base de Código Organizada Mantenha sua base de código mais organizada: 1 componente = 1 dicionário na mesma pasta. Traduções próximas aos seus respectivos componentes aumentam a manutenibilidade e a clareza. - Como o Intlayer funciona
	Roteamento Avançado Suporte total ao roteamento de aplicativos, adaptando-se perfeitamente a estruturas complexas de aplicativos, para Next.js, React, Vite, Vue.js, etc. - Explore a integração com Next.js
	Suporte a Markdown Importe e interprete arquivos de localidade e Markdown remoto para conteúdo multilíngue, como políticas de privacidade, documentação, etc. Interprete e torne os metadados de Markdown acessíveis em seu código. - Arquivos de conteúdo
	Editor Visual e CMS Gratuitos Um editor visual e CMS gratuitos estão disponíveis para escritores de conteúdo, removendo a necessidade de uma plataforma de localização. Mantenha seu conteúdo sincronizado usando Git, ou externalize-o total ou parcialmente com o CMS. - Editor Intlayer - CMS Intlayer
	Conteúdo Tree-shakable Conteúdo tree-shakable, reduzindo o tamanho do bundle final. Carrega o conteúdo por componente, excluindo qualquer conteúdo não utilizado do seu bundle. Suporta carregamento tardio (lazy loading) para aumentar a eficiência de carregamento do app. - Otimização do build do app
	Renderização Estática Não bloqueia a Renderização Estática. - Integração com Next.js
	Tradução Baseada em IA Transforme seu site em 231 idiomas com apenas um clique usando as ferramentas avançadas de tradução baseadas em IA do Intlayer, usando seu próprio provedor de IA/chave de API. - Integração de CI/CD - CLI do Intlayer - Auto preenchimento
	Integração do Servidor MCP Fornece um servidor MCP (Model Context Protocol) para automação de IDE, permitindo uma gestão de conteúdo fluida e fluxos de trabalho de i18n diretamente no seu ambiente de desenvolvimento. - Servidor MCP
	Extensão para VSCode O Intlayer fornece uma extensão para VSCode para ajudá-lo a gerenciar seu conteúdo e traduções, criar seus dicionários, traduzir seu conteúdo e muito mais. - Extensão para VSCode
	Interoperabilidade Permite interoperabilidade com react-i18next, next-i18next, next-intl e react-intl. - Intlayer e react-intl - Intlayer e next-intl - Intlayer e next-i18next
Teste de Traduções Ausentes (CLI/CI)	✅ CLI: npx intlayer content test (auditoria compatível com CI)

Comparação do Intlayer com outras soluções

Estrelas do GitHub

As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.

Interoperabilidade

o intlayer também pode ajudar a gerenciar seus namespaces react-intl, react-i18next, next-intl, next-i18next e vue-i18n.

Usando o intlayer, você pode declarar seu conteúdo no formato da sua biblioteca i18n favorita, e o intlayer gerará seus namespaces no local de sua escolha (exemplo: /messages/{{locale}}/{{namespace}}.json).