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. 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│   ├── fr.json│   └── es.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

Esse tipo de arquitetura desacelera o processo de desenvolvimento e torna a base de código mais complexa de manter por várias razões:

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

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

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

   • Procurar o recurso/namespace relacionado (longe do componente)
   • Traduzir seu conteúdo
   • Garantir que seu conteúdo esteja atualizado para qualquer localidade
   • Verificar se seu namespace não inclui chaves/valores não usados
   • Garantir que a estrutura dos 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 caro para projetos grandes.

Para resolver esse problema, o Intlayer adota uma abordagem que delimita seu conteúdo por componente e mantém seu conteúdo próximo ao seu componente, assim como frequentemente fazemos 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 autocompletar com IA no seu IDE (como o GitHub Copilot) podem ajudar a declarar seu conteúdo, reduzindo copiar/colar

2. Reduzir a complexidade da sua base de código

3. Aumentar a manutenibilidade da sua base de código

4. Duplicar 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

5. Evitar poluir sua base de código com chaves/valores não usados para componentes não utilizados

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

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

   • O agente de IA não precisará escanear toda a sua base de código para saber onde implementar seu conteúdo
   • As traduções podem ser facilmente feitas por ferramentas de autocompletar com IA no seu IDE (como o GitHub Copilot)

7. Otimizar o desempenho de carregamento

   • Se um componente for carregado de forma preguiçosa (lazy-loaded), seu conteúdo relacionado será carregado ao mesmo tempo

Recursos adicionais do Intlayer

Move

Recurso	Descrição
	Suporte Multiplataformas O Intlayer é compatível com todos os principais frameworks e bibliotecas, incluindo Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, e mais.
	Gestão de Conteúdo com JavaScript Aproveite a flexibilidade do JavaScript para definir e gerir o seu conteúdo de forma eficiente. - Declaração de conteúdo
	Ficheiro de Declaração de Conteúdo por Localidade Acelere o seu desenvolvimento declarando o seu conteúdo uma vez, antes da geração automática. - Ficheiro de Declaração de Conteúdo por Localidade
	Ambiente com Tipagem Segura Aproveite o TypeScript para garantir que suas definições de conteúdo e código estejam livres de erros, além de beneficiar-se do autocompletar do IDE. - Configuração do TypeScript
	Configuração Simplificada Comece rapidamente com configuração mínima. Ajuste facilmente as configurações para internacionalização, roteamento, IA, build e gerenciamento de conteúdo. - Explore a integração com Next.js
	Recuperação de Conteúdo Simplificada Não é necessário chamar sua função t para cada pedaço de conteúdo. Recupere todo o seu conteúdo diretamente usando um único hook. - Integração com React
	Implementação Consistente de Componentes no Servidor Perfeitamente adequado para componentes de servidor Next.js, use a mesma implementação para componentes cliente e servidor, sem necessidade de passar sua função t por cada componente de servidor. - Componentes de Servidor
	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 clareza. - Como o Intlayer funciona
	Roteamento Aprimorado Suporte completo ao roteamento de aplicativos, adaptando-se perfeitamente a estruturas complexas de aplicações, 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 do Markdown acessíveis no seu código. - Arquivos de conteúdo
	Editor Visual e CMS Gratuitos Um editor visual gratuito e CMS estão disponíveis para escritores de conteúdo, eliminando 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 pacote final. Carrega o conteúdo por componente, excluindo qualquer conteúdo não utilizado do seu pacote. Suporta carregamento preguiçoso para melhorar a eficiência do carregamento do aplicativo. - Otimização da construção do aplicativo
	Renderização Estática Não bloqueia a Renderização Estática. - Integração Next.js
	Tradução com IA Transforme seu site em 231 idiomas com apenas um clique usando as avançadas ferramentas de tradução com IA da Intlayer, utilizando seu próprio provedor de IA/chave API. - Integração CI/CD - CLI Intlayer - Preenchimento automático
	Integração do Servidor MCP Fornece um servidor MCP (Model Context Protocol) para automação de IDE, permitindo um gerenciamento de conteúdo e fluxos de trabalho i18n contínuos diretamente no seu ambiente de desenvolvimento. - Servidor MCP
	Extensão VSCode O Intlayer fornece uma extensão para VSCode para ajudar você a gerenciar seu conteúdo e traduções, construir seus dicionários, traduzir seu conteúdo e muito mais. - Extensão 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

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

Histórico do Documento