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.cjs        └── index.mjs

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-key",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} 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

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 desenvolvimento com plugins de editor projetados para Intlayer. Confira o Guia do Editor Visual. const { myTranslatedContent } = useIntlayer("component-key");

  return{myTranslatedContent}; };