Documentazione Next.js per Fumadocs
Layout, home page e helper SEO per siti di documentazione realizzati con Next.js e Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Ultima versione 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>
);
}Nella pratica
Onedocs passa un unico oggetto di configurazione ai layout Fumadocs UI.
Una configurazione, un layout
onedocs.config.ts contiene titolo e descrizione del sito e il repository GitHub, mentre DocsLayout lo legge insieme all'albero delle pagine della sorgente Fumadocs.
Il layout visualizza la barra laterale, il selettore del tema, un collegamento GitHub creato da nav.github e il dialogo di ricerca, che interroga una route /api/search aggiunta da voi.
La guida introduttiva illustra gli altri file: la sorgente dei contenuti, la configurazione Next.js, il layout principale e la route della pagina.
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>
);
}Layout già pronti
DocsLayout, DocsPage e HomePage offrono una struttura per la documentazione con barra laterale, ricerca e indice, oltre a una pagina iniziale.
Un solo file di configurazione
defineConfig() in onedocs.config.ts imposta titolo, descrizione, logo, collegamenti di navigazione, piè di pagina, sezione principale e funzionalità della home page.
Markdown prima di tutto
Scrivete file .md o .mdx nella cartella dei contenuti, con evidenziazione della sintassi e indice in ogni pagina.
Ricerca
Ricerca Orama integrata di Fumadocs. Aggiungete una route API con createFromSource e il dialogo di ricerca la userà.
Modalità scura
I temi chiaro e scuro provengono da Fumadocs UI e il layout della documentazione include il relativo selettore. I loghi e le favicon accettano varianti chiare e scure.
Compatibile con TypeScript
Supporto TypeScript con configurazione sicura rispetto ai tipi e completamento automatico nell'editor.
SEO e llms.txt
Helper per sitemap.xml, robots.txt, llms.txt, llms-full.txt, metadati delle pagine e immagini Open Graph.
Personalizzabile
Accesso diretto ai componenti Fumadocs per avere più controllo sulla documentazione.
Esplora la guida completa di Onedocs, dall’installazione e dal primo utilizzo ai flussi di lavoro avanzati e ai dettagli dell’API.