Next.js-dokumentaatio kohteessa Fumadocs

Asettelut, etusivu ja SEO-apufunktiot dokumentaatiosivustoille, jotka on rakennettu kohteilla Next.js ja Fumadocs.

Pääte

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

Aloita käyttö

GitHub

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

Käytännössä

Onedocs välittää yhden asetustiedoston olion kohteen Fumadocs UI-asetteluille.

Yksi asetustiedosto, yksi asettelu

onedocs.config.ts sisältää sivuston otsikon, kuvauksen ja GitHub-tietovaraston, ja DocsLayout lukee sen yhdessä Fumadocs-lähteen sivupuun kanssa.

Asettelu piirtää sivupalkin, teeman vaihtopainikkeen, nav.github-tiedoista muodostetun GitHub-linkin ja hakudialogin, joka kyselyttää lisäämääsi /api/search-reittiä.

Aloitusopas esittelee muut tiedostot: sisältölähteen, Next.js-määrityksen, juuriasettelun ja sivureitin.

Lue aloitusopas

Määritys

import { defineConfig } from "onedocs/config";

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

Dokumentaation asettelu

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

Valmiit asettelut

DocsLayout, DocsPage ja HomePage tarjoavat dokumentaatiorungon, jossa on sivupalkki, haku ja sisällysluettelo, sekä aloitussivun.

Yksi asetustiedosto

defineConfig() kohteessa onedocs.config.ts määrittää otsikon, kuvauksen, logon, navigointilinkit, alatunnisteen sekä etusivun pääosion ja ominaisuudet.

Markdown ensin

Kirjoita .md- tai .mdx-tiedostoja sisältökansioon. Jokaisella sivulla on syntaksin korostus ja sisällysluettelo.

Etsi

Fumadocs-sisäänrakennettu Orama-haku. Lisää yksi API-reitti createFromSource-funktiolla, niin hakudialogi käyttää sitä.

Tumma tila

Vaalea ja tumma teema saadaan kohteesta Fumadocs UI, ja dokumentaatioasettelussa on teeman vaihtopainike. Logoista ja sivustokuvakkeista voi käyttää vaaleita ja tummia versioita.

Valmis TypeScript-käyttöön

TypeScript-tuki, jossa on tyyppiturvalliset asetukset ja automaattinen täydennys editorissa.

SEO ja llms.txt

Apufunktiot kohteille sitemap.xml, robots.txt, llms.txt, llms-full.txt, sivun metatiedoille ja Open Graph-kuville.

Mukautettava

Joustovaraa Fumadocs-komponenttien käyttöön, kun tarvitset dokumentaatioosi lisää hallintaa.

Tutustu kattavaan Onedocs-oppaaseen asennuksesta ja ensimmäisestä käyttökerrasta edistyneisiin työnkulkuihin ja API-tietoihin.

Lue dokumentaatio

Näytä lähdekoodi