Introdução
O Fumadocs (Foo-ma docs) é um framework de documentação baseado em Next.js. Ele foi feito para ser rápido, flexível e se encaixar no App Router do Next.js.
O Fumadocs tem estas partes:
Fumadocs Core
Cuida da maior parte da lógica, inclusive da busca na documentação, dos adaptadores de fonte de conteúdo e das extensões de Markdown.
Fumadocs UI
O tema padrão do Fumadocs, com visual para sites de documentação e componentes interativos.
Fonte de conteúdo
A origem do conteúdo. Pode ser um CMS ou uma camada local, como o Fumadocs MDX (a fonte oficial).
Fumadocs CLI
Ferramenta de linha de comando para instalar componentes de interface e automatizar tarefas. Ajuda a personalizar layouts.
Quer saber mais?
Leia a introdução O que é o Fumadocs.
Terminologia
Markdown/MDX: Markdown é uma linguagem de marcação para texto formatado. O Fumadocs já oferece suporte a Markdown e a MDX (um superconjunto do Markdown).
Não é obrigatório, mas conhecer o básico do App Router do Next.js ajuda nas personalizações seguintes.
Instalação automática
É necessário o Node.js 18 ou superior. O Node.js 23.1 pode ter problemas com o build de produção do Next.js.
npm create fumadocs-appO assistente pergunta:
- qual framework React.js usar (a documentação cobre apenas o Next.js);
- qual fonte de conteúdo usar.
Um app Fumadocs novo é criado. A partir daí, você já pode começar a personalizar.
A partir de um projeto existente?
Siga o guia de instalação manual.
Aproveite
Crie o primeiro arquivo MDX na pasta de documentação.
---
title: Hello World
---
## Yo what's upExecute o app em modo de desenvolvimento e abra http://localhost:3000/docs.
npm run devPerguntas frequentes
Algumas dúvidas comuns.
Atualizar o Fumadocs
Atualize o Fumadocs quando encontrar um problema ou quiser testar recursos novos:
pnpm update -i -r --latestSaiba mais
Está começando agora? Pode perguntar.
Se algo não ficar claro, deixe um comentário nas GitHub Discussions.
Escrever conteúdo
Para escrever a documentação, leia:
Markdown
O Fumadocs tem recursos extras para escrever conteúdo.
Navegação
Veja como personalizar links de navegação e itens da barra lateral.
Rotas
Veja como organizar o conteúdo.
Componentes
Veja os componentes disponíveis para a documentação