Documentation

Optional Feature

Documentation is not included by default to keep the core lean. Install it if you need documentation for your saas.

Documentation Overview

StarterKitPro's documentation is powered by Fumadocs, a modern documentation framework built for Next.js.

Key Features:

MDX Support: Write documentation using Markdown with embedded React components for rich content.
Shadcn UI & Tailwind CSS: Beautiful and customizable design out-of-the-box, leveraging popular styling solutions.
React Server Components: Optimized for performance, delivering fast load times with minimal client-side JavaScript.
Optimized Images: Automatic image optimization for better performance.
SEO Optimized: Handles metadata and SSG for improved search engine visibility and rich results.
App Router Compatibility: Seamlessly integrates with the Next.js App Router.
Flexible Layout Integration: Works with existing layouts or can be used independently. You can use your own header/footer, though integrating with the default layout is generally recommended for consistency.
Full-Text Search: Built-in search functionality to help users find information quickly.
Custom React Components: Import and render your own Next.js components directly within .mdx files just like you would in any other part of your application.
Direct HTML: You can write standard HTML tags directly within your MDX content if needed.

If you use the nav with component and pass custom header. Then you need to override --fd-nav-height to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in global.css)

/* global.css */
:root {
  --fd-nav-height: 5rem;
}

app/docs/[[...slug]]/page.tsx

app/docs/[[...slug]]/page.tsx

import { source } from "@/lib/source";
import { notFound } from "next/navigation";
import defaultMdxComponents from "fumadocs-ui/mdx";
import type { Metadata } from "next";
import {
  DocsPage,
  DocsBody,
  DocsTitle,
  DocsDescription,
} from "fumadocs-ui/page";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Callout } from "fumadocs-ui/components/callout";
import { TypeTable } from "fumadocs-ui/components/type-table";
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
import { File, Folder, Files } from "fumadocs-ui/components/files";
import { Pre, CodeBlock } from "fumadocs-ui/components/codeblock";
import type { MDXComponents } from "mdx/types";
import { type ComponentProps, type FC, type ReactElement } from "react";
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
import { constructMetadata } from "@/lib/seo/metadata";
 
export default async function Page(props: {
  params: Promise<{ slug: string[] }>;
}): Promise<ReactElement> {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();
 
  const MDX = page.data.body;
 
  return (
    <DocsPage
      toc={page.data.toc}
      full={page.data.full}
      lastUpdate={page.data.lastModified}
      tableOfContent={{
        style: "clerk",
      }}
      article={{
        className: "max-sm:pb-16",
      }}
    >
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody className="text-fd-foreground/80">
        <MDX
          components={{
            ...defaultMdxComponents,
            ...((await import("lucide-react")) as unknown as MDXComponents),
            Tabs,
            Tab,
            TypeTable,
            Accordion,
            Accordions,
            File,
            Folder,
            Files,
            blockquote: Callout as unknown as FC<ComponentProps<"blockquote">>,
            img: (props) => <ImageZoom {...(props as any)} />,
            // Customize pre element to use Fumadocs CodeBlock
            pre: ({ ref: _ref, ...props }) => (
              <CodeBlock {...props}>
                <Pre>{props.children}</Pre>
              </CodeBlock>
            ),
          }}
        />
      </DocsBody>
    </DocsPage>
  );
}
 
export async function generateMetadata(props: {
  params: Promise<{ slug: string[] }>;
}): Promise<Metadata> {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();
 
  const description =
    page.data.description ?? "The library for building documentation sites";
 
  return constructMetadata({
    title: `${page.data.title} | Starterkitpro Docs`,
    description,
    openGraph: {
      type: "article",
      // add this image if you have different og got docs
      // images: [
      //   {
      //     url: "/docs-og.png",
      //     width: 1200,
      //     height: 630,
      //     alt: page.data.title,
      //   },
      // ],
      siteName: "Starterkitpro Documentation",
    },
    keywords: ["docs", "documentation", "guide", "tutorial", "fazier"],
    canonicalUrlRelative: `/docs/${page.slugs.join("/")}`,
    authors: [{ name: "Fazier Team" }],
  });
}
 
export async function generateStaticParams() {
  return source.generateParams();
}

3. Add Search

Create the file app/api/docs/search/route.ts

app/api/docs/search/route.ts

import { source } from "@/lib/source";
import { createFromSource } from "fumadocs-core/search/server";
 
export const { GET } = createFromSource(source);

4. Add Docs to sitemap

app/sitemap.ts

import { source } from "@/lib/source";
 
export default async function sitemap() {
  // ... other sitemap entries
 
  const docEntries = source.getPages().map((page: any) => ({
    url: `https://${appConfig.domainName}/docs/${page.slugs.join("/")}`,
    lastModified: page.data.date ? new Date(page.data.date) : new Date(),
    changeFrequency: "weekly" as const,
    priority: 0.9,
  }));
 
  // ... other sitemap entries
 
  return [...docEntries]; // add ...docEntries  to existing return statement
}

4. Add Example Content

In app/docs/_content/ here we write the docs in .mdx files.

app/docs/_content/index.mdx

app/docs/_content/index.mdx

---
title: Home
description: Best document ever
---
 
## HomePage

app/docs/_content/setup/installation.mdx

app/docs/_content/setup/installation.mdx

---
title: Installation
description: Best document ever
---
 
## Installation

5. Final Installation

Now after all this run:

Terminal

npm install
# or
fumadocs-mdx

With this all the typescript errors will disapper.

6. Static Assets (Images)

And if use images you can place in: public/docs/

6. Further Customization

And for more customization you can visit: https://fumadocs.vercel.app/docs

And specifically need help in side bar routing and folders check this: https://fumadocs.vercel.app/docs/ui/page-conventions

Documentation Overview

Setup

1. Configure Source Files

2. Create Layout and Page Files