Quick Start

Make sure to upgrade Fumadocs when you've encountered any problems or trying out new features:

pnpm update -i -r --latest

Routing is handled by your React framework, you need to change the routing structure first.

For example, in Next.js, rename the route (/docs/* -> /info/*):

Or rename from /docs/* to /* using a route group:

Finally, update the base URL of pages in source.ts:

import { loader } from '@hanzo/docs-core/source';

export const source = loader({
  baseUrl: '/info', // to the new value
});

We recommend to use Sidebar Tabs.

There's some weird pre-bundling problems with Vite: #3910. Make sure to exclude Fumadocs from pre-bundling and add it to noExternal:

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    // add other Fumadocs deps as needed
    noExternal: ['@hanzo/docs-core', '@hanzo/docs-base-ui', '@hanzo/docs-openapi', '@hanzo/docs-base-ui'],
  },
});

Node.js 23.1 might have problems with Next.js, see #1021. Make sure to change your Node.js version.

Next.js turns dynamic route into static routes when generateStaticParams is configured. Hence, it is as fast as static pages.

You can enable Static Exports on Next.js to get a static build output.

Webpack resolves import namespace before your import aliases in tsconfig.json. When using Hanzo Docs MDX, you have to rename your import alias to collections/* instead.

{
  "compilerOptions": {
    "paths": {
      "collections/*": [".source/*"]
    }
  }
}

Make sure to update the references as well.

import { docs } from '@hanzo/docs-mdx:collections/server';
import { docs } from 'collections/server';

Same as managing layouts in Next.js App Router, remove the original MDX file from content directory (/content/docs). This ensures duplicated pages will not cause errors.

Now, You can add the page to another route group, which isn't a descendant of docs layout.

For example, to replace /docs/test:

For /docs, you need to change the catch-all route to be non-optional: