Skip to main content
Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça que ele configure tudo para você.
1

(Opcional) Defina o escopo da base de código com o Ask Devin

Se você não tem certeza de como seu app Next.js está estruturado ou quais componentes contêm strings fixas (hardcoded), use o Ask Devin para investigar primeiro:Você também pode iniciar uma sessão do Devin diretamente a partir do Ask Devin, e tudo o que ele já tiver aprendido será mantido como contexto.
2

Inicie a configuração de i18n

Adicionar internacionalização a um app Next.js significa conectar o roteamento por locale, configurar middleware, extrair todas as strings fixas e criar arquivos de tradução — tudo isso antes mesmo de testar uma única troca de idioma. Devin cuida de todo o pipeline: instala next-i18next, configura o roteamento de locale do Next.js, extrai strings de dezenas de componentes e verifica o resultado no navegador.Use o comando de slash /plan no início da sessão para que Devin investigue primeiro sua base de código — ele vai descobrir se você está usando o Pages Router ou o App Router, identificar a biblioteca de i18n correta e descrever a abordagem antes de escrever qualquer código. Revise o plano e sugira mudanças antes que ele comece.
3

Como o Devin realiza a configuração

Devin trabalha de forma metódica na sua base de código Next.js — configurando o pipeline de i18n, extraindo strings e gerando arquivos de locale. Veja como isso funciona:
  1. Instala dependências — Executa npm install next-i18next i18next react-i18next e cria os arquivos de configuração:
  1. Analisa cada componente — Lê cada arquivo em components/ e pages/, identificando texto hardcoded em JSX, atributos como placeholder e aria-label, template literals e mensagens de erro
  2. Gera arquivos de locale — Cria arquivos JSON estruturados em public/locales/:
  1. Substitui strings in-place — Envolve cada componente com useTranslation('common') e troca texto hardcoded por chamadas a t(), lidando com interpolação para valores dinâmicos como t('dashboard.welcome', { name: user.name })
  2. Configura o carregamento no servidor — Adiciona serverSideTranslations a cada página para que as traduções estejam disponíveis no momento da renderização:
  1. Adiciona o seletor de idioma — Cria um menu suspenso na barra de navegação que usa o recurso de alternância de locale do roteador do Next.js:
4

Testar e iterar

Devin executa npm run dev, abre o app em seu navegador integrado e navega entre as rotas /en, /es e /ja para verificar se tudo está funcionando. Se algo estiver quebrado — uma tradução faltando, um layout estourando, uma rota que retorna 404 — Devin corrige e testa novamente automaticamente.Use o comando de barra /test a qualquer momento para pedir ao Devin que execute todos os testes novamente e verifique tudo de novo no navegador. Use /review antes da PR final para que o Devin revise o próprio código em busca de strings faltando, nomes de chaves inconsistentes ou chamadas serverSideTranslations ausentes.Devin verifica:
  • Todo o texto visível está traduzido (sem strings em inglês sobrando no modo espanhol/japonês)
  • Os layouts não quebram com strings em espanhol mais longas ou caracteres japoneses mais largos
  • O seletor de idioma alterna entre os três locales
  • Valores interpolados (nomes de usuário, contagens) são renderizados corretamente em cada locale
  • As regras de pluralização funcionam (por exemplo, “1 item” → “1 件” em japonês, “1 elemento” em espanhol)
  • O roteamento de locale do Next.js funciona — /ja/dashboard mostra a versão em japonês
5

Itere a partir daqui

Depois que a configuração base de i18n estiver pronta, faça melhorias a partir dela.
6

Atualize a configuração do seu repositório

Esta tarefa instala novas dependências (next-i18next, i18next, react-i18next). Depois que o PR for mesclado, atualize a configuração do ambiente para que o snapshot do ambiente do Devin inclua esses pacotes em sessões futuras:
  1. Vá para Settings > Devin’s Environment > Repositories
  2. Selecione seu repositório e clique em Configure
  3. Em Upkeep > Maintain dependencies, confira se o comando de instalação (por exemplo, npm ci) está configurado
  4. Clique em Save para atualizar o snapshot
Você também pode definir uma Upkeep Frequency para que o Devin volte a executar a instalação de dependências automaticamente, em uma programação definida — isso mantém o snapshot atualizado conforme seu package.json evolui, evitando que sessões futuras gastem tempo instalando pacotes na inicialização.
7

Analise o PR com o Devin Review

Depois que o Devin abrir um PR, use o Devin Review para revisar as alterações de i18n. O Devin Review pode identificar strings com texto fixo que passaram batido, nomes inconsistentes de chaves de tradução e chamadas ausentes de serverSideTranslations em diferentes páginas.