Internacionalização de Sites com Next.js: O Guia Definitivo

Em um mercado globalizado, limitar seu site a um único idioma é deixar dinheiro na mesa. Criar um site multilíngue permite alcançar novos mercados e clientes.

Recentemente, refatorei este portfólio para suportar Português, Inglês e Espanhol. Aqui está como fiz.

1. Roteamento por Sub-caminho (Sub-path Routing)

A melhor estratégia para SEO é ter URLs dedicadas para cada idioma:

• meusite.com.br/pt
• meusite.com.br/en
• meusite.com.br/es

Isso permite que o Google indexe cada versão independentemente.

2. Estrutura de Pastas no App Router

No Next.js 13+, usamos Pastas Dinâmicas ([lang]) para capturar o idioma na URL:

src/app/[lang]/
  layout.tsx
  page.tsx (Home)
  about/
    page.tsx

3. Dicionários de Tradução

Em vez de hardcodar textos, criamos arquivos JSON para cada idioma:

// en.json
{
  "welcome": "Welcome to my portfolio",
  "contact": "Contact Me"
}

E uma função utilitária para carregar o dicionário correto baseado no parâmetro lang da URL.

4. Middleware para Redirecionamento

Usamos um Middleware (agora Proxy) para detectar o idioma preferido do navegador do usuário e redirecioná-lo automaticamente se ele acessar a raiz /.

Conclusão

Internacionalizar um projeto Next.js exige planejamento inicial, mas o resultado é uma arquitetura escalável pronta para o mundo.

Quer expandir seu negócio para o mercado internacional? Vamos conversar.