Introdução à internacionalização (i18n) com Intlayer e Next.js 15 App Router
O que é o Intlayer?
Intlayer é uma biblioteca inovadora e de código aberto para internacionalização (i18n), projetada para simplificar o suporte multilíngue em aplicações web modernas. O Intlayer integra-se perfeitamente com o mais recente framework Next.js 15, incluindo seu poderoso App Router. Ele é otimizado para funcionar com Componentes do Servidor para renderização eficiente e é totalmente compatível com Turbopack.
Com o Intlayer, você pode:
- Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
- Localizar dinamicamente metadados, rotas e conteúdo.
- Acessar traduções em componentes do lado do cliente e do servidor.
- Garantir suporte ao TypeScript com tipos autogerados, melhorando a autocompletação e a detecção de erros.
- Aproveitar recursos avançados, como detecção e troca dinâmica de localidade.
O Intlayer é compatível com Next.js 12, 13, 14 e 15. Se você estiver usando o Next.js Page Router, pode consultar este guia. Para Next.js 12, 13, 14 com App Router, consulte este guia.
Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Next.js
Passo 1: Instale as Dependências
Instale os pacotes necessários usando npm:
npm install intlayer next-intlayerintlayer
O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, declaração de conteúdo, transpiração e comandos CLI.
next-intlayer
O pacote que integra o Intlayer com 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 a localidade preferida do usuário, gerenciar cookies e lidar com redirecionamento de URLs.
Passo 2: Configure Seu Projeto
Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // Seus outros idiomas ], defaultLocale: Locales.ENGLISH, },};export default config;Por meio deste arquivo de configuração, você pode configurar URLs localizados, redirecionamento de middleware, nomes de cookies, a localização e extensão de suas declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.
Passo 3: Integre o Intlayer na Configuração do Next.js
Configure seu Next.js para usar o Intlayer:
import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = { /* opções de configuração aqui */};export default withIntlayer(nextConfig);O plugin withIntlayer() do Next.js é usado para integrar o Intlayer com o Next.js. Ele garante a construção de arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define variáveis de ambiente do Intlayer nos ambientes Webpack ou Turbopack. Além disso, fornece aliases para otimizar o desempenho e garante compatibilidade com componentes do servidor.
Passo 4: Defina Rotas Dinâmicas de Localidade
Remova tudo de RootLayout e substitua pelo seguinte código:
import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => children;export default RootLayout;Manter o componente RootLayout vazio permite definir os atributos lang e dir na tag <html>.
Para implementar o roteamento dinâmico, forneça o caminho para a localidade adicionando um novo layout no seu diretório [locale]:
import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => { const { locale } = await params; return ( <html lang={locale} dir={getHTMLTextDir(locale)}> <body className={inter.className}>{children}</body> </html> );};export default LocaleLayout;O segmento de caminho [locale] é usado para definir a localidade. Exemplo: /en-US/about se referirá a en-US e /fr/about a fr.
Em seguida, implemente a função generateStaticParams no Layout da sua aplicação.
export { generateStaticParams } from "next-intlayer"; // Linha a ser inseridaconst LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => { /*... Resto do código*/};export default LocaleLayout;generateStaticParams garante que sua aplicação pré-construa as páginas necessárias para todas as localidades, reduzindo a computação em tempo de execução e melhorando a experiência do usuário. Para mais detalhes, consulte a documentação do Next.js sobre generateStaticParams.
Passo 5: Declare Seu Conteúdo
Crie e gerencie suas declarações de conteúdo para armazenar traduções:
import { t, type Dictionary } from "intlayer";const pageContent = { key: "page", content: { getStarted: { main: t({ en: "Get started by editing", fr: "Commencez par éditer", es: "Comience por editar", pt: "Comece editando", }), pageLink: "src/app/page.tsx", }, },} satisfies Dictionary;export default pageContent;Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no diretório contentDir (por padrão, ./src). E correspondam à extensão do arquivo de declaração de conteúdo (por padrão, .content.{ts,tsx,js,jsx,mjs,cjs}).
Para mais detalhes, consulte a documentação de declaração de conteúdo.
Passo 6: Utilize o Conteúdo no Seu Código
Acesse seus dicionários de conteúdo em toda a sua aplicação:
import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => { const { title, content } = useIntlayer("page"); return ( <> <p>{content.getStarted.main}</p> <code>{content.getStarted.pageLink}</code> </> );};const Page: NextPageIntlayer = async ({ params }) => { const { locale } = await params; return ( <IntlayerServerProvider locale={locale}> <PageContent /> <ServerComponentExample /> <IntlayerClientProvider locale={locale}> <ClientComponentExample /> </IntlayerClientProvider> </IntlayerServerProvider> );};export default Page;- IntlayerClientProvider é usado para fornecer a localidade para componentes do lado do cliente. Ele pode ser colocado em qualquer componente pai, incluindo o layout. No entanto, é recomendável colocá-lo em um layout porque o Next.js compartilha o código do layout entre as páginas, tornando-o mais eficiente. Usando IntlayerClientProvider no layout, você evita reinicializá-lo para cada página, melhorando o desempenho e mantendo um contexto de localização consistente em toda a sua aplicação.
IntlayerServerProvider é usado para fornecer a localidade para os filhos do servidor. Ele não pode ser configurado no layout.
Layout e página não podem compartilhar um contexto de servidor comum porque o sistema de contexto do servidor é baseado em um armazenamento de dados por solicitação (via mecanismo de cache do React), fazendo com que cada “contexto” seja recriado para diferentes segmentos da aplicação. Colocar o provedor em um layout compartilhado quebraria esse isolamento, impedindo a propagação correta dos valores do contexto do servidor para seus componentes do servidor.
"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => { const content = useIntlayer("client-component-example"); // Crie a declaração de conteúdo relacionada return ( <div> <h2>{content.title} </h2> <p>{content.content}</p> </div> );};import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => { const content = useIntlayer("server-component-example"); // Crie a declaração de conteúdo relacionada return ( <div> <h2>{content.title} </h2> <p>{content.content}</p> </div> );};Se você quiser usar seu conteúdo em um atributo string, como alt, title, href, aria-label, etc., você deve chamar o valor da função, como:
jsx<img src={content.image.src.value} alt={content.image.value} />
Para saber mais sobre o hook useIntlayer, consulte a documentação.
(Opcional) Passo 7: Configure Middleware para Detecção de Localidade
Configure o middleware para detectar a localidade preferida do usuário:
export { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = { matcher: "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\..*|_next).*)",};O intlayerMiddleware é usado para detectar a localidade preferida do usuário e redirecioná-lo para a URL apropriada, conforme especificado na configuração. Além disso, permite salvar a localidade preferida do usuário em um cookie.
(Opcional) Passo 8: Internacionalização dos seus metadados
Caso você queira internacionalizar seus metadados, como o título da sua página, você pode usar a função generateMetadata fornecida pelo Next.js. Dentro da função, use a função getTranslation para traduzir seus metadados.
import { type IConfigLocales, getTranslation, getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({ params,}: LocalPromiseParams): Promise<Metadata> => { const { locale } = await params; const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale); /** * Gera um objeto contendo todas as URLs para cada localidade. * * Exemplo: * ```ts * getMultilingualUrls('/about'); * * // Retorna * // { * // en: '/about', * // fr: '/fr/about', * // es: '/es/about', * // } * ``` */ const multilingualUrls = getMultilingualUrls("/"); return { title: t<string>({ en: "My title", fr: "Mon titre", es: "Mi título", pt: "Meu título", }), description: t({ en: "My description", fr: "Ma description", es: "Mi descripción", pt: "Minha descrição", }), alternates: { canonical: "/", languages: { ...multilingualUrls, "x-default": "/" }, }, openGraph: { url: multilingualUrls[locale], }, };};// ... Resto do códigoSaiba mais sobre a otimização de metadados na documentação oficial do Next.js.
(Opcional) Passo 9: Internacionalização do seu sitemap.xml e robots.txt
Para internacionalizar seu sitemap.xml e robots.txt, você pode usar a função getMultilingualUrls fornecida pelo Intlayer. Essa função permite gerar URLs multilíngues para seu sitemap.
import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [ { url: "https://example.com", alternates: { languages: { ...getMultilingualUrls("https://example.com") }, }, }, { url: "https://example.com/login", alternates: { languages: { ...getMultilingualUrls("https://example.com/login") }, }, }, { url: "https://example.com/register", alternates: { languages: { ...getMultilingualUrls("https://example.com/register") }, }, },];export default sitemap;import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) => urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const robots = (): MetadataRoute.Robots => ({ rules: { userAgent: "*", allow: ["/"], disallow: getAllMultilingualUrls(["/login", "/register"]), }, host: "https://example.com", sitemap: `https://example.com/sitemap.xml`,});export default robots;Saiba mais sobre a otimização do sitemap na documentação oficial do Next.js. Saiba mais sobre a otimização do robots.txt na documentação oficial do Next.js.
(Opcional) Passo 10: Alterar o idioma do seu conteúdo
Para alterar o idioma do seu conteúdo, você pode usar a função setLocale fornecida pelo hook useLocale. Essa função permite definir a localidade da aplicação e atualizar o conteúdo de acordo.
"use client";import type { FC } from "react";import { Locales, getHTMLTextDir, getLocaleName, getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import Link from "next/link";export const LocaleSwitcher: FC = () => { const { locale, pathWithoutLocale, availableLocales, setLocale } = useLocale(); return ( <div> <button popoverTarget="localePopover">{getLocaleName(locale)}</button> <div id="localePopover" popover="auto"> {availableLocales.map((localeItem) => ( <Link href={getLocalizedUrl(pathWithoutLocale, localeItem)} hrefLang={localeItem} key={localeItem} aria-current={locale === localeItem ? "page" : undefined} onClick={(e) => { e.preventDefault(); setLocale(localeItem); }} > <span> {/* Localidade - ex.: FR */} {localeItem} </span> <span> {/* Idioma na sua própria Localidade - ex.: Français */} {getLocaleName(localeItem, locale)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* Idioma na Localidade atual - ex.: Francés com localidade atual definida como Locales.SPANISH */} {getLocaleName(localeItem)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* Idioma em Inglês - ex.: French */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </Link> ))} </div> </div> );};Referências da documentação:
(Opcional) Passo 11: Criando um Componente de Link Localizado
Para garantir que a navegação da sua aplicação respeite a localidade atual, você pode criar um componente Link personalizado. Este componente automaticamente prefixa URLs internas com a localidade atual, de forma que, por exemplo, quando um usuário que fala francês clica em um link para a página "Sobre", ele é redirecionado para /fr/about em vez de /about.
Esse comportamento é útil por várias razões:
- SEO e Experiência do Usuário: URLs localizadas ajudam os mecanismos de busca a indexar corretamente as páginas específicas de idioma e fornecem aos usuários conteúdo no idioma preferido.
- Consistência: Usando um link localizado em toda a sua aplicação, você garante que a navegação permaneça dentro da localidade atual, evitando mudanças inesperadas de idioma.
- Manutenibilidade: Centralizar a lógica de localização em um único componente simplifica o gerenciamento de URLs, tornando sua base de código mais fácil de manter e expandir à medida que sua aplicação cresce.
Abaixo está a implementação de um componente Link localizado em TypeScript:
"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import type { PropsWithChildren, FC } from "react";/** * Função utilitária para verificar se uma URL fornecida é externa. * Se a URL começar com http:// ou https://, ela é considerada externa. */export const checkIsExternalLink = (href?: string): boolean => /^https?:///.test(href ?? "");/** * Um componente Link personalizado que adapta o atributo href com base na localidade atual. * Para links internos, ele usa `getLocalizedUrl` para prefixar a URL com a localidade (ex.: /fr/about). * Isso garante que a navegação permaneça dentro do mesmo contexto de localidade. */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({ href, children, ...props}) => { const { locale } = useLocale(); const isExternalLink = checkIsExternalLink(href.toString()); // Se o link for interno e um href válido for fornecido, obtenha a URL localizada. const hrefI18n: NextLinkProps["href"] = href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href; return ( <NextLink href={hrefI18n} {...props}> {children} </NextLink> );};Como Funciona
Detectando Links Externos:
A função auxiliar checkIsExternalLink determina se uma URL é externa. Links externos são deixados inalterados porque não precisam de localização.Recuperando a Localidade Atual:
O hook useLocale fornece a localidade atual (ex.: fr para francês).Localizando a URL:
Para links internos (ou seja, não externos), getLocalizedUrl é usado para prefixar automaticamente a URL com a localidade atual. Isso significa que, se o usuário estiver em francês, passar /about como href transformará em /fr/about.Retornando o Link:
O componente retorna um elemento <a> com a URL localizada, garantindo que a navegação seja consistente com a localidade.
Ao integrar este componente Link em toda a sua aplicação, você mantém uma experiência de usuário coerente e consciente do idioma, além de se beneficiar de SEO e usabilidade aprimorados.
Configure o TypeScript
O Intlayer usa a ampliação de módulos para obter os benefícios do TypeScript e tornar sua base de código mais robusta.
Certifique-se de que sua configuração do TypeScript inclua os tipos autogerados.
{ // ... Suas configurações existentes do TypeScript "include": [ // ... Suas configurações existentes do TypeScript ".intlayer/**/*.ts", // Inclua os tipos autogerados ],}Configuração do Git
Recomenda-se ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam enviados para o seu repositório Git.
Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo .gitignore:
# Ignore os arquivos gerados pelo Intlayer.intlayerVá Além
Para ir além, você pode implementar o editor visual ou externalizar seu conteúdo usando o CMS.
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