next-intlayer: Pacote NPM para internacionalizar (i18n) uma aplicação Next.js

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

O pacote next-intlayer permite que você internacionalize sua aplicação Next.js. Ele fornece provedores de contexto e hooks para internacionalização no Next.js. Além disso, inclui o plugin Next.js para integrar o Intlayer com Webpack ou Turbopack, bem como middleware para detectar o idioma preferido do usuário, gerenciar cookies e lidar com redirecionamento de URLs.

Por que internacionalizar sua aplicação Next.js?

Internacionalizar sua aplicação Next.js é essencial para atender de forma eficaz a um público global. Isso permite que sua aplicação entregue conteúdo e mensagens no idioma preferido de cada usuário. Essa capacidade melhora a experiência do usuário e amplia o alcance da sua aplicação, tornando-a mais acessível e relevante para pessoas de diferentes origens linguísticas.

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 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 o gerenciador de pacotes de sua preferência:

npm install next-intlayer

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 por arquivos com a extensão .content.{ts,tsx,js,jsx,mjs,cjs}.

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

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

Declare seu conteúdo

O next-intlayer foi feito para funcionar com o pacote intlayer. O intlayer é um pacote que permite declarar 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.

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

import { t, type Dictionary } from "intlayer";// Declaração de conteúdo traduzidoconst clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      pt: "Olá Mundo",    }),    numberOfCar: enu({      "<-1": "Menos de menos um carro",      "-1": "Menos um carro",      "0": "Nenhum carro",      "1": "Um carro",      ">5": "Alguns carros",      ">19": "Muitos carros",    }),  },} satisfies Dictionary;export default clientComponentContent;

Utilize o conteúdo no seu código

Depois de declarar seu conteúdo, você pode usá-lo no seu código. Aqui está um exemplo de como usar o conteúdo em um componente React:

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const { myTranslatedContent } = useIntlayer("client-component"); // Criação da declaração de conteúdo relacionada  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Dominando a internacionalização da sua aplicação Next.js

O Intlayer oferece muitos recursos para ajudá-lo a internacionalizar sua aplicação Next.js. Aqui estão alguns dos principais recursos:

• Internacionalização de componentes do servidor: O Intlayer permite que você internacionalize seus componentes do servidor da mesma forma que seus componentes do cliente. Isso significa que você pode usar as mesmas declarações de conteúdo para ambos.
• Middleware para Detecção de Idioma: O Intlayer fornece middleware para detectar o idioma preferido do usuário. Esse middleware é usado para detectar o idioma preferido do usuário e redirecioná-lo para a URL apropriada, conforme especificado na configuração.
• Internacionalização de metadados: O Intlayer oferece uma maneira de internacionalizar seus metadados, como o título da sua página, usando a função generateMetadata fornecida pelo Next.js. Você pode usar a função getTranslation para traduzir seus metadados.
• Internacionalização de sitemap.xml e robots.txt: O Intlayer permite que você internacionalize seus arquivos sitemap.xml e robots.txt. Você pode usar a função getMultilingualUrls para gerar URLs multilíngues para seu sitemap.
• Internacionalização de URLs: O Intlayer permite que você internacionalize suas URLs usando a função getMultilingualUrls. Essa função gera URLs multilíngues para seu sitemap.

Para saber mais sobre esses recursos, consulte o guia Internacionalização (i18n) do Next.js com Intlayer e Next.js 15 App Router.

Funções fornecidas pelo pacote next-intlayer

O pacote next-intlayer também fornece algumas funções para ajudá-lo a internacionalizar sua aplicação.

• t()
• useIntlayer()
• useDictionary()
• useLocale()
• useIntlayerAsync()