Next.js-dokumentation på Fumadocs

Layouts, en startside og hjælpefunktioner til SEO for dokumentationswebsteder bygget med Next.js og Fumadocs.

Terminal

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

Kom godt i gang

GitHub

Seneste udgivelse 0.1.27 2026-03-26 MIT Next.js 16, Node 20.9+

TSX

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>
  );
}

I praksis

Onedocs sender ét konfigurationsobjekt til Fumadocs-layoutsene UI.

Én konfiguration, ét layout

onedocs.config.ts indeholder webstedets titel, beskrivelse og GitHub-repository, og DocsLayout læser det sammen med sidetræet fra din Fumadocs-kilde.

Layoutet gengiver sidepanelet, temaskiftet, et GitHub-link bygget ud fra nav.github og søgedialogen, som forespørger på en /api/search-rute, du tilføjer.

Vejledningen Kom godt i gang gennemgår de øvrige filer: indholdskilden, Next.js-konfigurationen, rodlayoutet og sideruten.

Læs Kom godt i gang

Konfiguration

import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Docs",
  description: "Documentation for my project",
  nav: {
    github: "username/repo",
  },
});

Dokumentationslayout

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>
  );
}

Færdige layouts

DocsLayout, DocsPage og HomePage giver dig en dokumentationsskal med sidepanel, søgning og indholdsfortegnelse samt en landingsside.

Én konfigurationsfil

defineConfig() i onedocs.config.ts angiver titlen, beskrivelsen, logoet, navigationslinkene, sidefoden samt startsidens hero-sektion og funktioner.

Indhold først: Markdown

Skriv .md- eller .mdx-filer i din indholdsmappe med syntaksfremhævning og indholdsfortegnelse på hver side.

Søg efter

Fumadocss indbyggede Orama-søgning. Tilføj én API-rute med createFromSource, så bruger søgedialogen den.

Mørk tilstand

Lyse og mørke temaer kommer fra Fumadocs UI, og dokumentationslayoutet indeholder det tilhørende temaskift. Logoer og favikoner kan have lyse og mørke varianter.

TypeScript-klar

Understøttelse af TypeScript med typesikker konfiguration og automatisk fuldførelse i din editor.

SEO og llms.txt

Hjælpefunktioner til sitemap.xml, robots.txt, llms.txt, llms-full.txt, sidemetadata og Open Graph-billeder.

Kan tilpasses

Mulighed for direkte adgang til komponenter i Fumadocs, når du har brug for mere kontrol over dokumentationen.

Udforsk den komplette Onedocs-vejledning, fra installation og første brug til avancerede workflows og API-detaljer.

Læs dokumentationen

Se kildekode