Como Construir um Site Next.js em 10 Idiomas (Guia do App Router 2026)

Construir um site multilíngue é um dos investimentos de maior alavancagem que você pode fazer em SEO e conversão. Setenta e seis por cento dos compradores online preferem comprar produtos com informações em sua língua nativa (CSA Research, 2020), mas menos de 5% dos sites ativos suportam mais de três idiomas. Recentemente lançamos o Frida Marketing em 10 idiomas no Next.js 15 App Router — sem next-intl, sem um SaaS de tradução e sem 10 bases de código separadas. Veja exatamente como o construímos.

Principais Conclusões

• 76% dos compradores preferem comprar em sua língua nativa; 40% nunca comprarão de sites que não a oferecem (CSA Research, 2020)
• O inglês cobre apenas 49,7% do conteúdo web global — construir um site multilíngue desbloqueia os outros 50,3% (W3Techs, junho de 2026)
• Um segmento dinâmico [lang] + uma computação de prefixo de API serve 10 idiomas a partir de um único conjunto de arquivos de página
• Gemini 2.5 Flash traduz uma postagem HTML completa de 3.000 palavras por idioma em menos de 90 segundos a custo quase zero

Por Que Construir Multilíngue É Mais Barato do Que Você Pensa

O argumento de custo contra sites multilíngues é quase sempre exagerado. O Next.js 15 App Router lida com toda a camada de roteamento através de um único segmento dinâmico. A camada de conteúdo — títulos, corpo, metadados — vem da sua API por idioma. E a camada de tradução pode ser totalmente automatizada.

O inglês representa 49,7% de todo o conteúdo de sites por idioma. Espanhol e alemão detêm 6,0% cada, japonês 5,0% e francês 4,6% (W3Techs, junho de 2026). Apenas o suporte aos cinco principais idiomas não-ingleses cobre aproximadamente 70% do conteúdo web global indexado. O Next.js é executado em 2,7% de todos os sites globalmente e 17,9% dos desenvolvedores pesquisados o utilizam (Stack Overflow Developer Survey, 2024) — o que significa que as ferramentas e o suporte da comunidade para Next.js multilíngue estão melhores do que nunca.

O custo real não é o código — é o conteúdo. Uma vez que seu roteamento esteja configurado, adicionar um idioma é uma chamada de API por postagem publicada. Publicamos 7 postagens em 10 idiomas com custo zero de manutenção por idioma. A decisão de arquitetura é o investimento; o tempo de execução é gratuito.

96% das empresas que investiram em localização relataram ROI positivo, com 65% alcançando pelo menos um retorno de 3x (DeepL Business Survey, 2024). O caso de negócios é sólido. A barreira técnica é muito menor do que a maioria dos desenvolvedores espera.

Como Estruturar Seu Segmento Dinâmico [lang]

O Next.js App Router transforma seu sistema de arquivos em seu roteador. Crie um diretório src/app/[lang]/ e cada rota dentro dele recebe params.lang automaticamente. Esse único parâmetro é a base de um site de 10 idiomas.

`` src/app/ ├── page.tsx ← Página inicial em inglês (/) ├── blog/[slug]/page.tsx ← Postagens de blog em inglês ├── admin/layout.tsx ← Administração em inglês └── [lang]/ ├── page.tsx ← Todas as outras páginas iniciais de idiomas (/fi, /fr, /de…) ├── blog/[slug]/page.tsx ← Postagens de blog por idioma └── admin/ └── layout.tsx ← Administração por idioma (mesmo arquivo, lê params.lang) ``

O inglês reside na raiz. Todos os outros idiomas residem sob [lang]. Você escreve um arquivo e deixa params.lang guiar a lógica — nunca há cópias de página específicas para cada idioma.

Defina sua configuração de idioma em um arquivo canônico:

```typescript // src/lib/languages.ts export const LANGUAGES = [ { code: 'fi', urlPrefix: 'fi', apiPrefix: 'fi_', name: 'Finlandês' }, { code: 'fr', urlPrefix: 'fr', apiPrefix: 'fr_', name: 'Francês' }, { code: 'de', urlPrefix: 'de', apiPrefix: 'de_', name: 'Alemão' }, { code: 'it', urlPrefix: 'it', apiPrefix: 'it_', name: 'Italiano' }, { code: 'no', urlPrefix: 'no', apiPrefix: 'no_', name: 'Norueguês' }, { code: 'ch', urlPrefix: 'ch', apiPrefix: 'pt_', name: 'Alemão Suíço' }, // ⚠️ API uses pt_ { code: 'sr', urlPrefix: 'sr', apiPrefix: 'sr_', name: 'Sérvio' }, { code: 'es', urlPrefix: 'es', apiPrefix: 'es_', name: 'Espanhol' }, { code: 'sw', urlPrefix: 'sv', apiPrefix: 'sw_', name: 'Sueco' }, // ⚠️ URL uses sv ];

export const LANG_CODES = LANGUAGES.map(l => l.code); ```

