Traduza seu site Vite e React usando Intlayer | Internacionalização (i18n)

Índice

Por que Intlayer em vez de alternativas?

Comparado com soluções principais como react-i18next ou i18next, Intlayer é uma solução que vem com otimizações integradas como:

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação Vite e React

VideoCodeDemo

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-react-template.vercel.app

Open embedded page in fullscreen

Veja o Modelo de Aplicação no GitHub.

1. 1

   Instalar Dependências

   Instale os pacotes necessários usando npm:

   bash

   Copiar conteúdo

   Copiar código

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

   npx intlayer init --interactive
   

   a flag --interactive é opcional. Use intlayer-cli init se você for um agente de IA.

   Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:

   bash

   Copiar conteúdo

   Copiar código

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

   npm install intlayer react-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer 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.

   • react-intlayer O pacote que integra o Intlayer com aplicações React. Ele fornece provedores de contexto e hooks para internacionalização em React.

   • vite-intlayer Inclui o plugin Vite para integrar o Intlayer com o empacotador Vite, além de middleware para detectar a localidade preferida do utilizador, gerir cookies e tratar o redirecionamento de URL.

2. 2

   Configuração do seu projeto

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

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

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

   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;
   

   Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a documentação de configuração.

3. 3

   Integre o Intlayer na sua Configuração do Vite

   Adicione o plugin intlayer na sua configuração.

   vite.config.ts

   Copiar conteúdo

   Copiar código

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

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react-swc";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react(), intlayer()],
   });
   

   O plugin Vite intlayer() é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.

