Documentation Next.js pour Fumadocs
Mises en page, page d’accueil et utilitaires SEO pour les sites de documentation créés avec Next.js et Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Dernière version 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>
);
}En pratique
Onedocs transmet un objet de configuration aux mises en page Fumadocs UI.
Une configuration, une mise en page
onedocs.config.ts contient le titre et la description du site ainsi que le dépôt GitHub, et DocsLayout le lit avec l’arborescence des pages de votre source Fumadocs.
La mise en page affiche la barre latérale, le sélecteur de thème, un lien GitHub créé à partir de nav.github et la fenêtre de recherche, qui interroge une route /api/search que vous ajoutez.
Le guide de démarrage présente les autres fichiers : la source de contenu, la configuration Next.js, la mise en page racine et la route de page.
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>
);
}Mises en page prêtes à l’emploi
DocsLayout, DocsPage et HomePage vous fournissent une structure de documentation avec barre latérale, recherche et table des matières, ainsi qu’une page d’accueil.
Un seul fichier de configuration
defineConfig() dans onedocs.config.ts définit le titre, la description, le logo, les liens de navigation, le pied de page, ainsi que la bannière et les fonctionnalités de la page d’accueil.
Markdown d’abord
Écrivez des fichiers .md ou .mdx dans votre dossier de contenu, avec coloration syntaxique et table des matières sur chaque page.
Recherche
La recherche Orama intégrée de Fumadocs. Ajoutez une seule route API avec createFromSource pour que la fenêtre de recherche l’utilise.
Mode sombre
Les thèmes clair et sombre proviennent de Fumadocs UI, et la mise en page de documentation comprend son sélecteur de thème. Les logos et favicons acceptent des variantes claires et sombres.
Compatible avec TypeScript
Prise en charge de TypeScript avec configuration à sécurité de type et autocomplétion dans votre éditeur.
SEO et llms.txt
Utilitaires pour sitemap.xml, robots.txt, llms.txt, llms-full.txt, les métadonnées de page et les images Open Graph.
Personnalisable
Possibilité d’utiliser directement les composants Fumadocs lorsque vous avez besoin de mieux contrôler votre documentation.
Découvrez le guide complet de Onedocs, de l'installation et des premiers pas aux workflows avancés et aux détails de l'API.