Tutoriais
Como Criar um Blog com Next.js e Ganhar
Blog com Next.js é rápido, SEO-friendly e gratuito pra hospedar. Aqui vai o setup completo de blog + integração com AdSense + estratégia de tráfego.
DevDoido
15 min de leitura
compartilhar
Blog
Carregando
Blog com Next.js é rápido, SEO-friendly e gratuito pra hospedar. Aqui vai o setup completo de blog + integração com AdSense + estratégia de tráfego.
Como Criar um Blog com Next.js e Ganhar. Blog com Next.js é rápido, SEO-friendly e gratuito pra hospedar. Aqui vai o setup completo de blog + integração com AdSense + estratégia de tráfego.
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.
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.
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.
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.
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 `<head>` automaticamente, na estrutura correta que os scrapers das redes sociais e o Google esperam.
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.
Schema.org de artigo aumenta a chance de rich snippets no Google. Adiciona um componente `JsonLd` no template de post que injeta um `<script type='application/ld+json'>` 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.
Next.js já cuida dos Core Web Vitals por padrão. O componente `<Image>` 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.
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.
Usa o componente `<Script>` 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 `<AdUnit>` com `useEffect` pra chamar `(adsbygoogle = window.adsbygoogle || []).push({})` quando o componente monta. Usa `'use client'` nesse componente.
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 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.
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.
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.
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.
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.
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.
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 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.
O bug que derruba sistemas