Next.js-Doku mit Fumadocs
Layouts, eine Startseite und SEO-Hilfsfunktionen für Dokuwebsites mit Next.js und Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Neueste Version 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>
);
}In der Praxis
Onedocs übergibt ein Konfigurationsobjekt an die Fumadocs-UI-Layouts.
Eine Konfiguration, ein Layout
onedocs.config.ts enthält Titel, Beschreibung und das GitHub-Repository der Website. DocsLayout liest es zusammen mit dem Seitenbaum deiner Fumadocs-Quelle aus.
Das Layout rendert die Seitenleiste, den Theme-Umschalter, einen GitHub-Link aus nav.github und den Suchdialog. Dieser fragt eine /api/search-Route ab, die du hinzufügst.
Die Anleitung „Erste Schritte“ zeigt die übrigen Dateien: Inhaltsquelle, Next.js-Konfiguration, Root-Layout und Seitenroute.
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>
);
}Fertige Layouts
DocsLayout, DocsPage und HomePage bilden das Grundgerüst deiner Doku mit Seitenleiste, Suche und Inhaltsverzeichnis sowie einer Landingpage.
Eine Konfigurationsdatei
defineConfig() in onedocs.config.ts legt Titel, Beschreibung, Logo, Navigationslinks, Fußzeile sowie Hero-Bereich und Features der Startseite fest.
Markdown zuerst
Schreibe .md- oder .mdx-Dateien in deinen Inhaltsordner. Jede Seite erhält Syntaxhervorhebung und ein Inhaltsverzeichnis.
Suche
Die integrierte Orama-Suche von Fumadocs. Füge eine API-Route mit createFromSource hinzu, und der Suchdialog verwendet sie.
Dunkelmodus
Das helle und dunkle Theme stammen aus Fumadocs UI. Das Docs-Layout enthält den Theme-Umschalter. Logos und Favicons unterstützen helle und dunkle Varianten.
Bereit für TypeScript
TypeScript-Unterstützung mit typsicherer Konfiguration und Autovervollständigung im Editor.
SEO und llms.txt
Hilfsfunktionen für sitemap.xml, robots.txt, llms.txt, llms-full.txt, Seitenmetadaten und Open Graph-Bilder.
Anpassbar
Erweiterungsmöglichkeiten für Fumadocs-Komponenten geben dir mehr Kontrolle über deine Doku.
Entdecke den vollständigen Onedocs-Leitfaden – von der Installation und den ersten Schritten bis hin zu fortgeschrittenen Workflows und API-Details.