i18n por componente

    Type-Safe. Traduza com IA. Edite visualmente.

    Defina traduções ao lado dos componentes para acelerar seu desenvolvimento. Mantenha seu bundle tão leve quanto deve ser. Convide editores pelo CMS. Toda contribuição é realmente apreciada.

    npm install intlayer

    Disponível para

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    Experimente gratuitamente no playground.Ir au playground
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    Melhore a manutenção do código mantendo suas definições de conteúdo próximas aos seus componentes. Reduza a redundância, melhore a clareza e simplifique as atualizações com uma abordagem estruturada que torna seu código mais fácil de gerenciar e dimensionar ao longo do tempo.

    Extraia seu conteúdo instantaneamente com o Compilador Intlayer. Ele gerará automaticamente os arquivos de dicionário necessários para seu conteúdo para internacionalizar sua aplicação em um segundo.

    Aproveite o editor visual gratuito para construir e gerenciar seu site sem esforço. Crie, edite e organize componentes e páginas sem tocar no código, facilitando a colaboração entre gestores de conteúdo e desenvolvedores.

    Expanda seu alcance com suporte de tradução integrado. Traduza facilmente seu conteúdo usando uma interface intuitiva, garantindo experiências multilíngues contínuas para seus usuários sem a complicação de gerenciar várias versões de conteúdo manualmente.

    Use a CLI da Intlayer para testar e preencher seu conteúdo com IA, garantindo que todas as traduções estejam completas e precisas.

    Por que escolher o Intlayer?

    Grátis e Código Aberto

    O Intlayer é gratuito e de código aberto, permitindo que você o use gratuitamente e contribua para atendê-lo às suas necessidades.

    Gerenciamento de Conteúdo Impulsionado por JavaScript

    Aproveite a flexibilidade do JavaScript para definir e gerenciar seu conteúdo de forma eficiente.

    Ambiente Type-Safe

    Aproveite o TypeScript para garantir que todas as suas definições de conteúdo sejam precisas e sem erros.

    Declaração no nível do componente

    Mantenha suas traduções perto de seus respectivos componentes, melhorando a manutenibilidade e a clareza.

    Configuração Simplificada

    Comece a funcionar rapidamente com configuração mínima, especialmente otimizada para projetos Next.js.

    CMS Integrado

    Edite seu conteúdo em seu site com um CMS integrado diretamente em seu site. Aumente a geração de conteúdo graças à IA.

    Tecnologia

    Carregamento JSON dinâmico

    Carrega as traduções tardiamente em tempo de execução

    JSON com escopo (namespacing)

    Namespaces de tradução por página

    Benchmark de Desempenho I18n

    Nenhum dado disponível

    O que é essa métrica?

    O tamanho total compactado em gzip do pacote da biblioteca de internacionalização. Inclui apenas o provedor e a lógica de recuperação de conteúdo após o tree-shaking e a minificação.

    Por que é importante?

    Um tamanho de biblioteca menor reduz a carga útil inicial de JavaScript, resultando em tempos de download e execução mais rápidos no cliente.

    Ver como

    Analise a pontuação de localização global do seu site

    Avalie rapidamente e gratuitamente a qualidade da localização do seu site. Analise os principais elementos multilingues do seu site para obter uma pontuação abrangente e insights acionáveis para ampliar seu alcance.

    i18n baseado em código

    Traduções com segurança de tipo que vivem no seu repositório.

    Declare conteúdo ao lado de seus componentes em TypeScript ou JavaScript. Intlayer gera tipos automaticamente, oferecendo autocompletar, validação e feedback instantâneo. Sem mais chaves ausentes ou trocas de contexto.

    AI CLI Tool

    Automatize traduções a partir do seu terminal.

    A CLI para auditar, preencher e traduzir JSON e Markdown com IA.

    Execute `npx intlayer fill` para detectar chaves ausentes e gerar traduções usando OpenAI, Claude ou modelos locais. Mantenha seu histórico Git limpo e tipos seguros.

    Intlayer TMS

    Pare de pagar por palavra. Automatize com IA.

    A alternativa open-source ao Crowdin e Lokalise. Construído para fluxos de trabalho modernos de desenvolvedores.

    Gerencie traduções diretamente no seu código ou via editor visual. Aproveite a IA para traduzir instantaneamente. Colabore com sua equipe sem limites de assentos.

    CMS Headless

    Conecte seu código local com conteúdo remoto.

    Gerencie conteúdo multilíngue sem sobrecarga. Intlayer interconecta dicionários locais com gestão remota, permitindo Live Sync para atualizações rápidas sem reconstrução. Use webhooks para CI/CD e gerencie feature flags.

    Feature Flags

    Alterne recursos instantaneamente. Sem deploy.

    Dicionários Intlayer são mais que texto. Use-os para declarar lógica, estilos e configurações. Com Live Sync, alterne recursos, mude temas de UI e atualize o comportamento do app em tempo real direto do CMS.

    Testes A/B

    Seu playground para experimentos de produto.

    Seja o primeiro a explorar a nova beta de A/B Testing orientado por IA da Intlayer, construída para aumentar a descoberta e orientar decisões de produto mais inteligentes. Teste qualquer coisa em tempo real, desde copy e design até recursos completos, e deixe os dados mostrarem o que realmente funciona.

    Disponível em

    Experimente a demonstração ao vivo

    Construído pela comunidade

    Conheça os incríveis colaboradores que tornam o Intlayer possível

    Perguntas frequentes

    O que é internacionalização (i18n)?

    A internacionalização (i18n) é o processo de projetar e desenvolver aplicativos como Next.js, React ou Express para suportar facilmente vários idiomas. Isso permite que você crie sites multilíngues simplificando o processo de tradução. Ferramentas como TypeScript tornam mais fácil implementar a i18n, permitiendo uma adaptação eficiente e fácil do seu aplicativo a diferentes idiomas e regiões.Saiba mais sobre i18n

    Quais são os principais recursos do Intlayer?

    O Intlayer simplifica a gestão da configuração e habilita a internacionalização para vários tipos de aplicações JavaScript, incluindo componentes de servidor. Permite a declaração do conteúdo diretamente ao lado dos componentes, melhorando a manutenibilidade da base de código. Além disso, o Intlayer utiliza o TypeScript para evitar declarações ausentes. Finalmente, o Intlayer oferece um editor visual, permitindo que não desenvolvedores editem o conteúdo do site, traduzam automaticamente usando IA e otimizem o SEO da aplicação.Saiba mais sobre os recursos do Intlayer

    Existe um editor visual no Intlayer?

    Sim, o Intlayer oferece um editor visual opcional para gerenciar conteúdo facilmente sem mergulhar no código.Saiba mais sobre o editor visual

    Qual é o custo de usar o Intlayer?

    O Intlayer integra uma seleção de pacotes NPM gratuitos juntamente com um editor visual. Além disso, oferece um CMS para externalizar conteúdo. Este CMS é gratuito, mas inclui recursos adicionais para membros dos planos Premium e Enterprise.Saiba mais sobre os planos do Intlayer

    Posso integrar o Intlayer sobre soluções existentes?

    Sim, o Intlayer pode ser integrado como um wrapper em torno de i18next, next-intl, vue-i18next e mais. Isso permite automatizar suas traduções e usar o Intlayer sem precisar refatorar seu código existente.

    O que é Intlayer?

    Intlayer é um pacote que permite gerenciar seu site multilíngue. Ele fornece um conjunto de ferramentas e utilitários que facilitam a configuração de seu site para conteúdo multilíngue e localização.Saiba mais sobre o Intlayer

    Como o Intlayer se integra ao Next.js?

    O Intlayer se integra ao Next.js para permitir o renderização do lado do servidor e a geração de sites estáticos, tornando a entrega de conteúdo multilíngue mais eficiente.Saiba mais sobre a integração com o Next.js

    Como posso contribuir para o Intlayer?

    Você pode contribuir enviando pull requests ou relatando problemas no repositório do GitHub.Saiba mais sobre como contribuir

    Quais plataformas o Intlayer suporta?

    O Intlayer está disponível para React (incluindo Create React App), Vite com React, Next.js, Tanstack Start, Vue, Nuxt, Express, NestJS, Preact e mais. Isso garante uma integração perfeita com os modernos frameworks JavaScript e ambientes do lado do servidor.Saiba mais sobre as plataformas suportadas
    Leia todas as perguntas frequentes