Se você já tentou criar um site em React e ouviu alguém dizer “mas isso é ruim pra SEO” ou “React é pesado, vai ficar lento”, este artigo é pra você.
Nos últimos anos eu testei vários setups de front-end em projetos reais: sites de clientes, páginas de venda, blogs, landing pages para tráfego pago. Em muitos casos, quando migrei um site tradicional (WordPress “pesado”, temas cheios de plugins) para Next.js + React, eu vi:
E a melhor parte: você não precisa ser um “senhor fullstack” para começar. Dá pra ter um site extremamente rápido e bem otimizado para SEO com pouco conhecimento técnico, desde que você siga uma estrutura clara.
Por que velocidade e SEO importam tanto hoje
Vamos alinhar o cenário antes de falar de Next.js.
Quando comecei a trabalhar com campanhas de tráfego pago para clientes, percebi que muitas vezes o problema não era o anúncio, nem o criativo. Era a página.
Alguns ganhos reais que eu já vi ao otimizar velocidade:
É aqui que Next.js entra como um “atalho” pra você construir algo rápido, moderno e amigável pra SEO, mesmo sem dominar back-end.
O que são React e Next.js (explicado de forma simples)
Antes de falar de SEO, precisamos entender essas duas peças:
React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces de usuário (UI). Na prática, é o que você usa para montar componentes:
Você escreve sua interface em pequenos blocos reutilizáveis.
Next.js é um framework construído em cima do React. Ele pega o poder do React e adiciona um monte de coisa que, sozinho, o React não entrega pronto:
Em resumo: React é o motor. Next.js é o carro pronto, regulado e com direção hidráulica pra você não sofrer.
Por que Next.js deixa seu site muito mais rápido
A grande sacada do Next.js para SEO e performance é a forma como ele entrega a página para o usuário e para o Google.
Com React puro (SPA – Single Page Application):
Com Next.js, você pode usar:
Isso significa:
Em projetos de conteúdo (blogs, páginas institucionais, landing pages), SSG costuma ser extremamente eficiente: você gera tudo estático e coloca numa hospedagem simples ou até num serviço gratuito como Vercel.
Passo a passo: criando seu primeiro projeto Next.js
Agora vamos sair da teoria. Vou assumir que você tem apenas o básico:
Se não, tudo bem. Vamos em blocos.
1. Instalar Node.js
Você precisa do Node instalado. Acesse:
Baixe a versão LTS (a recomendada) e instale.
2. Criar o projeto com Next.js
Abra o terminal (ou Prompt de Comando no Windows) e rode:
npx create-next-app meu-site-otimizadoResponda às perguntas básicas (pode aceitar a maioria dos padrões). Depois:
cd meu-site-otimizadonpm run devAcesse http://localhost:3000 no navegador. Você já tem um projeto React + Next.js rodando.
3. Entender a estrutura mínima de pastas
Na versão atual do Next.js (13+), você provavelmente vai ver uma pasta app/. É aí que ficam suas páginas.
app/page.tsx ou app/page.jsx → é a página inicial (/)app/sobre/page.tsx → vira a rota /sobreVocê não precisa configurar roteador manualmente. Cada pasta dentro de app vira uma rota.
4. Criar uma página simples e leve
Abra app/page.tsx e adapte para algo como:
export default function Home() { return ( <main> <h1>Agência X: sites rápidos e otimizados para SEO</h1> <p> Ajudamos pequenas empresas a vender mais com sites rápidos, responsivos e otimizados para o Google. </p> <a href="/contato">Fale com a gente</a> </main> );}Repare: é só React padrão, mas o Next.js cuida do resto (SSR/SSG, empacotamento, etc.).
Otimizando SEO com Next.js mesmo sendo iniciante
Agora vem a parte que faz diferença: como transformar esse site em algo bem amigável para o Google sem virar um especialista em SEO?
Vou focar em 4 pilares práticos:
1. Definindo título e descrição da página
No Next.js com pasta app/, você usa a propriedade metadata:
export const metadata = { title: 'Agência X - Sites rápidos e otimizados para SEO', description: 'Criamos sites em Next.js e React focados em velocidade, SEO e conversão para pequenos negócios.',};export default function Home() { return ( <main>...</main> );}Isso já gera as tags <title> e <meta name="description"> automaticamente.
Dica prática: para páginas de serviço ou landing pages, use na descrição:
2. Usar headings do jeito certo
Google lê a hierarquia de títulos. Não é só “deixar o texto maior”.
<h1> apenas uma vez por página, com o tema principal.<h2> para seções importantes.<h3>, <h4> etc. para subtópicos.Exemplo de estrutura:
<h1>Sites em Next.js para pequenas empresas</h1><h2>Por que seu site atual está te fazendo perder clientes</h2><h2>Vantagens de um site rápido e otimizado para SEO</h2><h2>Como funciona o nosso processo em 3 etapas</h2>3. Criar URLs limpas e amigáveis
No Next.js, a URL nasce do nome da pasta. Em vez de:
/pagina1 ou /servico-x123Prefira:
/sites-otimizados-seo/criacao-de-landing-pagesVocê faz isso criando pastas com esses nomes dentro de app/:
app/sites-otimizados-seo/page.tsx → /sites-otimizados-seo4. Sitemap e robots.txt sem sofrimento
Para facilitar o trabalho do Google, recomendo usar o pacote next-sitemap.
npm install next-sitemapCrie um arquivo next-sitemap.config.js na raiz:
/** @type {import('next-sitemap').IConfig} */module.exports = { siteUrl: 'https://www.seusite.com.br', generateRobotsTxt: true,};Depois, ajuste seu package.json:
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "postbuild": "next-sitemap"}Ao rodar npm run build, ele gera:
/sitemap.xml/robots.txtIsso já te coloca em um nível acima da média em SEO técnico, sem esforço.
Boas práticas de performance que quase ninguém aplica
Mesmo com Next.js fazendo muita coisa automática, tem alguns detalhes que vejo muita gente ignorar e que impactam muito na prática.
1. Usar <Image /> do Next.js em vez de <img>
O componente Image otimiza a entrega e o carregamento de imagens:
Exemplo:
import Image from 'next/image';export default function Hero() { return ( <section> <Image src="/images/site-rapido.png" alt="Exemplo de site rápido" width={800} height={400} priority /> <h1>Seu site carregando em menos de 2 segundos</h1> </section> );}Use priority apenas para imagens acima da dobra (parte visível sem rolar).
2. Evitar bibliotecas pesadas sem necessidade
Em vários projetos que peguei para otimizar, o problema não era o Next.js, e sim:
Checklist rápido:
3. Carregar scripts externos com cuidado
Pixel de Facebook, Google Analytics, chat online… cada script desses é um peso a mais na sua página.
Com Next.js, você pode usar o componente next/script e controlar melhor:
import Script from 'next/script';export default function Layout({ children }) { return ( <html lang="pt-BR"> <body> {children} <Script src="https://www.googletagmanager.com/gtag/js?id=SEU_ID" strategy="afterInteractive" /> </body> </html> );}O strategy="afterInteractive" ajuda a não travar o carregamento inicial da página.
4. Medir sempre com ferramentas reais
Não confie só na “sensação” de que o site está rápido. Use:
Alguns números para mirar em páginas principais (home, landing pages):
Checklist rápida para lançar seu site em produção
Para fechar de forma prática, segue um checklist que eu mesmo uso quando vou colocar um site Next.js no ar para clientes.
Antes de publicar
title) e descrições (description) em todas as páginas importantesnext/image com dimensões definidasnext/script com estratégia adequadaConfiguração de build e hospedagem
npm run build sem errosnext-sitemap está configurado e gerando sitemap.xml e robots.txtApós publicar
sitemap.xmlPróximos passos para evoluir
React e Next.js costumam assustar no começo pelo nome “técnico”, mas na prática eles resolvem justamente o que mata muitos negócios online: sites lentos, mal estruturados e difíceis de manter.
Se você seguir o que mostrei aqui — criar um projeto simples, cuidar de títulos, headings, URLs, imagens e medir performance com ferramentas reais — já vai estar na frente da maioria dos sites que competem com você.
E o melhor: com uma base bem feita em Next.js, você consegue escalar depois. Pode adicionar novas páginas, landing pages para campanhas, área de membros, blog, tudo em cima da mesma estrutura rápida e otimizada.
