MDX no Next.js: escrevendo conteúdo com componentes
·1 min read·
mdxnextjsreact
O que é MDX?
MDX é um formato que permite escrever Markdown com componentes React embutidos. Isto significa que podes usar a sintaxe familiar do Markdown e ter a flexibilidade de componentes React quando precisares.
Configuração
Para usar MDX no Next.js com next-mdx-remote:
npm install next-mdx-remote gray-matter
Depois, cria uma função para compilar o conteúdo MDX:
import { compileMDX } from "next-mdx-remote/rsc";
const { content } = await compileMDX({
source: rawMDX,
options: { parseFrontmatter: false },
});
Vantagens
- Sintaxe familiar - Markdown para o conteúdo básico
- Componentes React - Quando precisas de interatividade
- Frontmatter - Metadados estruturados com YAML
- Tempo de leitura - Calculado automaticamente a partir do conteúdo
Exemplo de frontmatter
---
title: "Meu artigo"
date: "2026-04-19"
tags: ["react", "mdx"]
---
Dica
Usa gray-matter para fazer parse do frontmatter separadamente do conteúdo MDX. Assim podes usar os metadados para gerar listas de artigos sem compilar todo o MDX.