Next.js docs on Fumadocs
Layouts, a home page and SEO helpers for documentation sites built with Next.js and Fumadocs.
npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562Latest release 0.1.27 MIT Next.js 16 and 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>
);
}In practice
Onedocs passes one config object to the Fumadocs UI layouts.
One config, one layout
onedocs.config.ts holds the site title, description and GitHub repository, and DocsLayout reads it together with the page tree of your Fumadocs source.
The layout renders the sidebar, the theme toggle, a GitHub link built from nav.github and the search dialog, which queries an /api/search route you add.
The Getting Started guide shows the other files: the content source, the Next.js config, the root layout and the page route.
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>
);
}Ready-Made Layouts
DocsLayout, DocsPage and HomePage give you a docs shell with sidebar, search and table of contents, plus a landing page.
One Config File
defineConfig() in onedocs.config.ts sets the title, description, logo, navigation links, footer, and the home page hero and features.
Markdown First
Write .md or .mdx files in your content folder, with syntax highlighting and a table of contents on every page.
Search
Fumadocs' built-in Orama search. Add one API route with createFromSource and the search dialog uses it.
Dark Mode
Light and dark themes come from Fumadocs UI, and the docs layout includes its theme toggle. Logos and favicons accept light and dark variants.
TypeScript Ready
TypeScript support with type-safe configuration and auto-completion in your editor.
SEO and llms.txt
Helpers for sitemap.xml, robots.txt, llms.txt, llms-full.txt, page metadata and Open Graph images.
Customizable
Escape hatches to Fumadocs components when you need more control over your docs.
Explore the complete Onedocs guide, from installation and first use through advanced workflows and API details.