Traduza o seu site Astro + Preact com o Intlayer | Internacionalização (i18n)

Índice

O que é o Intlayer?

Intlayer é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.

Com o Intlayer, você pode:

• Gerenciar traduções facilmente: Usando dicionários declarativos ao nível do componente.
• Localizar metadversas, rotas e conteúdo dinamicamente.
• Garantir suporte TypeScript: Com tipos gerados automaticamente para melhor preenchimento automático e detecção de erros.
• Beneficiar de recursos avançados: Como detecção dinâmica de idioma e troca de idioma.

Guia passo a passo para configurar o Intlayer no Astro + Preact

Confira o modelo da aplicação no GitHub.

Passo 1: Instalar Dependências

Instale os pacotes necessários usando seu gerenciador de pacotes preferido:

npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preactnpx intlayer init

• intlayer O pacote principal que fornece ferramentas de i18n para gerenciamento de configuração, traduções, declaração de conteúdo, transpilação e comandos CLI.

• astro-intlayer Inclui o plugin de integração do Astro para vincular o Intlayer ao bundler Vite, bem como o middleware para detectar o idioma preferido do usuário, gerenciar cookies e lidar com redirecionamentos de URL.

• preact Pacote principal do Preact - uma alternativa rápida e leve ao React.

• preact-intlayer Pacote para integrar o Intlayer em aplicações Preact. Ele fornece o IntlayerProvider, além dos hooks useIntlayer e useLocale para internacionalização no Preact.

• @astrojs/preact Integração oficial do Astro que permite o uso de islands de componentes Preact.

Passo 2: Configurar seu Projeto

Crie um arquivo de configuração para definir os idiomas da sua aplicação:

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

Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamentos de middleware, nomes de cookies, localização e extensões de 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: Integrar o Intlayer na sua configuração do Astro

Adicione o plugin intlayer e a integração do Preact à sua configuração do Astro.

// @ts-checkimport { intlayer } from "astro-intlayer";import preact from "@astrojs/preact";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer(), preact()],});

O plugin de integração intlayer() é usado para integrar o Intlayer ao Astro. Ele garante a geração dos arquivos de declaração de conteúdo e os monitora em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Astro e fornece aliases para otimizar o desempenho.

A integração preact() permite o uso de islands de componentes Preact via client:only="preact".

Passo 4: Declarar seu conteúdo

Crie e gerencie suas declarações de conteúdo para armazenar traduções:

import { h } from "preact";import { t, type Dictionary } from "intlayer";import type { ComponentChildren } from "preact";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",      pt: "Olá Mundo",    }),  },} satisfies Dictionary;export default appContent;

As declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que estejam incluídas no contentDir (por padrão ./src) e correspondam à extensão do arquivo de declaração de conteúdo (por padrão .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Para mais informações, consulte a documentação de declaração de conteúdo.

Se seus arquivos de conteúdo incluírem código TSX, você pode precisar importar import { h } from "preact"; ou garantir que seu pragma JSX esteja configurado corretamente para o Preact.

Passo 5: Usar o conteúdo no Astro

Você pode consumir os dicionários diretamente nos seus arquivos .astro usando os ajudantes principais exportados do intlayer. Você também deve adicionar metadados de SEO (como hreflang e links canônicos) a cada página e introduzir uma island de Preact para conteúdo interativo no lado do cliente.

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  getHTMLTextDir,  getPrefix,  localeMap,  defaultLocale,  type LocalesValues,} from "intlayer";import { PreactIsland } from "../../components/preact/ReactIsland";export const getStaticPaths = () => {  return localeMap(({ locale }) => ({    params: { locale: getPrefix(locale).localePrefix },  }));};const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;const { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <title>{title}</title>    <!-- Link Canônico: informa aos motores de busca sobre a versão principal desta página -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: informa ao Google sobre todas as versões localizadas -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: opção de fallback quando o idioma não corresponde ao do usuário -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <!-- A island de Preact renderiza todo o conteúdo interativo, incluindo o seletor de idioma -->    <PreactIsland locale={locale} client:only="preact" />  </body></html>

Se você quiser usar seu conteúdo em un atributo de string, como alt, title, href, aria-label, etc., você pode usar o valor da função, como:

html

Copiar conteúdo

Copiar código

Copiar o código para a área de transferência

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

Nota sobre a configuração de roteamento: A estrutura de diretórios que você usa depende da configuração middleware.routing no intlayer.config.ts:

• prefix-no-default (padrão): mantém o idioma padrão na raiz (sem prefixo) e adiciona prefixos aos outros. Use [...locale] para capturar todos os casos.
• prefix-all: todos os URLs recebem um prefixo de idioma. Você pode usar o padrão [locale] se não precisar lidar com a raiz separadamente.
• search-param ou no-prefix: não são necessários diretórios de idioma. O idioma é tratado via parâmetros de consulta ou cookies.

Passo 6: Criar um componente Island de Preact

Crie um componente de island que envolva sua aplicação Preact e receba a localidade detectada pelo servidor:

/** @jsxImportSource preact */import { IntlayerProvider, useIntlayer } from "preact-intlayer";import { type LocalesValues } from "intlayer";import type { FunctionalComponent } from "preact";import { LocaleSwitcher } from "./LocaleSwitcher";const App: FunctionalComponent = () => {  const { title } = useIntlayer("app");  return (    <div>      <h1>{title}</h1>      <LocaleSwitcher />    </div>  );};export const PreactIsland: FunctionalComponent<{ locale: LocalesValues }> = ({  locale,}) => (  <IntlayerProvider locale={locale}>    <App />  </IntlayerProvider>);

A prop locale é passada da página Astro (detecção no servidor) para o IntlayerProvider, servindo como o idioma inicial para todos os hooks Preact na árvore.

Nota: No Preact, a propriedade HTML class é usada em vez de className.

Passo 7: Adicionar um Seletor de Idioma

Crie um componente Preact LocaleSwitcher que leia os idiomas disponíveis e navegue para a URL localizada quando um usuário selecionar um novo idioma:

/** @jsxImportSource preact */import { useLocale } from "preact-intlayer";import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";import type { FunctionalComponent } from "preact";export const LocaleSwitcher: FunctionalComponent = () => {  const { locale, availableLocales, setLocale } = useLocale({    onLocaleChange: (newLocale: LocalesValues) => {      // Navega para a URL localizada ao mudar de idioma      window.location.href = getLocalizedUrl(        window.location.pathname,        newLocale      );    },  });  return (    <div class="locale-switcher">      <span class="switcher-label">Mudar idioma:</span>      <div class="locale-buttons">        {availableLocales.map((localeItem) => (          <button            key={localeItem}            onClick={() => setLocale(localeItem)}            class={`locale-btn ${localeItem === locale ? "active" : ""}`}            disabled={localeItem === locale}          >            <span class="ls-own-name">{getLocaleName(localeItem)}</span>            <span class="ls-current-name">              {getLocaleName(localeItem, locale)}            </span>            <span class="ls-code">{localeItem.toUpperCase()}</span>          </button>        ))}      </div>    </div>  );};

Nota sobre persistência: O uso de onLocaleChange para redirecionar via window.location.href garante que a nova URL linguística seja visitada, permitindo que o middleware do Intlayer defina o cookie de idioma e lembre da preferência do usuário em visitas futuras.

O LocaleSwitcher deve ser renderizado dentro de um IntlayerProvider - use-o no seu componente de island (como mostrado no passo 6).

Passo 8: Sitemap e Robots.txt

O Intlayer oferece utilitários para criar dinamicamente o seu sitemap localizado e os arquivos robots.txt.

Sitemap

O Intlayer vem com um gerador de sitemap integrado para ajudá-lo a criar facilmente um sitemap para sua aplicação. Ele cuida das rotas localizadas e adiciona os metadados necessários para os mecanismos de busca.

O sitemap gerado pelo Intlayer suporta o namespace xhtml:link (Hreflang XML Extensions). Ao contrário dos geradores de sitemap padrão que apenas listam URLs brutos, o Intlayer cria automaticamente os links bidirecionais necessários entre todas as versões de idioma de uma página (por exemplo, /about, /about?lang=fr e /about?lang=es). Isso garante que os mecanismos de busca indexem e sirvam corretamente a versão de idioma certa para o público certo.

Crie src/pages/sitemap.xml.ts para gerar um sitemap que inclua todas as suas rotas localizadas.

import type { APIRoute } from "astro";import { generateSitemap, type SitemapUrlEntry } from "intlayer";const pathList: SitemapUrlEntry[] = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";export const GET: APIRoute = async ({ site }) => {  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });  return new Response(xmlOutput, {    headers: { "Content-Type": "application/xml" },  });};

Robots.txt

Crie src/pages/robots.txt.ts para controlar o rastreamento dos motores de busca.

import type { APIRoute } from "astro";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);export const GET: APIRoute = ({ site }) => {  const robotsTxt = [    "User-agent: *",    "Allow: /",    ...disallowedPaths.map((path) => `Disallow: ${path}`),    "",    `Sitemap: ${new URL("/sitemap.xml", site).href}`,  ].join("\n");  return new Response(robotsTxt, {    headers: { "Content-Type": "text/plain" },  });};

Configuração do TypeScript

O Intlayer usa o aumento de módulos (module augmentation) para aproveitar o TypeScript, tornando sua base de código mais robusta. Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente e esteja configurada para o Preact:

{  compilerOptions: {    // ...    jsx: "react-jsx",    jsxImportSource: "preact", // Recomendado para Preact 10+  },  "include": [    // ... sua configuração existente do TypeScript    ".intlayer/**/*.ts", // Incluir tipos gerados automaticamente  ],}

Configuração do Git

Recomenda-se ignorar os arquivos gerados pelo Intlayer. Isso evita committá-los no seu repositório Git.

Para fazer isso, adicione as seguintes instruções ao seu arquivo .gitignore:

# Ignorar os arquivos gerados pelo Intlayer.intlayer

Extensão do VS Code

Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial do Intlayer para VS Code.

Instalação pelo VS Code Marketplace

Esta extensão fornece:

• Preenchimento automático para chaves de tradução.
• Detecção de erros em tempo real para traduções ausentes.
• Visualização inline do conteúdo traduzido.
• Ações rápidas para criar e atualizar traduções facilmente.

Para mais informações sobre o uso da extensão, consulte a documentação da Extensão do VS Code.

(Opcional) Passo 15: Extrair o conteúdo dos seus componentes

Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.

Para facilitar esse processo, o Intlayer propõe um compilador / extrator para transformar seus componentes e extrair o conteúdo.

Para configurá-lo, você pode adicionar uma seção compiler no seu arquivo intlayer.config.ts:

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto da sua configuração
  compiler: {
    /**
     * Indica se o compilador deve ser ativado.
     */
    enabled: true,

    /**
     * Define o caminho dos arquivos de saída
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.
     */
    saveComponents: false,

    /**
     * Prefixo da chave do dicionário
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

npx intlayer extract

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adiciona o plugin do compilador ],});

npm run build # Ou npm run dev

Aprofunde seu conhecimento

Se quiser saber mais, você também pode implementar o Editor Visual ou usar o CMS para externalizar seu conteúdo.