Documentação de Next.js sobre Fumadocs
Layouts, uma página inicial e auxiliares de SEO para sites de documentação criados com Next.js e Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Versão mais recente 0.1.27 MIT Next.js 16, Node 20.9+
import { HomePage, CTASection } from "onedocs";
export default function Home() {
return (
<HomePage config={config} packageName="my-package">
<CTASection
title="Ready to get started?"
cta={{ label: "Read the Docs", href: "/docs" }}
/>
</HomePage>
);
}Na prática
Onedocs passa um único objeto de configuração aos layouts Fumadocs UI.
Uma configuração, um layout
onedocs.config.ts contém o título e a descrição do site, além do repositório GitHub, e DocsLayout o lê junto com a árvore de páginas da sua fonte Fumadocs.
O layout renderiza a barra lateral, o controle de tema, um link GitHub criado a partir de nav.github e a janela de pesquisa, que consulta uma rota /api/search que você adiciona.
O guia Primeiros passos mostra os outros arquivos: a fonte de conteúdo, a configuração Next.js, o layout raiz e a rota da página.
import { defineConfig } from "onedocs/config";
export default defineConfig({
title: "My Docs",
description: "Documentation for my project",
nav: {
github: "username/repo",
},
});import { DocsLayout } from "onedocs";
import type { ReactNode } from "react";
import { source } from "@/lib/source";
import config from "../../../onedocs.config";
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout config={config} pageTree={source.pageTree}>
{children}
</DocsLayout>
);
}Layouts prontos
DocsLayout, DocsPage e HomePage oferecem uma estrutura de documentação com barra lateral, pesquisa e sumário, além de uma página inicial.
Um arquivo de configuração
defineConfig() em onedocs.config.ts define o título, a descrição, o logotipo, os links de navegação, o rodapé, o destaque e os recursos da página inicial.
Markdown em primeiro lugar
Escreva arquivos .md ou .mdx na pasta de conteúdo, com realce de sintaxe e sumário em cada página.
Pesquisa
Pesquisa Orama integrada de Fumadocs. Adicione uma rota API com createFromSource para que a janela de pesquisa a utilize.
Modo escuro
Os temas claro e escuro vêm de Fumadocs UI, e o layout da documentação inclui um controle para alterná-los. Logotipos e ícones de favoritos aceitam variantes claras e escuras.
Pronto para TypeScript
Suporte a TypeScript com configuração segura quanto aos tipos e preenchimento automático no editor.
SEO e llms.txt
Auxiliares para sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadados de página e imagens Open Graph.
Personalizável
Acesso direto aos componentes Fumadocs quando você precisar de mais controle sobre a documentação.
Explore o guia completo do Onedocs, da instalação e dos primeiros passos até os fluxos de trabalho avançados e os detalhes da API.