Документація Next.js на Fumadocs

Макети, домашня сторінка й хелпери SEO для сайтів документації на Next.js і Fumadocs.

Термінал

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

Початок роботи

GitHub

Останній випуск 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>
  );
}

На практиці

Onedocs передає один об’єкт конфігурації макетам Fumadocs UI.

Одна конфігурація, один макет

onedocs.config.ts містить назву сайту, опис і репозиторій GitHub, а DocsLayout зчитує його разом із деревом сторінок вашого джерела Fumadocs.

Макет відображає бічну панель, перемикач теми, посилання GitHub, створене на основі nav.github, і діалог пошуку, який надсилає запити до маршруту /api/search, який ви додасте.

У посібнику «Початок роботи» описано решту файлів: джерело вмісту, конфігурацію Next.js, кореневий макет і маршрут сторінки.

Читати посібник «Початок роботи»

Конфігурація

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

Готові макети

DocsLayout, DocsPage і HomePage надають оболонку документації з бічною панеллю, пошуком і змістом, а також цільову сторінку.

Один файл конфігурації

defineConfig() у onedocs.config.ts задає назву, опис, логотип, посилання навігації, нижній колонтитул, а також головний блок і переваги домашньої сторінки.

Спершу Markdown

Пишіть файли .md або .mdx у папці вмісту; на кожній сторінці будуть підсвічування синтаксису та зміст.

Пошук

Вбудований пошук Orama в Fumadocs. Додайте один маршрут API із createFromSource, і діалог пошуку використовуватиме його.

Темний режим

Світла й темна теми беруться з Fumadocs UI, а макет документації містить перемикач теми. Для логотипів і фавіконів можна вказати світлі й темні варіанти.

Готовність до TypeScript

Підтримка TypeScript із типобезпечною конфігурацією та автодоповненням у редакторі.

SEO і llms.txt

Хелпери для sitemap.xml, robots.txt, llms.txt, llms-full.txt, метаданих сторінок і зображень Open Graph.

Можливість налаштування

Можна напряму використовувати компоненти Fumadocs, коли потрібен більший контроль над документацією.

Перегляньте повний посібник Onedocs: від встановлення та першого використання до розширених робочих процесів і відомостей про API.

Читати документацію

Переглянути вихідний код