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 a internacionalização do Next.js. Além disso, inclui o plugin do 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 a um público global de forma eficaz. 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 Seguro em Tipos: Aproveite o TypeScript para garantir que todas as suas definições de conteúdo sejam precisas e sem erros.
• Arquivos de Conteúdo Integrados: Mantenha suas traduções próximas aos respectivos componentes, melhorando a manutenibilidade e a clareza.

Instalação

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

npm install next-intlayer

Exemplo de uso

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

Por padrão, o Intlayer procura 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

next-intlayer é feito para funcionar com o intlayer package.intlayer é um pacote que permite que você declare seu conteúdo em qualquer lugar do seu código. Ele converte declarações de conteúdo multilíngues em dicionários estruturados que se integram perfeitamente à sua aplicação.

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

import { type DeclarationContent, t } from "intlayer";/** @type {DeclarationContent} */const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Menos de um carro",      "-1": "Menos um carro",      "0": "Nenhum carro",      "1": "Um carro",      ">5": "Alguns carros",      ">19": "Muitos carros",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

Utilize o Conteúdo em Seu Código

Depois de declarar seu conteúdo, você pode usá-lo em 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"); // Crie a declaração de conteúdo relacionada  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

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

Intlayer fornece muitos recursos para ajudá-lo a internacionalizar sua aplicação Next.js. Aqui estão algumas das principais características:

• Internacionalização de componentes do servidor: Intlayer permite que você internacionalize seus componentes de servidor da mesma forma que seus componentes de cliente. Isso significa que você pode usar as mesmas declarações de conteúdo para os componentes de cliente e servidor.
• Middleware para Detecção de Locale: Intlayer fornece middleware para detectar o idioma preferido do usuário. Este 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: Intlayer fornece 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 getTranslationContent para traduzir seus metadados.
• Internacionalização de sitemap.xml e robots.txt: 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: Intlayer permite que você internacionalize suas URLs usando a função getMultilingualUrls. Esta 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()