Quickstart

Setup your development environment

A minimum version of Node.js 22 is required. Note that Node.js 23.1 might have issues with the Next.js production build.

npx create-next-app -e https://github.com/techwithanirudh/fumadocs-starter

npx create-next-app -e https://github.com/techwithanirudh/fumadocs-starter --use-pnpm

npx create-next-app -e https://github.com/techwithanirudh/fumadocs-starter --use-yarn

npx create-next-app -e https://github.com/techwithanirudh/fumadocs-starter --use-bun

The Fumadocs template should now be initialized. You can start development!

Start the development server

Run the app in development mode and open http://localhost:3000/docs in your browser.

npm run dev

pnpm run dev

yarn dev

bun run dev

Add your content

Fumadocs uses MDX for documentation, allowing you to write Markdown combined with React components. Add your content inside the content/docs directory. The structure is similar to a standard Next.js app, making it easy to navigate and manage your files. To learn more about MDX, check out the MDX page.

Create your first MDX file in the docs folder:

---
title: Hello World
---

## Yo, what's up?

The app organizes content by concerns, e.g., content/docs/api-reference, content/docs/(index), content/docs/changelog, etc.

Deploy your changes

This template works out-of-the-box with Vercel. You can deploy your documentation site with a single click.

You might need to make some changes, to deploy fully statically.

Docker Deployment

If you want to deploy your Fumadocs app using Docker with Fumadocs MDX configured, make sure to add the source.config.ts file to the WORKDIR in the Dockerfile. The following snippet is taken from the official Next.js Dockerfile Example:

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts ./

This ensures Fumadocs MDX can access your configuration file during builds.

Update your docs

Add content directly in your files using MDX syntax and React components. You can use built-in components or create your own.