Dokumentasi Next.js di Fumadocs
Tata letak, halaman beranda, dan helper SEO untuk situs dokumentasi yang dibuat dengan Next.js dan Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Rilis terbaru 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>
);
}Dalam praktik
Onedocs meneruskan satu objek config ke tata letak Fumadocs UI.
Satu config, satu tata letak
onedocs.config.ts menyimpan judul situs, deskripsi, dan repositori GitHub, lalu DocsLayout membacanya bersama hierarki halaman dari sumber Fumadocs Anda.
Tata letak merender sidebar, pengalih tema, tautan GitHub yang dibuat dari nav.github, serta dialog pencarian yang meminta rute /api/search yang Anda tambahkan.
Panduan Memulai menunjukkan file lainnya: sumber konten, config Next.js, tata letak root, dan rute halaman.
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>
);
}Tata Letak Siap Pakai
DocsLayout, DocsPage, dan HomePage menyediakan kerangka dokumentasi dengan sidebar, pencarian, dan daftar isi, serta halaman landing.
Satu File Config
defineConfig() di onedocs.config.ts menetapkan judul, deskripsi, logo, tautan navigasi, footer, serta hero dan fitur halaman beranda.
Markdown-Dulu
Tulis file .md atau .mdx di folder konten Anda, dengan penyorotan sintaks dan daftar isi di setiap halaman.
Pencarian
Pencarian Orama bawaan Fumadocs. Tambahkan satu rute API dengan createFromSource agar dialog pencarian dapat menggunakannya.
Mode Gelap
Tema terang dan gelap berasal dari Fumadocs UI, dan tata letak dokumentasi menyertakan pengalih temanya. Logo dan favicon menerima varian terang dan gelap.
Siap TypeScript
Dukungan TypeScript dengan konfigurasi aman tipe dan pelengkapan otomatis di editor Anda.
SEO dan llms.txt
Helper untuk sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadata halaman, dan gambar Open Graph.
Dapat dikustomisasi
Jalur langsung ke komponen Fumadocs saat Anda memerlukan kontrol lebih atas dokumentasi.
Jelajahi panduan lengkap Onedocs, mulai dari instalasi dan penggunaan pertama hingga alur kerja tingkat lanjut dan detail API.