Static Build

Setup

By default, Fumadocs use a server-first approach which always requires a running server to serve.

You can also output a static build by enabling it on your React framework.

Search

Built-in Search

You will need extra configurations to statically store the search indexes, and search will be computed on browser instead:

1. Search Client: enable static mode.
2. Search Server: output static indexes.

Cloud Solutions

Since the search functionality is powered by remote servers, static export works without configuration.

Deployment

Next.js

You can enable Next.js static export, it allows you to export the app as a static HTML site without a Node.js server.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
};

See Next.js docs for limitations and details.

React Router

By configuring pre-rendering on all pages, you can serve the build/client directory as a static website.

import type { Config } from '@react-router/dev/config';
import { glob } from 'node:fs/promises';
import { createGetUrl, getSlugs } from 'fumadocs-core/source';

const getUrl = createGetUrl('/docs');

export default {
  ssr: true,
  async prerender({ getStaticPaths }) {
    const paths: string[] = [...getStaticPaths()];

    for await (const entry of glob('**/*.mdx', { cwd: 'content/docs' })) {
      paths.push(getUrl(getSlugs(entry)));
    }

    return paths;
  },
} satisfies Config;

Tanstack Start

By configuring pre-rendering, you can serve the statically pre-rendered HTML pages as a static website.

import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...other plugins
    tanstackStart({
      // Tanstack Router will automatically crawl your pages
      target: 'static',
      prerender: {
        enabled: true,
      },
      // if you have any hidden paths that's not visible on UI, you can add them explicitly.
      pages: [
        {
          path: '/docs/test',
        },
      ],
    }),
  ],
});

Waku

Waku can serve your site statically when all pages are configured with static render mode.

See Deployment for details.