Fumadocs in Nextjs

Welcome to the docs! You can start writing documents in /content/docs.

What is Next?

Integration of FumaDocs into a Next.js 15 Project

FumaDocs has been integrated into your project to provide an opinionated documentation structure and interface. Here’s how it is set up in your repository:

---

Core FumaDocs Components

1. fumadocs-mdx and fumadocs-ui Packages:

• These are the primary libraries powering documentation rendering and theming.
• fumadocs-mdx processes MDX files for dynamic documentation pages.
• fumadocs-ui provides prebuilt layouts, MDX components, and utilities for a cohesive documentation interface.

2. MDX Source Handling (lib/source.ts):

• Uses fumadocs-mdx to parse documentation stored in the content/docs folder.
• The source object from fumadocs-core/source provides methods for fetching page data (getPage) and generating route parameters (generateParams).

3. Documentation Structure:

• Content is written in MDX format and stored in the content/docs folder.
• Metadata such as title and description is specified in frontmatter, allowing FumaDocs to handle them dynamically.

---

Next.js Integration

1. Page and Layout Customization:

• Dynamic Routing (app/docs/[[...slug]]/page.tsx):
  • This file dynamically serves documentation pages based on the slug.
  • Pages are built using DocsPage, DocsTitle, DocsDescription, and DocsBody from fumadocs-ui/page.
  • Non-existent pages trigger the notFound method.
• Layouts (app/docs/layout.tsx and app/(home)/layout.tsx):
  • Use DocsLayout and HomeLayout from fumadocs-ui/layouts to structure the documentation and homepage.

2. MDX Processing (next.config.mjs):

• Configured with createMDX() from fumadocs-mdx for seamless MDX support in the project.

3. Static Generation:

• generateStaticParams and generateMetadata ensure static site generation compatibility by preparing routes and metadata for each page.

---

Styling and Tailwind Integration

1. Tailwind Preset:

• Tailwind is extended using the fumadocs-ui/tailwind-plugin to add FumaDocs-specific styles.
• Custom fonts (Mona Sans and Hubot Sans) are registered as CSS variables (--font-mona-sans, --font-hubot-sans) and used in the Tailwind configuration for sans and display font families.

2. Custom Styles (app/global.css):

• Tailwind base, components, and utilities are applied.
• Global typography and theme colors are defined, leveraging Tailwind’s @apply for maintainable styling.

---

Custom Components

You have replaced parts of the default FumaDocs UI with custom components:

• DocsBody, DocsTitle, and DocsDescription provide more control over styling using your own Tailwind classes.

---

Search and Navigation

1. Search API (app/api/search/route.ts):

• Built using fumadocs-core/search/server, enabling server-side search functionality for the documentation.

2. Navigation Configuration (app/layout.config.tsx):

• Centralized configuration for navigation links and titles ensures a consistent header and sidebar experience.

---

How It Works End-to-End

1. Routing:

• Users visiting /docs access a dynamic MDX-based documentation page.
• Pages are dynamically rendered based on the file structure in content/docs.

2. Rendering:

• FumaDocs handles MDX parsing and injects custom React components for enhanced interactivity.

3. Styling:

• Tailwind handles global and utility-based styling, enhanced with FumaDocs presets.

4. Extensibility:

• You can modify FumaDocs components or layouts and extend functionality with Tailwind or React.

This setup ensures a developer-friendly and extendable documentation platform with FumaDocs seamlessly integrated into the Next.js 15 framework.