Documentação do Intlayer

Bem-vindo à documentação oficial do Intlayer! Aqui, você encontrará tudo o que precisa para integrar, configurar e dominar o Intlayer para todas as suas necessidades de internacionalização (i18n), seja você um desenvolvedor usando Next.js, React, Vite, Express ou outro ambiente JavaScript.

Introdução

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, Intlayer torna seu desenvolvimento mais robusto e eficiente.

O Intlayer também oferece um editor visual opcional que permite editar e gerenciar seu conteúdo facilmente. Esse editor é particularmente útil para desenvolvedores que preferem uma interface visual para gerenciamento de conteúdo, ou para equipes que geram conteúdo sem precisar se preocupar com código.

Exemplo de uso

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

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

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

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

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

Principais Funcionalidades

O Intlayer oferece uma variedade de funcionalidades adaptadas para atender às necessidades do desenvolvimento web moderno. Abaixo estão as principais funcionalidades, com links para documentação detalhada de cada uma:

• Suporte à Internacionalização: Amplie o alcance global da sua aplicação com suporte integrado para internacionalização.
• Editor Visual: Melhore seu fluxo de trabalho de desenvolvimento com plugins de editor projetados para o Intlayer. Confira o Guia do Editor Visual.
• Flexibilidade de Configuração: Personalize sua configuração com opções extensas detalhadas no Guia de Configuração.
• Ferramentas Avançadas de CLI: Gerencie seus projetos de forma eficiente usando a interface de linha de comando do Intlayer. Explore as capacidades na Documentação das Ferramentas CLI.

Conceitos Principais

Dicionário

Organize seu conteúdo multilíngue próximo ao seu código para manter tudo consistente e fácil de manter.

• Começando Aprenda o básico de como declarar seu conteúdo no Intlayer.

• Tradução Entenda como as traduções são geradas, armazenadas e utilizadas na sua aplicação.

• Enumeração Gerencie facilmente conjuntos de dados repetidos ou fixos em vários idiomas.

• Condição Aprenda a usar lógica condicional no Intlayer para criar conteúdo dinâmico.

• Inserção Descubra como inserir valores em uma string usando espaços reservados para inserção.

• Busca por Função Veja como buscar conteúdo dinamicamente com lógica personalizada para adequar ao fluxo de trabalho do seu projeto.

• Markdown Aprenda a usar Markdown no Intlayer para criar conteúdo rico.

• Incorporação de Arquivos Descubra como incorporar arquivos externos no Intlayer para usá-los no editor de conteúdo.

• Aninhamento Entenda como aninhar conteúdo no Intlayer para criar estruturas complexas.

Ambientes & Integrações

Construímos o Intlayer com flexibilidade em mente, oferecendo integração perfeita com frameworks populares e ferramentas de build:

• Intlayer com Next.js 15
• Intlayer com Next.js 14 (App Router)
• Intlayer com Next.js Page Router
• Intlayer com React CRA
• Intlayer com Vite + React
• Intlayer com React Native e Expo
• Intlayer com Lynx e React
• Intlayer com Express

Cada guia de integração inclui as melhores práticas para usar os recursos do Intlayer, como renderização no lado do servidor, roteamento dinâmico ou renderização no lado do cliente, para que você possa manter uma aplicação rápida, otimizada para SEO e altamente escalável.

Contribuindo & Feedback

Valorizamos o poder do código aberto e do desenvolvimento orientado pela comunidade. Se desejar propor melhorias, adicionar um novo guia ou corrigir quaisquer problemas em nossa documentação, sinta-se à vontade para enviar um Pull Request ou abrir uma issue em nosso repositório GitHub.

Pronto para traduzir sua aplicação de forma mais rápida e eficiente? Mergulhe em nossa documentação para começar a usar o Intlayer hoje mesmo. Experimente uma abordagem robusta e simplificada para internacionalização que mantém seu conteúdo organizado e sua equipe mais produtiva.