Fumadocs Has a Free API: Build Beautiful Documentation Sites with Next.js

#webdev #javascript #nextjs #tutorial

What is Fumadocs?

Fumadocs is a powerful documentation framework built on Next.js App Router. It's the modern alternative to Docusaurus and GitBook — fully integrated with React Server Components, MDX, and the Next.js ecosystem.

The best part? Fumadocs has a free CLI and content API that makes building docs sites incredibly fast.

Getting Started in 60 Seconds

npx create-fumadocs-app my-docs
cd my-docs
npm run dev

That's it. You have a fully functional documentation site with:

Full-text search (built-in)
Sidebar navigation (auto-generated from file structure)
Dark mode
MDX support with custom components
OpenAPI integration

The Content Source API

Fumadocs uses a content source API that transforms your MDX files into structured, searchable data:

import { loader } from "fumadocs-core/source";
import { createMDXSource } from "fumadocs-mdx";
import { docs, meta } from "@/.source";

export const source = loader({
  baseUrl: "/docs",
  source: createMDXSource(docs, meta),
});

Query Pages Programmatically

import { source } from "@/lib/source";

// Get all pages
const pages = source.getPages();

// Get page tree (for navigation)
const tree = source.pageTree;

// Find a specific page
const page = source.getPage(["getting-started"]);
console.log(page?.data.title); // "Getting Started"
console.log(page?.data.description);

OpenAPI Integration

Fumadocs can auto-generate API reference docs from your OpenAPI spec:

import { createOpenAPI } from "fumadocs-openapi/server";

const openapi = createOpenAPI({
  documentOrPath: "./openapi.json",
});

// Generates interactive API playground pages

Your users get:

Interactive request builder
Response schemas
Authentication helpers
Code examples in multiple languages

Built-in Search

import { createSearchAPI } from "fumadocs-core/search/server";
import { source } from "@/lib/source";

export const { GET } = createSearchAPI("advanced", {
  indexes: source.getPages().map((page) => ({
    title: page.data.title,
    description: page.data.description,
    url: page.url,
    id: page.url,
    structuredData: page.data.structuredData,
  })),
});

Full-text search with zero external dependencies — no Algolia needed.

Custom MDX Components

import { Callout, Steps, Tab, Tabs } from "fumadocs-ui/components";

<Callout type="warn">
  This API is rate-limited to 100 requests per minute.
</Callout>

<Steps>
  <Step>Install the SDK</Step>
  <Step>Configure your API key</Step>
  <Step>Make your first request</Step>
</Steps>

<Tabs items={["npm", "pnpm", "yarn"]}>
  <Tab value="npm">```

bash npm install my-sdk

 ```</Tab>
  <Tab value="pnpm">```

bash pnpm add my-sdk

 ```</Tab>
</Tabs>

Why Fumadocs Over Docusaurus?

Feature	Fumadocs	Docusaurus
Framework	Next.js App Router	React (custom)
RSC Support	✅	❌
TypeScript	First-class	Partial
OpenAPI	Built-in	Plugin
Search	Built-in	Plugin
Bundle Size	~50KB	~200KB+