Документация Next.js для Fumadocs
Макеты, главная страница и вспомогательные функции SEO для сайтов документации на Next.js и Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Последний выпуск 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>
);
}На практике
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, а в макете документации есть переключатель темы. Для логотипов и favicon можно указать светлый и темный варианты.
Поддержка TypeScript
Поддержка TypeScript с типобезопасной конфигурацией и автодополнением в редакторе.
SEO и llms.txt
Вспомогательные функции для sitemap.xml, robots.txt, llms.txt, llms-full.txt, метаданных страниц и изображений Open Graph.
Настраиваемость
При необходимости большего контроля можно напрямую использовать компоненты Fumadocs.
Изучите полное руководство по Onedocs: от установки и первого использования до продвинутых сценариев работы и описания API.