Build Modern Documentation Sites with Next.js & Fumadocs Framework

Fumadocs is a documentation framework built for developers who want to create beautiful, functional, and performant documentation sites using Next.js.

It solves three core problems in documentation site development: generating visually pleasing designs, facilitating easy content writing, and transforming content into usable data within the Next.js environment. Every part of the process is carefully managed.

Features

Use Cases

• Open Source Project Documentation: Imagine you’ve built a JavaScript library. You can use Fumadocs to create a dedicated documentation site, making it easy for others to learn, use, and contribute to your project.
• Internal API Documentation: If your company has internal APIs, Fumadocs can provide a centralized, searchable, and easy-to-navigate documentation platform. This helps internal teams work more efficiently.
• Software Development Kit (SDK) Guides: When you release an SDK, comprehensive documentation is essential. Fumadocs provides the structure and features to build detailed guides, tutorials, and reference materials.
• Product Documentation: If you need a well-organized online documentation site for you product. Fumadocs helps you present information, guide users through tasks, and solve their problems.
• Technical Writing Portfolio: As a technical writer, you could use Fumadocs to showcase your writing skills and host your portfolio.

Installation

To get started with Fumadocs, you’ll need Node.js 18 or later (though it’s worth noting that Node.js 23.1 might have some compatibility issues with Next.js production builds).

The easiest way to begin is with the automatic installation:

npm create fumadocs-app

This command initializes a new Fumadocs app.

If you’re integrating into an existing codebase, you’ll want to follow the Manual Installation guide provided in the Fumadocs documentation.

Usage

Let’s look at a basic example. Create your first MDX file within the docs folder:

content/docs/index.mdx

---
title: Hello World
---
## Yo what's up

To run the app in development mode, use:

npm run dev

This will make your documentation site available at http://localhost:3000/docs.

Key Concepts

• lib/source.ts: This file handles how Fumadocs interacts with your content source. The loader() function is crucial here.
• app/layout.config.tsx: This is where you can define shared options for your layouts.
• app/(home): This route group is for your landing page.
• app/docs: This contains your documentation layout and pages.
• app/api/search/route.ts: This Route Handler manages the search functionality.
• Content Source Customization: Fumadocs MDX allows you to customize how it handles content, including frontmatter validation. You can also build a custom content source for other systems like Sanity.
• Sidebar Customization: Sidebar elements use Page Tree to define the structure. You can change the page tree for organizing your documents.
• UI Customization: Since the design system is built on Tailwind CSS, change colors is very easy.

Fumadocs CLI lets you install Fumadocs UI components and layouts directly into your codebase. Install the CLI using:

npm install @fumadocs/cli --save-dev

Related Resources

• Contentlayer – Type-safe content management for Next.js
  https://contentlayer.dev
• Shadcn UI – Component library with copy-paste customization
  https://ui.shadcn.com
• Algolia DocSearch – Free documentation search for OSS projects
  https://docsearch.algolia.com

FAQs

Q: Can I use a CMS other than Markdown with Fumadocs?
A: Yes. While Fumadocs has native support for Markdown and Fumadocs MDX, you can create a custom content source to integrate with other systems, such as Sanity or a headless CMS.

Q: How can I customize the appearance of my documentation site?
A: Fumadocs offers several ways to customize the UI. You can modify colors using CSS Variables (since it’s built on Tailwind CSS), use props like style and className on provided components, or utilize Fumadocs CLI for full code-level customization.

Q: Can I use Fumadocs for purposes other than documentation?
A: While Fumadocs specializes in documentation, the flexibility of Next.js and Fumadocs’s adaptable content management allow its use in other contexts. Consider using it for blogs, portfolios, or simple static websites.

Q: Can I use non-Markdown content sources?
A: Yes. Fumadocs supports CMS integrations through custom content source adapters.

Q: Is App Router required?
A: Yes. Fumadocs uses Next.js 13+ App Router conventions for layout management.

Q: What performance optimizations are included?
A: Automatic image compression, reduced client components, and static page generation.

Preview