Uma stack de Markdown/MDX + Next.js oferece um equilíbrio raro entre autonomia editorial e controle técnico. O ponto-chave é manter o parsing, metadados e renderização bem definidos.
Frontmatter como contrato
Frontmatter como contrato
- Campos mínimos: title, slug, date, description, tags, author, draft, coverImage, excerpt.
- Valide o frontmatter no build (zod/yup) para falhar rápido quando faltar informação crítica.
- Slug deve ser estável; evite mudar para não quebrar SEO.
#MD vs MDX
- MD: suficiente para a maioria dos posts; mais seguro e rápido.
- MDX: use quando precisa incorporar componentes React (ex.: Callout, Video, CodeSandbox).
- Padrão: comece em .md e promova para .mdx se o conteúdo exigir.
## Performance e segurança
- Faça lazy-load de componentes pesados em MDX (dynamic import).
- Sanitização/serialized output: evite execução de scripts não controlados.
- Imagens via next/image com otimização automática.
## SEO e acessibilidade
- Derive metatags da frontmatter (title/description/cover).
- Headings hierárquicos (h1 único, h2/h3 bem organizados).
- Links com rel="noopener noreferrer" quando externo.
## DX editorial
- Estruture src/content/posts/*.md com nome de arquivo igual ao slug para localizar fácil.
- Previews locais: rodar dev e ver o post renderizado rapidamente.
- Linters para garantir padrões (ex.: heading capitalização, links válidos).
## Conclusão
Blog com Markdown/MDX é uma solução pragmática e escalável: o time editorial mantém autonomia, o time técnico mantém controle de qualidade e performance. Componentize onde for necessário e mantenha o contrato de frontmatter firme.
- MD: suficiente para a maioria dos posts; mais seguro e rápido.
- MDX: use quando precisa incorporar componentes React (ex.: Callout, Video, CodeSandbox).
- Padrão: comece em
.md e promova para .mdx se o conteúdo exigir.## Performance e segurança
- Faça lazy-load de componentes pesados em MDX (dynamic import).
- Sanitização/serialized output: evite execução de scripts não controlados.
- Imagens via
next/image com otimização automática.## SEO e acessibilidade
- Derive metatags da frontmatter (title/description/cover).
- Headings hierárquicos (h1 único, h2/h3 bem organizados).
- Links com
rel="noopener noreferrer" quando externo.## DX editorial
- Estruture
src/content/posts/*.md com nome de arquivo igual ao slug para localizar fácil.- Previews locais: rodar dev e ver o post renderizado rapidamente.
- Linters para garantir padrões (ex.: heading capitalização, links válidos).
## Conclusão
Blog com Markdown/MDX é uma solução pragmática e escalável: o time editorial mantém autonomia, o time técnico mantém controle de qualidade e performance. Componentize onde for necessário e mantenha o contrato de frontmatter firme.