Next.js

Setup

Set up Fumadocs MDX for your Next.js application.

Installation

npm i fumadocs-mdx fumadocs-core @types/mdx

Add the plugin to Next.js config:

next.config.mjs

import { createMDX } from 'fumadocs-mdx/next';

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

const withMDX = createMDX();

export default withMDX(config);

ESM Only

Fumadocs MDX is ESM-only, it's recommended to use next.config.mjs for accurate ESM resolution.

For TypeScript config file, it requires Native Node.js TypeScript Resolver, you can see Next.js docs for details.

Integrate with Fumadocs

Create a lib/source.ts file:

lib/source.ts

import { defineDocs } from 'fumadocs-mdx/macro';
import { loader } from 'fumadocs-core/source';

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

Done

You can now write content in content/docs folder.

What is Next?

Macro API

Define collections in your app modules with fumadocs-mdx/macro.

Config API

Define collections in source.config.ts with generated entry files.

Lazy Loading

Hit performance bottleneck? You can try lazy loading.