Documentation

The starter kit uses Content Collections for managing documentation content. All documentation pages are written using .mdx files and rendered with Fumadocs.

Documentation Structure

Documentation is organized in the content/docs directory. Each starter kit has its own subdirectory:

• content/docs/pro-nextjs-drizzle/ - Documentation for the Drizzle starter kit
• content/docs/pro-nextjs-prisma/ - Documentation for the Prisma starter kit

Add a new documentation page

To create a new documentation page, follow these steps:

1. Create a new file Navigate to the appropriate documentation directory (e.g., content/docs/pro-nextjs-prisma/) and create a new .mdx file. The file name and path will determine the URL structure. For example:

   • File path: content/docs/pro-nextjs-prisma/cms/blog.mdx
   • URL: https://your-app.com/docs/starter-kits/pro-nextjs-prisma/cms/blog

2. Add metadata At the top of the .mdx file, include a frontmatter block:

---
title: Example Page
section: General
category: CMS
description: An example documentation page.
---

Frontmatter Fields

The documentation schema supports the following fields:

• title (required) - The title of the page
• description (required) - A short description
• section (optional) - Section grouping (e.g., "General", "Codebase")
• category (optional) - Category for organization
• toc (optional) - Boolean to enable/disable table of contents (default: true)
• featured (optional) - Boolean to mark pages as featured

Navigation Structure

Documentation navigation is configured in config/docs.tsx. To add a new page to the navigation:

{
  title: 'CMS',
  href: '/docs/starter-kits/pro-nextjs-prisma/cms',
  items: [
    {
      title: 'Blog',
      href: '/docs/starter-kits/pro-nextjs-prisma/cms/blog',
      items: []
    },
    {
      title: 'Documentation',
      href: '/docs/starter-kits/pro-nextjs-prisma/cms/documentation',
      items: []
    }
  ],
  collapsible: true
}

Using MDX Components

Fumadocs and the starter kit provide many custom components:

Callouts

<Callout className="mt-4">This is a regular callout.</Callout>

<Callout
  type="warning"
  className="mt-4"
>
  This is a warning callout.
</Callout>

<Callout
  type="error"
  className="mt-4"
>
  This is an error callout.
</Callout>

Code Blocks

Code blocks support syntax highlighting, line numbers, and file names:

export function example() {
  return 'Hello, World!';
}

Linked Cards

Create navigation cards:

<LinkedCardGrid>
  <LinkedCard
    href="/docs/starter-kits/pro-nextjs-prisma/cms/blog"
    header="Blog"
    description="Learn how to write blog posts."
  />
</LinkedCardGrid>

Steps

Guide users through processes:

<Steps>
  <Step>First step</Step>
  <Step>Second step</Step>
  <Step>Third step</Step>
</Steps>

Code Imports

You can import code from your codebase directly into documentation:

import { Example } from './example.tsx';

<Example />

Building Documentation

Content Collections are automatically built during the Next.js build process. During development, they are rebuilt when files change.

Querying Documentation

You can query documentation pages in your application:

import { allDocuments } from 'content-collections/generated';

export default function DocsPage() {
  const docs = allDocuments('ProNextjsPrisma');

  return (
    <div>
      {docs.map((doc) => (
        <article key={doc.slug}>
          <h2>{doc.title}</h2>
          <p>{doc.description}</p>
        </article>
      ))}
    </div>
  );
}

Configuration

Documentation collections are configured in content-collections.ts:

const ProNextjsPrisma = createCollection(
  'ProNextjsPrisma',
  'docs/pro-nextjs-prisma/**/*.mdx'
);

export default defineConfig({
  collections: [
    // ... other collections
    ProNextjsPrisma
  ]
});

Fumadocs Features

Fumadocs provides additional features:

• Automatic table of contents - Generated from headings
• Search - Full-text search across documentation
• Dark mode - Automatic theme switching
• Responsive design - Mobile-friendly layouts
• Type safety - TypeScript support for content

Best Practices

1. Use clear titles - Make titles descriptive and searchable
2. Add descriptions - Help with SEO and search results
3. Organize with sections - Group related pages together
4. Use code examples - Include practical examples
5. Keep it updated - Update docs when code changes
6. Test locally - Always preview documentation before publishing