Duas peculiaridades a documentar imediatamente: ch (alemão suíço) usa pt_ como seu prefixo de API por razões históricas de nomenclatura, e sw (sueco) usa sv como seu prefixo de URL para corresponder ao padrão ISO. Essas inconsistências não causarão bugs se você centralizar a configuração, mas confundirão qualquer desenvolvedor que se junte ao projeto sem esta documentação.

Conectando Rotas de Idioma à Sua API de Backend

Toda a integração da API multilíngue é uma única computação:

``typescript const prefix = params.lang ? ${params.lang}_ : ''; const posts = await fetch(${API_URL}/api/${prefix}posts); ``

Quando params.lang é 'fi', isso busca /api/fi_posts. Quando é undefined (raiz em inglês), busca /api/posts. Cada página, cada chamada de dados, cada operação de administração usa este mesmo padrão. Não há um auxiliar de busca por idioma, nenhuma instrução switch, nenhum caso especial.

Executamos este padrão em 10 idiomas e 5 tipos de conteúdo — postagens, produtos, páginas, autores e categorias — em produção. O único caso extremo que encontramos: alguns endpoints de API têm estruturas diferentes para o inglês versus as versões específicas do idioma. Em nossa configuração, /api/{lang}_posts/by-url/{slug} existe para cada idioma, mas o equivalente em inglês é um controlador completamente diferente (/api/resolve-route?url=...). Sempre verifique suas rotas de API em inglês separadamente — elas são frequentemente estruturadas de forma diferente das específicas do idioma, especialmente em backends Laravel onde as rotas em inglês foram construídas primeiro.

O painel de administração usa o mesmo padrão de prefixo:

``typescript // src/app/[lang]/admin/posts/page.tsx export default function AdminPostsPage({ params }: { params: { lang?: string } }) { const prefix = params.lang ? ${params.lang}_ : ''; // Buscar de /api/${prefix}posts // Construir links de edição/exclusão com /${params.lang}/admin/edit-post/${id} } ``

Um único componente AdminPostsPage serve todos os 10 painéis de administração de idiomas. O painel de administração em inglês reside em /admin/posts; o finlandês reside em /fi/admin/posts. Mesmo arquivo.

Gerando Páginas Estáticas para Todos os 10 Idiomas

A geração estática é onde os sites multilíngues Next.js obtêm sua vantagem de desempenho. Use generateStaticParams para pré-renderizar cada variante de idioma no momento da construção:

```typescript // src/app/[lang]/page.tsx — páginas iniciais estáticas por idioma export async function generateStaticParams() { return LANG_CODES.map(lang => ({ lang })); // Retorna: [{lang:'fi'},{lang:'fr'},{lang:'de'},...] }

// src/app/[lang]/blog/[slug]/page.tsx — postagens de blog estáticas por idioma export async function generateStaticParams({ params }: { params: { lang: string } }) { const prefix = params.lang ? ${params.lang}_ : ''; const res = await fetch(${API_URL}/api/${prefix}posts); const data = await res.json(); return data.data.map((post: { url: string }) => ({ slug: post.url })); } ```

Páginas estáticas aparecem como ● na saída de next build. Elas são pré-renderizadas para HTML no momento da implantação, são enviadas para o CDN de borda da Vercel e carregam em milissegundos globalmente. Para um site de 10 idiomas, esta é a diferença entre um TTFB de 50ms e um acesso ao servidor de origem de 800ms em cada requisição.

Uma regra para memorizar: nunca combine generateStaticParams com buscas { cache: 'no-store' } na mesma página. Em builds de produção do Next.js 15, isso gera Error: Page changed from static to dynamic at runtime — um bug que só aparece em produção, não em desenvolvimento. Use ISR em vez disso:

``typescript const res = await fetch(${API_URL}/api/${prefix}posts, { next: { revalidate: 3600 }, // Regenerar páginas desatualizadas a cada hora }); export const dynamicParams = true; // Permitir novos slugs sem uma reconstrução completa ``

next-intl registra 2,3 milhões de downloads semanais no npm em junho de 2026, tornando-se a biblioteca dominante no espaço. É a escolha certa se você precisa de formatação sensível ao local ou gerenciamento de strings de UI codificadas. Para sites CMS orientados a dados, é opcional — o roteamento puro do App Router lida com tudo o que você realmente precisa.

SEO para um Site de 10 Idiomas: Hreflang e generateMetadata

Hreflang informa ao Google qual versão de idioma servir a qual público. Sem ele, suas 10 páginas de idioma competem entre si pelas mesmas consultas. A implementação do App Router é limpa:

```typescript // src/lib/hreflang.ts const HREFLANG_CODE: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'de-CH', // Código interno do alemão suíço → BCP 47 de-CH sr: 'sr', es: 'es', sw: 'sv', // Código interno sw → ISO sv (Sueco) };

export function getAlternates(routeKey: string, lang?: string) { const BASE = 'https://fridamarketing.com'; const enUrl = ${BASE}/${routeKey};

const languages: Record = { 'x-default': enUrl, en: enUrl, };

for (const [code, hreflang] of Object.entries(HREFLANG_CODE)) { const urlPrefix = code === 'sw' ? 'sv' : code; languages[hreflang] = ${BASE}/${urlPrefix}/${routeKey}; }

return { canonical: lang ? ${BASE}/${lang === 'sw' ? 'sv' : lang}/${routeKey} : enUrl, languages, }; } ```

Use-o em generateMetadata em cada página:

``typescript export async function generateMetadata({ params }: Props): Promise { const post = await fetchPost(params.lang, params.slug); return { title: post.meta_title, description: post.meta_description, alternates: getAlternates(blog/${post.url}, params.lang), }; } ``

Isso gera um conjunto completo de hreflang para cada página — x-default, en e todas as 9 variantes de idioma — com zero manutenção manual. Não há blocos hreflang de sitemap XML para manter sincronizados; o Next.js os injeta como tags no renderizado.

De acordo com pesquisas de SEO multilíngue, empresas que investem em localização veem 300–500% mais tráfego orgânico de mercados internacionais (MotionPoint, 2025). A camada hreflang é o que captura esse tráfego. Sem ela, o Google ignora os sinais de idioma ou exibe a versão errada para cada localidade.

Automatizando a Tradução: API Gemini no Seu Pipeline de Publicação

A tradução manual em 10 idiomas é o modelo errado para qualquer equipe sem um orçamento dedicado à localização. A tradução humana custa $0,15–$0,30 por palavra — uma postagem de 2.500 palavras custa $375–$750 por idioma, ou $3.375–$6.750 para todos os 9 (Seatongue, 2025). A pós-edição de tradução automática reduz isso em 50–70%. Mas para conteúdo HTML estruturado de um CMS, a tradução de API totalmente automatizada com um prompt preciso é ainda melhor.

Aqui está a chamada de tradução principal que usamos com o Gemini 2.5 Flash:

``javascript async function translatePost(content, targetLang) { const prompt = Traduza o seguinte JSON para ${targetLang}. Regras: - Traduza todos os valores de texto: title, intro, body, meta_title, meta_description - Preserve TODAS as tags HTML, atributos e estrutura no corpo exatamente como estão - Gere um slug localizado seguro para URL e retorne-o como "url" - Mantenha nomes de marcas, exemplos de código e nomes próprios em inglês - Retorne apenas JSON válido: { title, intro, body, meta_title, meta_description, url }

Conteúdo: ${JSON.stringify(content)}`;

const response = await gemini.generateContent(prompt); return JSON.parse(response.text()); } ```

Executamos isso em produção para 7 postagens publicadas, cada uma traduzida para 9 idiomas automaticamente. A qualidade está pronta para publicação em finlandês, francês, alemão, espanhol e italiano sem revisão manual. Norueguês e sueco precisam de verificações pontuais ocasionais. O sérvio precisa de uma revisão de um revisor — o Gemini é menos confiável com o cirílico em contextos HTML complexos. Para um site com muito conteúdo, esta abordagem reduz o custo de tradução em mais de 90% em comparação até mesmo com fluxos de trabalho de pós-edição de tradução automática.

O tempo importa. Uma postagem HTML de 3.000 palavras leva o Gemini 2.5 Flash aproximadamente 60–90 segundos por idioma. Isso significa 9–13 minutos para todas as 9 traduções. Sempre defina um tempo limite de aborto de 150 segundos em cada chamada de API e implemente um backoff exponencial — o modelo ocasionalmente trava sob alta demanda:

``javascript const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 150000); try { const res = await fetch(GEMINI_URL, { signal: controller.signal, ...opts }); clearTimeout(timeoutId); return res; } catch (err) { clearTimeout(timeoutId); if (err.name === 'AbortError') { // Tentar novamente com backoff exponencial await new Promise(r => setTimeout(r, Math.pow(2, attempt) * 5000)); } } ``

84% dos profissionais de marketing dizem que a localização de conteúdo ajudou a aumentar sua receita, e empresas que investiram em tradução tiveram 1,5x mais probabilidade de ver um aumento na receita (Redokun, 2025). A automação remove o último bloqueador real — o custo operacional de executar traduções em escala.

---

Construindo um site Next.js multilíngue? Projetamos e construímos sites Next.js para públicos globais — roteamento i18n completo, SEO hreflang e pipelines de tradução automatizados incluídos. Veja nossos serviços de desenvolvimento Next.js ou entre em contato para discutir seu projeto.

---

Perguntas Frequentes

Preciso de next-intl para construir um site Next.js multilíngue?

Não. O Next.js 15 App Router lida com o roteamento multilíngue nativamente através de um segmento dinâmico [lang]. Bibliotecas como next-intl agregam valor para formatação sensível ao local (datas, moedas, pluralização) e gerenciamento de strings de UI codificadas. Se seu conteúdo vem de um CMS ou API, você não precisa delas para roteamento, geração estática ou SEO.

Como mapeio prefixos de idioma de URL para endpoints de API no Next.js?

Calcule um prefixo em tempo de execução: const prefix = params.lang ? \${params.lang}_\ : '';. Use-o em cada chamada de busca — por exemplo, /api/${prefix}posts. Este padrão lida com todos os 10 idiomas a partir de um único arquivo de página compartilhado. Nenhuma página específica de idioma, nenhuma instrução switch, nenhum caso especial.

Qual a melhor forma de traduzir automaticamente um site Next.js para vários idiomas?

Use Gemini 2.5 Flash ou GPT-4 em seu pipeline de publicação. Envie o conteúdo em inglês como JSON com um prompt de sistema para traduzir todos os valores de texto, preservando as tags HTML e gerando um slug de URL localizado. Adicione um tempo limite de 150 segundos e backoff exponencial. A pós-edição de tradução automática custa 50–70% menos do que a tradução humana completa (Seatongue, 2025), e a automação completa da API reduz isso ainda mais.

Como adiciono tags hreflang a um site Next.js 15 App Router?

Crie uma função getAlternates(routeKey, lang) que retorna um objeto alternates do Next.js. Mapeie códigos de URL internos para códigos de idioma BCP 47 — sw → sv para sueco, ch → de-CH para alemão suíço — e inclua x-default apontando para o canônico em inglês. Retorne-o de alternates.languages dentro do export generateMetadata de cada página.

Quantos idiomas meu site deve suportar?

Comece com 2–3 que correspondam às suas principais fontes de tráfego e, em seguida, expanda. O inglês cobre apenas 49,7% do conteúdo web global (W3Techs, junho de 2026), então qualquer segundo idioma abre um novo público-alvo com custo marginal quase zero, uma vez que seu pipeline de roteamento e tradução esteja configurado. Empresas que investem em localização relatam 96% de ROI positivo, com 65% alcançando pelo menos um retorno de 3x (DeepL, 2024).

Conclusão

Um site Next.js de 10 idiomas não é 10x o trabalho. É um segmento dinâmico [lang], uma computação de prefixo de API, um auxiliar hreflang e um script de tradução — multiplicados em seu pipeline de publicação. Construímos isso para a Frida Marketing e ele funciona em produção em 10 idiomas sem custo de manutenção por idioma e sem assinatura de SaaS de localização.

O roteamento é trabalho de uma manhã. O hreflang é trabalho de uma tarde. O pipeline de tradução é um projeto de fim de semana. E o retorno — alcançar os 50,3% da web que não são em inglês — é permanente.

Comece com o segmento [lang] hoje. Adicione hreflang esta semana. Conecte a API de tradução Gemini este mês.