Zum Inhalt springen

Einführung

Onedocs ist eine Sammlung von Layouts, Komponenten und Hilfsfunktionen für Dokuwebsites mit Next.js und Fumadocs. Du schreibst Markdown, beschreibst deine Website in einer Konfigurationsdatei und erhältst von Onedocs das Doku-Grundgerüst, eine Startseite und die SEO-Routen.

Es ist für eigenständige Dokumentationswebsites gedacht, nicht dafür, einer vorhandenen Anwendung eine Doku hinzuzufügen.

Was Onedocs bietet

Zusätzlich zu Fumadocs bietet dir das onedocs-Paket:

  • Layouts – DocsLayout und DocsPage umschließen das Fumadocs-UI-Docs-Layout mit Seitenleiste, Suche, Theme-Umschalter und Inhaltsverzeichnis. HomePage rendert eine Landingpage mit Hero-Bereich, Installationsbefehlen, Features und Fußzeile.
  • Eine Konfigurationsdatei – onedocs.config.ts enthält Titel, Beschreibung, Logo, Favicon, Navigationslinks, Fußzeile und Inhalte der Startseite.
  • MDX-Komponenten – mdxComponents registriert Infoboxen, Tabs, Karten, Schritte, Akkordeons, Dateibäume, Bildzoom und Typentabellen, sodass Seiten sie ohne Importe verwenden können.
  • CSS-Preset – Ein Import bindet Tailwind CSS v4, das Fumadocs-UI-Theme und die Onedocs-Layout-Styles ein.
  • SEO-Hilfsfunktionen – Funktionen für sitemap.xml, robots.txt, llms.txt, llms-full.txt, Seitenmetadaten und Open Graph-Bilder.

Was du selbst einrichtest

Onedocs bündelt weder Next.js noch Fumadocs. Beides sind Peer-Abhängigkeiten, die du zusätzlich installierst:

Shell
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562 next react react-dom

Außerdem benötigst du Tailwind CSS v4, Node.js 20.9 oder neuer sowie etwa zehn kleinere Dateien: die Next.js- und Fumadocs-MDX-Konfiguration, eine Inhaltsquelle, das Root-Layout, das Docs-Layout und die Docs-Seitenroute. Unter Erste Schritte werden alle Dateien vorgestellt.

Wo du was konfigurierst

Was Wo
Websitetitel, Logo, Navigation, Fußzeile onedocs.config.ts, siehe Konfiguration
Hero-Bereich und Features der Startseite homepage in onedocs.config.ts, gerendert von HomePage in src/app/page.tsx
Docs-Layout und Seiten src/app/docs/layout.tsx und src/app/docs/[[...slug]]/page.tsx, siehe Erste Schritte
Inhaltsordner und Reihenfolge der Seitenleiste source.config.ts und content/docs/meta.json
MDX-Komponenten mdxComponents, siehe Komponenten
Suche, Sitemap, robots.txt, llms.txt Routendateien unter src/app/, siehe SEO und Suche
Metadaten und Open Graph-Bilder onedocs/metadata und onedocs/og, siehe API-Referenz

Leitbild

  • Markdown-first – Schreibe .md- oder .mdx-Dateien und erhalte deine Doku
  • Eine Konfigurationsdatei – Websiteweite Einstellungen stehen in onedocs.config.ts
  • Erweiterungsmöglichkeiten – Du brauchst mehr Kontrolle? Verwende Fumadocs direkt

Hier starten