Como Criar um Blog com Next.js e Ganhar

Por que Next.js para blog (e não WordPress)

WordPress ainda domina o mercado de blogs, mas pra desenvolvedor, é uma escolha ruim em 2026. A razão principal: performance. WordPress padrão tem Largest Contentful Paint (LCP) de 3-6 segundos, cheio de plugin bloatware e PHP legado. Um blog Next.js bem feito tem LCP abaixo de 1 segundo. O Google recompensa velocidade com posição — essa diferença de performance se traduz diretamente em mais tráfego orgânico.

Controle total é outro ponto. No WordPress, você briga com o tema, os plugins conflitam entre si, e qualquer customização além do básico exige PHP ou gambiarras. No Next.js, você escreve React e tem controle absoluto sobre cada pixel e cada kilobyte de JavaScript que vai pro cliente. Quer um componente de código com syntax highlight específico? Instala o que quiser. Quer uma seção de comentários customizada? Você faz.

O custo é zero. Blog Next.js hospedado na Vercel ou Cloudflare Pages não paga nada. WordPress hospedado decentemente custa R$20-80/mês e ainda exige cuidado com segurança, backups e atualizações. Com Next.js, o GitHub faz o versionamento, a Vercel faz o deploy automático, e você foca em escrever. Sem vulnerabilidades de plugin, sem atualização manual do core, sem servidor pra gerenciar.

Setup do blog

MDX para conteúdo

MDX é Markdown com superpowers — você escreve em Markdown normal e pode inserir componentes React quando precisar. Perfeito pra blog técnico. Cria uma pasta src/content/posts/ e cada arquivo .mdx vira um post. No frontmatter (cabeçalho YAML), você define title, description, date, tags, e slug. No corpo, escreve o post em Markdown. Pra configurar, instala @next/mdx e @mdx-js/loader e adiciona o withMDX no next.config.ts.

Um exemplo de frontmatter: title: 'Como aprender TypeScript em 30 dias', date: '2026-03-01', tags: ['TypeScript', 'Programação'], description: 'Um guia prático...'. O Next.js lê esses metadados pra gerar a metadata da página, a listagem do blog, e o sitemap. Você escreve uma vez, o sistema usa em vários lugares.

Geração estática

Pra blog, geração estática é o caminho certo. Cada post é gerado no build como HTML estático. Quando o usuário acessa, o servidor entrega o HTML pronto — sem processamento, sem banco de dados, zero overhead. Usa generateStaticParams no src/app/blog/[slug]/page.tsx pra listar todos os slugs dos posts MDX. O Next.js gera cada um no build. O resultado são arquivos HTML que qualquer CDN entrega em dezenas de milissegundos.

Sistema de tags e categorias

Tags e categorias não precisam de banco de dados. Você lê os frontmatters de todos os posts, agrega as tags únicas, e gera as páginas de tag dinamicamente. Cria src/app/blog/tag/[tag]/page.tsx com generateStaticParams listando todas as tags. Cada página de tag lista os posts com aquela tag, estática no build. Mesma coisa pra categorias. Sem backend, sem banco, sem complexidade — só JavaScript puro no build time.

SEO para blog em Next.js

Metadata API

A Metadata API do Next.js é declarativa e completa. Cada page.tsx exporta um objeto metadata ou uma função generateMetadata. No generateMetadata do blog post, você lê o frontmatter do MDX e monta o objeto: title com o formato 'Título do Post | Nome do Blog', description com o excerpt, openGraph com title, description, tipo 'article', publishedTime e authors, e twitter card. Tudo isso vai pra tag automaticamente, na estrutura correta que os scrapers das redes sociais e o Google esperam.

Sitemap dinâmico

O src/app/sitemap.ts é gerado no build e fica disponível em /sitemap.xml. Você lê todos os arquivos MDX da pasta de posts, extrai slug e data, e retorna o array de URLs com lastModified. O Google Bots consome esse sitemap e indexa todas as páginas novas automaticamente. Sem precisar submeter URL por URL no Search Console. Adiciona o link do sitemap no robots.txt e o Search Console vai encontrar tudo.

Structured data (schema.org)

Schema.org de artigo aumenta a chance de rich snippets no Google. Adiciona um componente JsonLd no template de post que injeta um `` com o schema de Article: headline, description, author name, datePublished, dateModified, e image. O Google usa isso pra entender melhor o conteúdo e potencialmente mostrar o artigo com data e autor nos resultados de busca — que aumenta CTR.

Core Web Vitals

Next.js já cuida dos Core Web Vitals por padrão. O componente faz lazy loading automático, previne layout shift com placeholder de tamanho, serve WebP e AVIF, e ajusta o tamanho pelo viewport. next/font carrega fontes sem FOIT/FOUT, sem layout shift de fonte. Server Components garantem que o HTML inicial já tem o conteúdo — não tem 'carregando' em tela em branco como em SPA. Pra um blog com conteúdo estático e imagens otimizadas, atingir nota 90+ no PageSpeed é padrão, não exceção.

Integrando Google AdSense

Requisitos para aprovação

Google AdSense tem critérios pra aprovação que muita gente ignora. Você precisa de: conteúdo original e de qualidade (não é copy-paste de outros sites), domínio próprio (não *.vercel.app), pelo menos 15-20 posts publicados antes de solicitar, páginas de Política de Privacidade e Termos de Uso, e contato visível. O site precisa estar ativo por pelo menos 6 meses na maioria dos casos. Tráfego mínimo não é obrigatório, mas sites com zero visitas raramente são aprovados rápido.

