Next.js — dokumentacja Fumadocs
Układy, strona główna i narzędzia pomocnicze SEO dla witryn z dokumentacją opartych na Next.js i Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Najnowsze wydanie 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>
);
}W praktyce
Onedocs przekazuje jeden obiekt konfiguracji do układów Fumadocs UI.
Jedna konfiguracja, jeden układ
onedocs.config.ts przechowuje tytuł witryny, opis i repozytorium GitHub, a DocsLayout odczytuje je wraz z drzewem stron źródła Fumadocs.
Układ wyświetla pasek boczny, przełącznik motywu, link GitHub utworzony na podstawie nav.github oraz okno wyszukiwania, które odpytuje dodaną przez Ciebie trasę /api/search.
Przewodnik Pierwsze kroki przedstawia pozostałe pliki: źródło treści, konfigurację Next.js, główny układ i trasę strony.
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>
);
}Gotowe układy
DocsLayout, DocsPage i HomePage zapewniają szkielet dokumentacji z paskiem bocznym, wyszukiwaniem i spisem treści, a także stronę docelową.
Jeden plik konfiguracji
defineConfig() w onedocs.config.ts ustawia tytuł, opis, logo, linki nawigacyjne, stopkę, a także sekcję główną i funkcje strony głównej.
Najpierw Markdown
Zapisuj pliki .md lub .mdx w folderze z treścią; każda strona będzie miała podświetlanie składni i spis treści.
Wyszukiwanie
Wbudowane wyszukiwanie Fumadocs Orama. Dodaj jedną trasę API za pomocą createFromSource, a okno wyszukiwania będzie z niej korzystać.
Tryb ciemny
Jasny i ciemny motyw pochodzą z Fumadocs UI, a układ dokumentacji zawiera przełącznik motywu. Logo i ikony witryny mogą mieć jasne i ciemne warianty.
Gotowe na TypeScript
Obsługa TypeScript z bezpieczną typowo konfiguracją i autouzupełnianiem w edytorze.
SEO i llms.txt
Narzędzia pomocnicze dla sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadanych stron i obrazów Open Graph.
Możliwość dostosowania
Możliwość bezpośredniego użycia komponentów Fumadocs, gdy potrzebujesz większej kontroli nad dokumentacją.
Poznaj kompletny przewodnik Onedocs — od instalacji i pierwszego użycia po zaawansowane przepływy pracy i szczegóły API.