Configure Fumadocs for Root-Level Documentation

You can modify the default Fumadocs setup to allow any documentation directly under the root. Follow these steps:

Step 1: Move the homepage file to the root folder

Move the page.tsx from the home folder into the root folder. You can move the HomeLayout from (home)/layout directly into this page and wrap the existing homepage with it (something like this):

import Link from "next/link";
import { HomeLayout } from "fumadocs-ui/layouts/home";
import { baseOptions } from "@/lib/layout.shared";

export default function HomePage() {
  return (
    <HomeLayout {...baseOptions()}>
      <main className="flex flex-1 flex-col justify-center text-center">
        <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
        <p className="text-fd-muted-foreground">
          You can open{" "}
          <Link
            href="/docs"
            className="text-fd-foreground font-semibold underline"
          >
            /docs
          </Link>{" "}
          and see the documentation.
        </p>
      </main>
    </HomeLayout>
  );
}

Step 2: Adjust the source configuration

Change the source to point to / instead of /docs:

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

Step 3: Move the dynamic documentation route

Move /docs/[[...slug]] to /[...slug].

Step 4: Move the documentation layout

Move /docs/layout.tsx to /[...slug]/layout.tsx.

Step 5: Verify the final structure

You should then end up with the following structure:

│  global.css
│  layout.tsx
│  page.tsx
│
├─api
│  └─search
│          route.ts
│
└─[...slug]
        layout.tsx
        page.tsx