Skip to main content

Adicionar japonês e espanhol a um app Next.js

Devin instala o next-i18next, extrai strings hardcoded para arquivos JSON de locale, adiciona traduções em japonês e espanhol e verifica a troca de idioma no navegador.
AuthorCognition
CategoryDesenvolvimento de funcionalidades
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:
// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'ja'],
  },
};

// next.config.js
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  // ...sua configuração existente
};
  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/: 
// public/locales/en/common.json
{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "loading": "Loading..."
  },
  "auth": {
    "login": "Log in",
    "signup": "Create account",
    "forgotPassword": "Forgot your password?"
  },
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

// public/locales/ja/common.json
{
  "common": {
    "save": "保存",
    "cancel": "キャンセル",
    "loading": "読み込み中..."
  },
  "auth": {
    "login": "ログイン",
    "signup": "アカウント作成",
    "forgotPassword": "パスワードをお忘れですか？"
  },
  "dashboard": {
    "welcome": "おかえりなさい、{{name}}",
    "items_one": "{{count}} 件",
    "items_other": "{{count}} 件"
  }
}

// public/locales/es/common.json
{
  "common": {
    "save": "Guardar",
    "cancel": "Cancelar",
    "loading": "Cargando..."
  },
  "auth": {
    "login": "Iniciar sesión",
    "signup": "Crear cuenta",
    "forgotPassword": "¿Olvidaste tu contraseña?"
  },
  "dashboard": {
    "welcome": "Bienvenido de nuevo, {{name}}",
    "items_one": "{{count}} elemento",
    "items_other": "{{count}} elementos"
  }
}
  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: 
// pages/dashboard.tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});
  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:
// components/LanguageSwitcher.tsx
import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();

  const switchLocale = (locale: string) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <select
      value={router.locale}
      onChange={(e) => switchLocale(e.target.value)}
    >
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="ja">日本語</option>
    </select>
  );
}
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

Iterar daqui em diante

Once the base i18n setup is in place, follow up to extend it.
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 repositório 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.