Create a new fumadocs project from scratch.
Read the Quick Start guide first for basic concept.
Create a new Next.js application with create-next-app, and install required packages.
MkSaaS Docsfumadocs-ui fumadocs-coreFumadocs supports different content sources, you can choose one you prefer.
There is a list of officially supported sources:
Make sure to configure the library correctly following their setup guide before continuing, we will import the source adapter using @/lib/source.ts in this guide.
Wrap the entire application inside Root Provider, and add required styles to body.
import { RootProvider }
Setup Tailwind CSS v4 on your Next.js app, add the following to global.css.
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';It doesn't come with a default font, you may choose one from next/font.
Create a app/layout.config.tsx file to put the shared options for our layouts.
{
"file": "../../examples/next-mdx/app/layout.config.tsx",
"codeblock": {
"meta": "title=\"app/layout.config.tsx\""
}
}Create a folder /app/docs for our docs, and give it a proper layout.
{
"file": "../../examples/next-mdx/app/docs/layout.tsx",
"codeblock": {
"meta": "title=\"app/docs/layout.tsx\""
}
}pageTree refers to Page Tree, it should be provided by your content source.
Create a catch-all route /app/docs/[[...slug]] for docs pages.
In the page, wrap your content in the Page component.
It may vary depending on your content source. You should configure static rendering with generateStaticParams and metadata with generateMetadata.
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
"codeblock": {
"meta": "title=\"app/docs/[[...slug]]/page.tsx\" tab=\"Fumadocs MDX\""
}
}{
"file"
Use the default document search based on Orama.
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
"codeblock": {
"meta": "title=\"app/api/search/route.ts\" tab=\"Fumadocs MDX\""
}
}{
"file":
Learn more about Document Search.
You can start the dev server and create MDX files.
---
title: Hello World
---
## Introduction
I love Anime.You can use Home Layout for other pages of the site, it includes a navbar with theme toggle.
It should work out-of-the-box with Vercel & Netlify.
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.