Intlayer Documentation

Bem-vindo à Documentação do Intlayer. Este guia fornece uma visão geral do Intlayer, suas principais funcionalidades e como utilizar efetivamente estes documentos para aprimorar sua experiência de desenvolvimento.

Introdução

O que é Intlayer?

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

Intlayer também fornece um editor visual opcional que permite editar e gerenciar seu conteúdo com facilidade. Este 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 o código.

Exemplo de uso

bash

1.
2├── ClientComponent
3│   ├── index.content.ts
4│   └── index.tsx
5└── ServerComponent
6    ├── index.content.ts
7    └── index.tsx

tsx

1// ./ClientComponent/index.content.ts
2
3import { type DeclarationContent, t } from "intlayer";
4
5const clientComponentContent = {
6  key: "client-component",
7  content: {
8    myTranslatedContent: t({
9      en: "Hello World",
10      fr: "Bonjour le monde",
11      es: "Hola Mundo",
12    }),
13  },
14} satisfies DeclarationContent;
15
16export default clientComponentContent;

tsx

1// ./ClientComponent/index.tsx
2"use client";
3
4import { useIntlayer } from "next-intlayer";
5
6export const ClientComponent = () => {
7  const { myTranslatedContent } = useIntlayer("client-component");
8
9  return <span>{myTranslatedContent}</span>;
10};

Principais Funcionalidades

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

Suporte à Internacionalização: Amplie o alcance global de sua aplicação com suporte embutido 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 CLI Avançadas: Gerencie seus projetos de forma eficiente usando a interface de linha de comando do Intlayer. Explore as capacidades na Documentação das Ferramentas CLI.
Compatibilidade com i18n: O Intlayer funciona perfeitamente com outras bibliotecas de internacionalização. Confira o Guia do i18n para mais informações.

Plataformas Suportadas

O Intlayer foi projetado para funcionar perfeitamente com aplicações Next.js e React. Também há suporte para Vite e Create React App.

Integração com Next.js: Aproveite o poder do Next.js dentro do Intlayer para renderização do lado do servidor e geração de sites estáticos. Detalhes estão disponíveis em nosso Guia de Integração com Next.js.
Integração com Vite e React: Aproveite o Vite dentro do Intlayer para renderização do lado do servidor e geração de sites estáticos. Detalhes estão disponíveis em nosso Guia de Integração com Vite e React.
Integração com Create React App: Aproveite o poder do Create React App dentro do Intlayer para renderização do lado do servidor e geração de sites estáticos. Detalhes estão disponíveis em nosso Guia de Integração com Create React App.

Como Usar Esta Documentação

Para aproveitar ao máximo esta documentação:

Navegue para Seções Relevantes: Utilize os links fornecidos acima para ir diretamente para as seções que atendem às suas necessidades.
Exemplos Interativos: Onde disponíveis, utilize exemplos interativos para ver como as funcionalidades funcionam em tempo real.
Feedback e Contribuições: Seu feedback é valioso. Se você tiver sugestões ou correções, considere contribuir com a documentação.

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Como o Intlayer funciona