4. 4

   Declare Seu Conteúdo

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

   src/app.content.tsx

   Copiar conteúdo

   Copiar código

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

   import { t, type Dictionary } from "intlayer";
   import type { ReactNode } from "react";
   
   const appContent = {
     key: "app",
     content: {
       viteLogo: t({
         en: "Vite logo",
         fr: "Logo Vite",
         es: "Logo Vite",
       }),
       reactLogo: t({
         en: "React logo",
         fr: "Logo React",
         es: "Logo React",
       }),
   
       title: "Vite + React",
   
       count: t({
         en: "count is ",
         fr: "le compte est ",
         es: "el recuento es ",
       }),
   
       edit: t<ReactNode>({
         en: (
           <>
             Edite <code>src/App.tsx</code> e salve para testar HMR
           </>
         ),
         fr: (
           <>
             Éditez <code>src/App.tsx</code> et enregistrez pour tester HMR
           </>
         ),
         es: (
           <>
             Edita <code>src/App.tsx</code> y guarda para probar HMR
           </>
         ),
       }),
   
       readTheDocs: t({
         en: "Clique nos logos do Vite e React para saber mais",
         fr: "Cliquez sur les logos Vite et React pour en savoir plus",
         es: "Haga clic en los logotipos de Vite y React para obtener más información",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

   Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação assim que forem incluídas no diretório contentDir (por padrão, ./src). E devem corresponder à extensão do arquivo de declaração de conteúdo (por padrão, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Para mais detalhes, consulte a documentação de declaração de conteúdo.

   Se seu arquivo de conteúdo incluir código TSX, você deve considerar importar import React from "react"; no seu arquivo de conteúdo.

5. 5

   Utilize o Intlayer no Seu Código

   Acesse seus dicionários de conteúdo em toda a sua aplicação:

   src/App.tsx

   Copiar conteúdo

   Copiar código

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

   import { useState, type FC } from "react";
   import reactLogo from "./assets/react.svg";
   import viteLogo from "/vite.svg";
   import "./App.css";
   import { IntlayerProvider, useIntlayer } from "react-intlayer";
   
   const AppContent: FC = () => {
     const [count, setCount] = useState(0);
     const content = useIntlayer("app");
   
     return (
       <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
           </a>
           <a href="https://react.dev" target="_blank">
             <img
               src={reactLogo}
               className="logo react"
               alt={content.reactLogo.value}
             />
           </a>
         </div>
         <h1>{content.title}</h1>
         <div className="card">
           <button onClick={() => setCount((count) => count + 1)}>
             {content.count}
             {count}
           </button>
           <p>{content.edit}</p>
         </div>
         <p className="read-the-docs">{content.readTheDocs}</p>
       </>
     );
   };
   
   const App: FC = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;
   

   Se você quiser usar seu conteúdo em um atributo do tipo string, como alt, title, href, aria-label, etc., você deve chamar o valor da função, assim:

   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)}" />
   

   Para saber mais sobre o hook useIntlayer, consulte a documentação.

   Se a sua aplicação já existe, você pode usar o Intlayer Compiler em conjunto com o comando extract para converter milhares de componentes em um segundo.

6. 6

   Alterar o idioma do seu conteúdo

   Opcional

   Para alterar o idioma do seu conteúdo, você pode usar a função setLocale fornecida pelo hook useLocale. Essa função permite definir o locale da aplicação e atualizar o conteúdo de acordo.

   src/components/LocaleSwitcher.tsx

   Copiar conteúdo

   Copiar código

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

   import type { FC } from "react";
   import { Locales } from "intlayer";
   import { useLocale } from "react-intlayer";
   
   const LocaleSwitcher: FC = () => {
     const { setLocale } = useLocale();
   
     return (
       <button onClick={() => setLocale(Locales.English)}>
         Alterar idioma para Inglês
       </button>
     );
   };
   

   Para saber mais sobre o hook useLocale, consulte a documentação.

7. 7

   Adicionar roteamento por localeizado à sua aplicação

   Opcional

   O objetivo deste passo é criar rotas únicas para cada idioma. Isso é útil para SEO e URLs amigáveis para SEO. Exemplo:

   plaintext

   Copiar conteúdo

   Copiar código

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

   - https://example.com/about
   - https://example.com/es/about
   - https://example.com/fr/about
   

   Por padrão, as rotas não são prefixadas para o idioma padrão. Se você quiser prefixar o idioma padrão, pode definir a opção middleware.prefixDefault como true na sua configuração. Veja a documentação de configuração para mais informações.

   Para adicionar roteamento por localeizado à sua aplicação, você pode criar um componente LocaleRouter que envolve as rotas da sua aplicação e gerencia o roteamento baseado no idioma. Aqui está um exemplo usando React Router:

   src/components/LocaleRouter.tsx

   Copiar conteúdo

   Copiar código

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

   import { localeMap } from "intlayer"; // Funções utilitárias e tipos do 'intlayer'
   import type { FC, PropsWithChildren } from "react"; // Tipos React para componentes funcionais e props
   import { IntlayerProvider } from "react-intlayer"; // Provedor para contexto de internacionalização
   import { BrowserRouter, Route, Routes } from "react-router-dom"; // Componentes do roteador para gerenciar navegação
   
   /**
    * Um componente de roteador que configura rotas específicas por idioma.
    * Ele usa o React Router para gerenciar a navegação e renderizar componentes localizados.
    */
   export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
     <BrowserRouter>
       <Routes>
         {localeMap(({ locale, urlPrefix }) => (
           <Route
             // Padrão de rota para capturar o idioma (ex: /en/, /fr/) e corresponder a todos os caminhos subsequentes
             path={`${urlPrefix}/*`}
             key={locale}
             element={
               <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
             } // Envolve os filhos com o gerenciamento de idioma
           />
         ))}
       </Routes>
     </BrowserRouter>
   );
   

   Nota: Se você usar routing.mode: 'no-prefix' | 'search-params', provavelmente não precisará usar a função localeMap.

   Então, você pode usar o componente LocaleRouter na sua aplicação:

   src/App.tsx

   Copiar conteúdo

   Copiar código

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

   import { LocaleRouter } from "./components/LocaleRouter";
   import type { FC } from "react";
   
   // ... Seu componente AppContent
   
   const App: FC = () => (
     <LocaleRouter>
       <AppContent />
     </LocaleRouter>
   );
   

   Paralelamente, você também pode usar o intlayerProxy para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente a localidade atual com base na URL e definirá o cookie de localidade apropriado. Se nenhuma localidade for especificada, o plugin determinará a localidade mais adequada com base nas preferências de idioma do navegador do usuário. Se nenhuma localidade for detectada, ele redirecionará para a localidade padrão.

   Observe que para usar o intlayerProxy em produção, você precisa mover o pacote vite-intlayer de devDependencies para dependencies.

   Desde o Intlayer v9, intlayerProxy() está agrupado diretamente no plugin intlayer() e ativado por padrão através da opção routing.enableProxy (true por padrão). Registrá-lo separadamente conforme mostrado abaixo agora é opcional — é mantido para compatibilidade retroativa e para configurações que precisam controlar a ordem dos plugins. Defina routing.enableProxy: false para desativar. Consulte as notas de versão v9.

   vite.config.ts

   Copiar conteúdo

   Copiar código

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

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react-swc";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       react(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

8. 8

   Alterar a URL quando o idioma mudar

   Opcional

   Para alterar a URL quando o idioma mudar, você pode usar a propriedade onLocaleChange fornecida pelo hook useLocale. Paralelamente, você pode usar os hooks useLocation e useNavigate do react-router-dom para atualizar o caminho da URL.

   src/components/LocaleSwitcher.tsx

   Copiar conteúdo

   Copiar código

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

   import { useLocation, useNavigate } from "react-router-dom";
   import {
     Locales,
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
   } from "intlayer";
   import { useLocale } from "react-intlayer";
   import { type FC } from "react";
   
   const LocaleSwitcher: FC = () => {
     const { pathname, search } = useLocation(); // Obtém o caminho atual da URL. Exemplo: /fr/about?foo=bar
     const navigate = useNavigate();
   
     const { locale, availableLocales, setLocale } = useLocale({
       onLocaleChange: (locale) => {
         // Construir a URL com o locale atualizado
         // Exemplo: /es/about?foo=bar
         const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
   
         // Atualizar o caminho da URL
         navigate(pathWithLocale);
       },
     });
   
     return (
       <div>
         <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
         <div id="localePopover" popover="auto">
           {availableLocales.map((localeItem) => (
             <a
               href={getLocalizedUrl(location.pathname, localeItem)}
               hrefLang={localeItem}
               aria-current={locale === localeItem ? "page" : undefined}
               onClick={(e) => {
                 e.preventDefault();
                 setLocale(localeItem);
               }}
               key={localeItem}
             >
               <span>
                 {/* Local - 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 para Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={Locales.ENGLISH}>
                 {/* Idioma em inglês - ex: French */}
                 {getLocaleName(localeItem, Locales.ENGLISH)}
               </span>
             </a>
           ))}
         </div>
       </div>
     );
   };
   

   Referências da documentação:

   • useLocale hook
   • getLocaleName hook
   • getLocalizedUrl hook
   • getHTMLTextDir hook
   • hrefLang attribute
   • lang attribute
   • dir attribute`
   • aria-current attribute`

   Abaixo está o Passo 9 atualizado com explicações adicionais e exemplos de código refinados:

9. 9

   Alterar os atributos de idioma e direção do HTML

   Opcional

   Quando sua aplicação suporta múltiplos idiomas, é crucial atualizar os atributos lang e dir da tag <html> para corresponder ao locale atual. Fazer isso garante:

   • Acessibilidade: Leitores de tela e tecnologias assistivas dependem do atributo lang correto para pronunciar e interpretar o conteúdo com precisão.
   • Renderização de Texto: O atributo dir (direção) assegura que o texto seja exibido na ordem correta (por exemplo, da esquerda para a direita para inglês, da direita para a esquerda para árabe ou hebraico), o que é essencial para a legibilidade.
   • SEO: Motores de busca usam o atributo lang para determinar o idioma da sua página, ajudando a exibir o conteúdo localizado correto nos resultados de busca.

   Ao atualizar esses atributos dinamicamente quando o locale muda, você garante uma experiência consistente e acessível para os usuários em todos os idiomas suportados.

   Implementando o Hook

   Crie um hook personalizado para gerenciar os atributos do HTML. O hook escuta as mudanças de locale e atualiza os atributos conforme necessário:

   src/hooks/useI18nHTMLAttributes.tsx

   Copiar conteúdo

   Copiar código

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

   import { useEffect } from "react";
   import { useLocale } from "react-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   /**
    * Atualiza os atributos `lang` e `dir` do elemento HTML <html> com base no locale atual.
    * - `lang`: Informa aos navegadores e motores de busca o idioma da página.
    * - `dir`: Garante a ordem correta de leitura (ex: 'ltr' para inglês, 'rtl' para árabe).
    *
    * Esta atualização dinâmica é essencial para a renderização correta do texto, acessibilidade e SEO.
    */
   export const useI18nHTMLAttributes = () => {
     const { locale } = useLocale();
   
     useEffect(() => {
       // Atualiza o atributo de idioma para o locale atual.
       document.documentElement.lang = locale;
   
       // Define a direção do texto com base no locale atual.
       document.documentElement.dir = getHTMLTextDir(locale);
     }, [locale]);
   };
   

   Usando o Hook na Sua Aplicação

   Integre o hook no seu componente principal para que os atributos HTML sejam atualizados sempre que o locale mudar:

   src/App.tsx

   Copiar conteúdo

   Copiar código

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

   import type { FC } from "react";
   import { IntlayerProvider, useIntlayer } from "react-intlayer";
   import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
   import "./App.css";
   
   const AppContent: FC = () => {
     // Aplica o hook para atualizar os atributos lang e dir da tag <html> com base no locale.
     useI18nHTMLAttributes();
   
     // ... Resto do seu componente
   };
   
   const App: FC = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;
   

   Ao aplicar essas alterações, sua aplicação irá:

   • Garantir que o atributo language (lang) reflita corretamente a localidade atual, o que é importante para SEO e comportamento do navegador.
   • Ajustar a direção do texto (dir) de acordo com a localidade, melhorando a legibilidade e usabilidade para idiomas com ordens de leitura diferentes.
   • Proporcionar uma experiência mais acessível, pois tecnologias assistivas dependem desses atributos para funcionar de forma otimizada.
10. 10

    Criando um Componente de Link Localizado

    Opcional

    Para garantir que a navegação da sua aplicação respeite o idioma atual, você pode criar um componente Link personalizado. Este componente adiciona automaticamente o prefixo do idioma atual às URLs internas. 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 motores de busca a indexar corretamente páginas específicas por idioma e fornecem aos usuários conteúdo no idioma de sua preferência.
    • Consistência: Ao usar um link localizado em toda a sua aplicação, você garante que a navegação permaneça dentro do idioma atual, evitando mudanças inesperadas de idioma.
    • Manutenção: Centralizar a lógica de localização em um único componente simplifica o gerenciamento das URLs, tornando seu código mais fácil de manter e expandir conforme sua aplicação cresce.

    Abaixo está a implementação de um componente Link localizado em TypeScript:

    src/components/Link.tsx

    Copiar conteúdo

    Copiar código

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

    import { getLocalizedUrl } from "intlayer";
    import {
      forwardRef,
      type DetailedHTMLProps,
      type AnchorHTMLAttributes,
    } from "react";
    import { useLocale } from "react-intlayer";
    
    export interface LinkProps extends DetailedHTMLProps<
      AnchorHTMLAttributes<HTMLAnchorElement>,
      HTMLAnchorElement
    > {}
    
    /**
     * Função utilitária para verificar se uma URL é externa.
     * Se a URL começar com http:// ou https://, é 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 = forwardRef<HTMLAnchorElement, LinkProps>(
      ({ href, children, ...props }, ref) => {
        const { locale } = useLocale();
        const isExternalLink = checkIsExternalLink(href);
    
        // Se o link for interno e um href válido for fornecido, obtenha a URL localizada.
        const hrefI18n =
          href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
    
        return (
          <a href={hrefI18n} ref={ref} {...props}>
            {children}
          </a>
        );
      }
    );
    
    Link.displayName = "Link";
    

    Como Funciona

    • Detectando Links Externos:
      A função auxiliar checkIsExternalLink determina se uma URL é externa. Links externos são mantidos inalterados porque não precisam de localização.

    • Recuperando a Localização Atual:
      O hook useLocale fornece a localidade atual (por exemplo, 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 seu usuário estiver em francês, passar /about como href será transformado em /fr/about.

    • Retornando o Link:
      O componente retorna um elemento <a> com a URL localizada, garantindo que a navegação seja consistente com o idioma.

    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 beneficiar-se de uma melhor SEO e usabilidade.

11. 1

    Extrair o conteúdo dos seus componentes

    Opcional

    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:

    intlayer.config.ts

    Copiar conteúdo

    Copiar código

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

    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;
    

    Comando de extraçãoCompilador Babel

    Execute o extrator para transformar seus componentes e extrair o conteúdo

    bash

    Copiar conteúdo

    Copiar código

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

    npx intlayer extract
    

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

    vite.config.ts

    Copiar conteúdo

    Copiar código

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

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

    bash

    Copiar conteúdo

    Copiar código

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

    npm run build # Ou npm run dev
    

(Opcional) Sitemap e robots.txt (geração no build)

A Intlayer expõe utilitários - generateSitemap e getMultilingualUrls - para formatar um sitemap.xml multilíngue e um robots.txt prontos para crawlers e os gravar automaticamente em public/. Normalmente corre um pequeno script Node antes do Vite (por exemplo hooks npm predev / prebuild) para que os ficheiros existam no build ou no servidor de desenvolvimento.

Sitemap

O gerador de sitemaps da Intlayer respeita as suas línguas e inclui os metadados habituais.

O sitemap suporta o espaço de nomes xhtml:link (hreflang). Em vez de listar apenas URLs soltas, a Intlayer liga de forma bidireccional todas as versões localizadas de cada página (por exemplo /about, /fr/about ou /about?lang=fr consoante o modo de rotas).

Robots.txt

Use getMultilingualUrls para que as regras Disallow cubram todas as variantes localizadas de caminhos sensíveis.

1. Criar generate-seo.mjs na raiz do projeto

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

O pacote intlayer tem de estar instalado. Defina SITE_URL no ambiente em produção (por exemplo na CI).

Prefira generate-seo.mjs para ESM no Node. Se usar generate-seo.js, garanta "type": "module" no package.json ou execute o Node com ESM.

2. Executar o script antes do Vite

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Ajuste os comandos se usar pnpm ou yarn. Também pode invocar o script a partir da CI ou de outro passo do pipeline.

Configurar TypeScript

O Intlayer utiliza a ampliação de módulos para aproveitar 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 gerados automaticamente.

{
  // ... Suas configurações existentes do TypeScript
  "include": [
    // ... Suas configurações existentes do TypeScript
    ".intlayer/**/*.ts", // Inclua os tipos gerados automaticamente
  ],
}

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite que você evite comitá-los no seu repositório Git.

Para isso, você pode adicionar as seguintes instruções ao seu arquivo .gitignore:

# Ignore 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 Intlayer VS Code Extension.

Instalar no VS Code Marketplace

Esta extensão oferece:

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

Para mais detalhes sobre como usar a extensão, consulte a documentação da Extensão Intlayer para VS Code.

Avançar Mais

Para avançar mais, você pode implementar o editor visual ou externalizar seu conteúdo usando o CMS.

Perguntas Frequentes