Como criei um blog com Next.js, MDX e componentes interativos gastando R$ 0,00

Fala galerinha! Para alguém que usou muito Wordpress lá em 2015, gostaria de compartilhar convosco algo que naquela época faria qualquer um sentir que é o próprio Tony Stark. (O tempo passou não é mesmo?).

Eu precisava de um blog para um projeto pessoal (o Visconde), mas queria gastar pouco e construir algo bem aesthetic. Queria usar meus próprios componentes do React para construir toda uma experiência personalizada e interessante de verdade para os leitores.

Nada de WordPress pesado, nada de pagar 10 dólares/mês num Ghost, e nada de Medium (onde eu não controlo a audiência nem os componentes). A solução? Next.js App Router + MDX.

A Stack Minimalista

Para fazer tudo rodar 100% focado no servidor (Server Components) e gerar o HTML estático de graça (que você pode hospedar no plano free da Vercel ou Cloudflare Pages), usei apenas duas dependências principais:

• next-mdx-remote: para compilar o MDX direto em React Server Components.
• gray-matter: para extrair o frontmatter YAML (título, data, tags, cover) do topo dos meus .mdx.

Por que não usei a biblioteca oficial @next/mdx?

O Next.js tem um pacote oficial para MDX que transforma todo arquivo .mdx em uma rota mágica dentro da pasta app/. Parece ótimo na teoria, mas na prática é terrível para blogs.

Por quê? Porque você perde o controle programático. Você não consegue facilmente criar uma página "Listar todos os posts" ordenando por data.

Ao invés disso, isolei meus arquivos numa pasta estática src/content/blog/. Eu leio esses arquivos com o fs.readFileSync (sim, o bom e velho file system do Node) e passo o conteúdo bruto para o MDXRemote.

Isso roda em build-time, não pesa o servidor, e me permite ter 100% de controle sobre o roteamento no [slug]/page.tsx.

A Mágica dos Componentes Interativos

A melhor parte dessa stack é a interoperabilidade. Eu defino componentes use client super complexos (com Framer Motion, gerenciamento de estado, etc) e os mapeio no meu compilador MDX.

Na hora de escrever o artigo, eu simplesmente digito <MeuSimulador /> no meio do texto e ele aparece perfeitamente injetado na página estática, com toda a interatividade preservada, sem quebrar o SEO e sem atrasar o carregamento da página.

Talk is cheap. Show me the code!

Como o assunto pode ficar um pouco denso para um único post por aqui, eu escrevi um artigo no próprio blog que acabei de construir dissecando a árvore de arquivos, o código-fonte de como eu leio e mapeio esses arquivos, e como injeto os componentes na tela.

Se você está pensando em criar um blog para você com a stack mais moderna possível (sem gastar um centavo), dá uma olhada na anatomia completa de como o código ficou: Como Construímos um Blog com MDX, Next.js e Componentes Interativos

Alguém aqui já usou uma stack parecida ou prefere ir por um caminho mais tradicional tipo Astro ou CMS Headless (Sanity/Strapi)? Digam-me! E muito obrigado a você que leu até o fim!