mdx-components.js

Core Idea

mdx-components.js|tsx é obrigatório para usar @next/mdx com o App Router, não funciona sem ele. Também serve para customizar estilos/componentes usados no MDX.

Key Concepts

• Localização: raiz do projeto, no mesmo nível de pages/app, ou dentro de src se aplicável.
• useMDXComponents(): única função que o arquivo deve exportar; não aceita argumentos; retorna um objeto MDXComponents.

Code Examples

import type { MDXComponents } from 'mdx/types'

const components: MDXComponents = {}

export function useMDXComponents(): MDXComponents {
  return components
}

• O que demonstra: estrutura mínima obrigatória do arquivo, mapa de componentes vazio pronto para customização.

Anti-patterns

• Omitir o arquivo ao usar @next/mdx no App Router: MDX simplesmente não funciona sem ele.
• Exportar função com nome diferente de useMDXComponents: o Next.js espera exatamente esse nome de export.
• Passar argumentos para useMDXComponents: a função não aceita nenhum.

Key Takeaways

1. Arquivo pequeno mas obrigatório: sem ele, MDX no App Router simplesmente não roda.
2. Use o objeto components retornado para mapear tags markdown (h1, img, etc.) para componentes React customizados.

Connects To

• File-system conventions (ch111): índice das convenções.