mastering-internationalization.md

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

@Guilherme Rodriguesdate: 2024-02-25read: 1 min#next.js

Aprenda como criar sites multilíngues (i18n) com Next.js App Router, garantindo SEO perfeito para audiências globais.

#Por que Internacionalizar?

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.

Guilherme Rodrigues
Full stack · Santa Maria/RS
export default GuilhermeRodrigues;

Desenvolvedor full stack em Santa Maria/RS. React, Next.js, TypeScript. Sistemas em produção com usuários reais.

— SITE
— LEGAL
— CONTATO
email ↗whatsapp ↗github ↗linkedin ↗
© 2026 Guilherme Rodrigues · v2.0.0built with em Santa Maria/RS
mainutf-8tsx~//blog/mastering-internationalization
palette: vscode-darkguilhermerodrigues.dev.brlive