Next.js dokumentace na Fumadocs

Rozvržení, domovská stránka a pomocné funkce SEO pro weby s dokumentací vytvořené pomocí Next.js a Fumadocs.

Terminál

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

Začínáme

GitHub

Nejnovější vydání 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>
  );
}

V praxi

Onedocs předává jeden konfigurační objekt rozvržením Fumadocs UI.

Jedna konfigurace, jedno rozvržení

onedocs.config.ts obsahuje název webu, popis a repozitář GitHub a DocsLayout jej načítá spolu se stromem stránek ze zdroje Fumadocs.

Rozvržení vykresluje postranní panel, přepínač motivu, odkaz GitHub vytvořený z nav.github a dialog vyhledávání, který dotazuje trasu /api/search, již přidáte.

Průvodce Začínáme popisuje další soubory: zdroj obsahu, konfiguraci Next.js, kořenové rozvržení a trasu stránky.

Přečtěte si úvodní příručku

Konfigurace

import { defineConfig } from "onedocs/config";

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

Rozvržení dokumentace

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

Připravená rozvržení

DocsLayout, DocsPage a HomePage vám poskytnou prostředí dokumentace s postranním panelem, vyhledáváním a obsahem i úvodní stránku.

Jeden konfigurační soubor

defineConfig() v onedocs.config.ts nastavuje název, popis, logo, navigační odkazy, zápatí, úvodní sekci domovské stránky a její funkce.

Nejdřív Markdown

Pište soubory .md nebo .mdx do složky s obsahem; každá stránka bude mít zvýraznění syntaxe a obsah.

Vyhledávání

Vestavěné vyhledávání Orama v Fumadocs. Přidejte jednu trasu API pomocí createFromSource a dialog vyhledávání ji začne používat.

Tmavý režim

Světlý a tmavý motiv poskytuje Fumadocs UI a rozvržení dokumentace obsahuje přepínač motivu. Loga a favicony podporují světlé a tmavé varianty.

Připraveno pro TypeScript

Podpora TypeScript s typově bezpečnou konfigurací a automatickým doplňováním v editoru.

SEO a llms.txt

Pomocné funkce pro sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadata stránek a obrázky Open Graph.

Přizpůsobitelné

Možnost přímo použít komponenty Fumadocs, když potřebujete mít nad dokumentací větší kontrolu.

Prozkoumejte kompletní průvodce Onedocs, od instalace a prvního použití až po pokročilé pracovní postupy a podrobnosti o API.

Přečíst dokumentaci

Zobrazit zdrojový kód