Static Build

Setup

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

You can output a static build by configuring your React framework.

Search

Built-in Search

After the configurations, your app will statically store the search indexes, and search will be computed on browser instead.

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.

next.config.mjs

/**
 * @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 SPA mode and pre-rendering, you can serve the build/client directory as a static website.

react-router.config.ts

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 {
  // disable SSR
  ssr: false,

  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

Configure SPA mode and pre-rendering, refer to SPA Mode for deploying SPA apps with Tanstack Start.

vite.config.ts

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

export default defineConfig({
  plugins: [
    // ...other plugins
    tanstackStart({
      spa: {
        enabled: true,
        // Tanstack Router will automatically crawl your pages
        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.

On this page