Instalando o script no Next.js

Usa o componente ` do next/script com strategy='afterInteractive' pra carregar o script do AdSense sem bloquear a renderização da página. Adiciona no layout.tsx root. O data-ad-client é o seu Publisher ID (ca-pub-XXXXXXXX). Pra cada unidade de anúncio, cria um componente com useEffect pra chamar (adsbygoogle = window.adsbygoogle || []).push({}) quando o componente monta. Usa 'use client'` nesse componente.

Posicionamento dos anúncios

Posicionamento importa mais do que quantidade de anúncios. Os spots que mais convertem: após o primeiro ou segundo parágrafo (leitor já engajado mas ainda tem muito conteúdo pela frente), no meio do artigo, e no final antes dos artigos relacionados. Evita sidebar em mobile — ninguém vê. Evita anúncios acima do fold — prejudica LCP e Core Web Vitals. O Google penaliza sites com anúncios intrusivos, então menos anúncios bem posicionados > muitos anúncios espalhados.

Auto ads vs manual placement

Auto Ads deixa o Google decidir onde colocar os anúncios automaticamente. É fácil de configurar mas você perde controle — o Google pode colocar anúncio em lugares que prejudicam a leitura. Manual placement dá mais trabalho mas você controla exatamente onde cada anúncio aparece e em quais páginas. Pra começar, Auto Ads é ok. Depois de um mês analisando o relatório do AdSense, você entende quais posições performam melhor e muda pra manual.

Quanto dá pra ganhar (realista)

CPM no Brasil

CPM é o custo por mil impressões que os anunciantes pagam. No Brasil, o CPM médio fica entre R$1-5 dependendo do nicho. Tecnologia e finanças pagam mais — R$3-8. Entretenimento e culinária pagam menos — R$0.50-2. Estados Unidos pagam 10-20x mais que o Brasil, então site em inglês com audiência americana tem CPM de $5-20. Esses números parecem decentes mas a conta em escala revela a realidade.

Projeção por volume de tráfego

Com CPM médio de R$3 e uma boa taxa de visualização de anúncios, a conta fica: 10.000 visitas/mês = R$30/mês. 50.000 visitas/mês = R$150/mês. 100.000 visitas/mês = R$300/mês. 500.000 visitas/mês = R$1.500/mês. Pra ganhar R$5.000/mês só com AdSense no Brasil, você precisaria de 1-2 milhões de visitas mensais. Esse é o nível de tráfego de sites nacionais com equipes de jornalismo. Pra pessoa física começando, AdSense sozinho é renda extra, não renda principal.

Nichos que pagam mais

Os nichos com maior CPM no Brasil: finanças pessoais e investimentos (R$5-15), seguros e crédito (R$8-20), tecnologia B2B e SaaS (R$5-10), saúde e medicina (R$4-8). Os que pagam menos: games, entretenimento geral, culinária simples. Se o objetivo é maximizar receita de AdSense, nicho financeiro é o caminho — mas a competição é brutal e produzir conteúdo de qualidade requer pesquisa séria.

Complementando AdSense com outras fontes

A estratégia mais inteligente não é depender só do AdSense. Com o blog já rodando e trazendo tráfego, você adiciona camadas de monetização. Afiliados de produtos relacionados ao nicho do blog ficam naturalmente no conteúdo — um post sobre ferramentas de desenvolvimento indica links de afiliado das ferramentas. Posts de review são especialmente eficazes: o leitor já está considerando comprar, você aparece no momento certo.

Newsletter captura os leitores mais engajados. Com 10.000 visitas/mês e conversão de 2%, você tem 200 assinantes por mês. Em 6 meses, sua lista já tem 1.200 pessoas que gostam do seu conteúdo. Essa audiência tem valor enorme pra produto próprio ou esponsorização. Um produto digital de R$197 vendido pra 1% da lista de 1.200 = R$2.364 de receita com um único lançamento — mais que meses de AdSense.

Estratégia de conteúdo para tráfego orgânico

Pesquisa de palavras-chave

Pesquisa de palavra-chave não precisa de ferramenta cara. Google Search Console (gratuito) mostra com o que o seu site já aparece nas buscas. Ubersuggest tem tier gratuito com dados de volume e competição. Ahrefs e SEMrush têm versão free limitada mas útil pra verificar keywords específicas. A estratégia mais eficaz pra site novo: foca em long-tail keywords (frases de 4+ palavras) com volume de 100-1000 buscas/mês e competição baixa. Mais fácil de rankar e o intenção de busca é mais específica.

Calendário editorial

Consistência bate intensidade no SEO. Publicar 2 posts por semana por 6 meses é muito melhor que publicar 20 posts em um mês e sumir. O Google favorece sites que publicam regularmente — sinal de site ativo e relevante. Cria um calendário simples: segunda e quinta-feira você publica. Organiza uma fila de tópicos com 30-60 entradas usando sua pesquisa de palavras-chave. Escreve com antecedência nos fins de semana e agenda a publicação.

Long-tail keywords que rankeiam rápido

Long-tail keywords são frases específicas que a maioria dos blogs grandes não briga. Enquanto todo mundo tenta rankar pra 'Next.js tutorial', você pode rankar pra 'como criar blog com Next.js MDX e Tailwind CSS' — volume menor mas competição quase zero. Dez artigos com long-tail keywords bem escolhidos trazem mais tráfego qualificado do que um artigo tentando rankar pra keyword genérica com 50 mil concorrentes. A longo prazo, esses artigos específicos também convertem melhor porque o leitor chegou com intenção muito clara.