Documentación de Next.js para Fumadocs
Diseños, una página de inicio y herramientas auxiliares SEO para sitios de documentación creados con Next.js y Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Última versión 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>
);
}En la práctica
Onedocs pasa un objeto de configuración a los diseños Fumadocs UI.
Una configuración, un diseño
onedocs.config.ts contiene el título, la descripción y el repositorio GitHub del sitio, y DocsLayout lo lee junto con el árbol de páginas de su fuente Fumadocs.
El diseño muestra la barra lateral, el selector de tema, un enlace GitHub creado a partir de nav.github y el cuadro de búsqueda, que consulta una ruta /api/search que usted añade.
La guía de inicio muestra los demás archivos: la fuente del contenido, la configuración Next.js, el diseño raíz y la ruta de 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>
);
}Diseños listos para usar
DocsLayout, DocsPage y HomePage le ofrecen una estructura para la documentación con barra lateral, búsqueda e índice, además de una página de inicio.
Un archivo de configuración
defineConfig() en onedocs.config.ts define el título, la descripción, el logotipo, los enlaces de navegación, el pie de página y el encabezado y las características de la página de inicio.
Markdown primero
Escriba archivos .md o .mdx en su carpeta de contenido, con resaltado de sintaxis e índice en cada página.
Buscar en
Búsqueda integrada de Fumadocs. Añada una ruta API con createFromSource y el cuadro de búsqueda la utilizará.
Modo oscuro
Los temas claro y oscuro proceden de Fumadocs UI, y el diseño de documentación incluye su selector de tema. Los logotipos y los iconos de favorito admiten variantes claras y oscuras.
Listo para TypeScript
Compatibilidad con TypeScript, con configuración segura en cuanto a tipos y autocompletado en su editor.
SEO y llms.txt
Herramientas auxiliares para sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadatos de página e imágenes Open Graph.
Personalizable
Acceso directo a componentes Fumadocs cuando necesite más control sobre la documentación.
Explora la guía completa de Onedocs, desde la instalación y los primeros pasos hasta los flujos de trabajo avanzados y los detalles de la API.