intlayer: Pacote NPM para Gerenciar Dicionário Multilíngue (i18n)

Intlayer é um conjunto de pacotes projetados especificamente para desenvolvedores JavaScript. É compatível com frameworks como React, Next.js e Express.js.

O pacote intlayer permite que você declare seu conteúdo em qualquer lugar do seu código. Ele converte declarações de conteúdo multilíngue em dicionários estruturados que se integram perfeitamente à sua aplicação. Com TypeScript, Intlayer aprimora seu desenvolvimento fornecendo ferramentas mais robustas e eficientes.

Por que integrar o Intlayer?

• Gerenciamento de Conteúdo com JavaScript: Aproveite a flexibilidade do JavaScript para definir e gerenciar seu conteúdo de forma eficiente.
• Ambiente com Tipagem Segura: Utilize o TypeScript para garantir que todas as definições de conteúdo sejam precisas e livres de erros.
• Arquivos de Conteúdo Integrados: Mantenha suas traduções próximas aos seus respectivos componentes, melhorando a manutenção e a clareza.

Instalação

Instale o pacote necessário usando seu gerenciador de pacotes preferido:

npm install intlayer

Configurar o Intlayer

O Intlayer fornece um arquivo de configuração para configurar seu projeto. Coloque este arquivo na raiz do seu projeto.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Para uma lista completa dos parâmetros disponíveis, consulte a documentação de configuração.

Exemplo de uso

Com o Intlayer, você pode declarar seu conteúdo de forma estruturada em qualquer lugar do seu código.

Por padrão, o Intlayer procura arquivos com a extensão .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Você pode modificar a extensão padrão configurando a propriedade contentDir no arquivo de configuração.

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

Declare seu conteúdo

Aqui está um exemplo de declaração de conteúdo:

import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),  },} satisfies Dictionary;export default clientComponentContent;

Construa seus dicionários

Você pode construir seus dicionários usando o intlayer-cli.

npx intlayer dictionaries build

Este comando escaneia todos os arquivos *.content.*, compila-os e grava os resultados no diretório especificado no seu intlayer.config.ts (por padrão, ./.intlayer).

Uma saída típica pode ser:

.└── .intlayer    ├── dictionary  # Contém o dicionário do seu conteúdo    │   ├── client-component.json    │   └── server-component.json    ├── main  # Contém o ponto de entrada do seu dicionário para ser usado na sua aplicação    │   ├── dictionary.cjs    │   └── dictionary.mjs    └── types  # Contém as definições de tipos geradas automaticamente do seu dicionário        ├── intlayer.d.ts  # Contém as definições de tipos geradas automaticamente do Intlayer        ├── client-component.d.ts        └── server-component.d.ts

Construir recursos i18next

Intlayer pode ser configurado para construir dicionários para i18next. Para isso, você precisa adicionar a seguinte configuração ao seu arquivo intlayer.config.ts:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Informa ao Intlayer para gerar arquivos de mensagens para o i18next    dictionaryOutput: ["i18next"],    // O diretório onde o Intlayer irá gravar seus arquivos JSON de mensagens    i18nextResourcesDir: "./i18next/resources",  },};

Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

Saída:

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Por exemplo, o arquivo en/client-component.json pode ser assim:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "Alguns carros"}

Construir dicionários next-intl

O Intlayer pode ser configurado para construir dicionários para i18next ou next-intl. Para isso, você precisa adicionar a seguinte configuração ao seu arquivo intlayer.config.ts:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Indica ao Intlayer para gerar arquivos de mensagens para i18next    dictionaryOutput: ["next-intl"],    // O diretório onde o Intlayer irá gravar seus arquivos JSON de mensagens    nextIntlMessagesDir: "./i18next/messages",  },};

Para uma lista completa dos parâmetros disponíveis, consulte a documentação de configuração.

Saída:

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Por exemplo, o arquivo en/client-component.json pode ser assim:

{  "myTranslatedContent": "Olá Mundo",  "zero_numberOfCar": "Nenhum carro",  "one_numberOfCar": "Um carro",  "two_numberOfCar": "Dois carros",  "other_numberOfCar": "Alguns carros"}

Ferramentas CLI

O Intlayer fornece uma ferramenta CLI para:

• auditar suas declarações de conteúdo e completar traduções faltantes
• construir dicionários a partir de suas declarações de conteúdo
• enviar e puxar dicionários remotos do seu CMS para o seu projeto de localidade

Consulte intlayer-cli para mais informações.

Usar o Intlayer na sua aplicação

Uma vez que seu conteúdo esteja declarado, você pode consumir seus dicionários Intlayer na sua aplicação.

O Intlayer está disponível como um pacote para sua aplicação.

Aplicação React

Para usar o Intlayer na sua aplicação React, você pode usar react-intlayer.

Aplicação Next.js

Para usar o Intlayer na sua aplicação Next.js, você pode usar next-intlayer.

Aplicação Express

Para usar o Intlayer na sua aplicação Express, você pode usar express-intlayer.

Funções fornecidas pelo pacote intlayer

O pacote intlayer também fornece algumas funções para ajudar você a internacionalizar sua aplicação.

• getConfiguration()
• getTranslation()
• getEnumeration()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()

Histórico da Documentação

• 5.5.10 - 2025-06-29: Histórico inicial