Usando o globalize.now com o Next.js

Configure a internacionalização em um app Next.js em menos de cinco minutos.

O Next.js tem suporte de primeira classe para i18n por meio de bibliotecas como next-intl e next-i18next, mas essas bibliotecas esperam uma base de código que já tenha chaves de tradução implementadas. O globalize.now é a etapa anterior: ele parte de um app Next.js repleto de textos em inglês fixos no código e produz as chaves, os arquivos de locale e os componentes refatorados que o next-intl (ou qualquer outra biblioteca de runtime) pode servir.

Pré-requisitos

  • Um projeto Next.js (App Router ou Pages Router)
  • Um repositório Git
  • Node.js 18+
  • Uma biblioteca de runtime de i18n escolhida (next-intl é a recomendada)

Como configurar o globalize.now com Next.js

  1. Instale sua biblioteca de runtime

    Adicione o next-intl ou a biblioteca de sua preferência para que o app possa carregar as mensagens por locale em tempo de execução.

    npm install next-intl

  2. Configure o roteamento básico do next-intl

    Configure o middleware, os providers e os segmentos de rota conforme descrito na documentação do next-intl, ou pule esta etapa se já a tiver concluído.

  3. Execute o instalador de skills do Globalize

    A partir da raiz do projeto Next.js, instale as skills para que o agente possa se alinhar à sua configuração de roteamento.

    npx skills add globalize-now/globalize-skills --all

  4. Confirme a detecção do next-intl

    Deixe o agente verificar se os providers e os caminhos de mensagens correspondem às convenções que o globalize.now espera para o Next.js.

  5. Revise a estrutura de arquivos de locale proposta

    Inspecione o diretório de mensagens e os nomes de arquivo sugeridos para garantir que sigam o padrão de uma mensagem por locale que você escolheu.

  6. Refatore os literais para chamadas de tradução

    Aprove as atualizações que substituem o inglês embutido por t() ou helpers equivalentes conectados ao seu provider.

  7. Envie (push) para o Git

    Faça o merge do branch e envie (push) para que o globalize.now possa manter as traduções sincronizadas nos próximos pushes do Git.

Problemas comuns

O next-intl espera uma estrutura de mensagens específica

Resolução: O globalize.now detecta automaticamente a convenção do next-intl e grava o JSON de acordo com as pastas de locale configuradas, reduzindo a necessidade de reestruturação manual.

Já tenho algumas strings traduzidas — o globalize.now vai sobrescrevê-las?

Resolução: As chaves existentes são preservadas sempre que possível, e novos literais são adicionados de forma incremental, para que os tradutores não percam o trabalho já feito.

Perguntas frequentes

O globalize.now funciona com o next-intl e o next-i18next?

Sim. O globalize.now foca na estrutura do repositório — chaves, catálogos JSON e pontos de chamada nos componentes —, enquanto o next-intl ou o next-i18next continua carregando as mensagens em tempo de execução. Escolha o runtime que combine com o seu modelo de roteamento; o globalize.now adapta a saída a essa escolha. Você ainda executa npx skills add globalize-now/globalize-skills uma vez por projeto na inicialização, a menos que queira atualizar as skills intencionalmente.

O globalize.now oferece suporte tanto ao App Router quanto ao Pages Router?

Sim. As agent skills detectam o estilo de roteamento que você usa e alinham a extração com os arquivos de layout, route handlers e providers corretos. O globalize.now não substitui o roteamento do Next.js; ele garante que as strings que passam por essas rotas fiquem com chaves. Depois da configuração, tanto os server components quanto os client components do App Router referenciam os mesmos arquivos de idioma que o seu runtime espera.

Posso usar o globalize.now em um app Next.js que já tem i18n parcial?

Sim. Aponte o agente para o repositório e ele vai estender os pacotes de mensagens existentes, preenchendo as lacunas onde ainda houver literais. Isso é comum quando só as páginas de marketing foram traduzidas primeiro. O globalize.now mescla novas chaves sem descartar traduções antigas, então as equipes podem migrar tela por tela.

O globalize.now trata server components e client components de forma diferente?

O globalize.now reescreve os literais usando o helper que sua stack utiliza em cada contexto, respeitando as regras do Next.js sobre onde hooks e providers podem rodar. A saída em JSON continua compartilhada entre os bundles de servidor e cliente, então você não duplica catálogos. Você continua seguindo a documentação do Next.js para marcar client components quando a interatividade exigir isso.

Como o globalize.now se integra à geração estática do Next.js?

Os arquivos de idioma ficam no Git, então o `next build` continua empacotando o mesmo JSON que suas rotas SSG ou SSR já importam via next-intl. O globalize.now não muda o pipeline de geração estática além de garantir que as strings venham de arquivos de dados em vez de literais. Quando um novo texto é publicado, outro push no Git atualiza as traduções antes do próximo deploy.

Devo instalar o next-intl antes de rodar npx skills add globalize-now/globalize-skills?

Instalar o next-intl primeiro é ideal quando você já sabe que esse será o seu runtime, porque o agente pode conectar os providers imediatamente. Se você ainda não escolheu uma biblioteca, ainda assim pode rodar npx skills add globalize-now/globalize-skills — as skills ajudam a recomendar uma stack —, mas você pode executar a configuração novamente depois de instalar as dependências. Nos dois caminhos, o resultado final são chaves versionadas no Git e sincronizadas a cada push.

Experimente o globalize.now com Next.js

Comece pela raiz do seu projeto:

npx skills add globalize-now/globalize-skills --all

Volte para a página inicial para conhecer o produto e os preços →

Outras integrações

Comece grátis