Adding Pages

Learn how to add new documentation pages to your site.

Creating a New Page

Step 1: Create the Page File

Create a new folder and MDX file in the app/docs/ directory:


mkdir -p app/docs/my-new-page
touch app/docs/my-new-page/page.mdx

Step 2: Write the Content

Open the file and add your content using MDX (Markdown + JSX):


# My New Page
 
This is my new documentation page.
 
## Section 1
 
Content goes here...
 
## Section 2
 
More content...

Add the new page to app/docs/_meta.ts:


export default {
  "getting-started": "Getting Started",
  "my-new-page": "My New Page", // Add this line
};

The key ("my-new-page") must match the folder name.

Page Ordering

Pages appear in the sidebar in the order they’re defined in _meta.ts:


export default {
  "first-page": "First Page",
  "second-page": "Second Page",
  "third-page": "Third Page",
};

Nested Pages

To create nested pages (subpages):

Step 1: Create Nested Structure


app/docs/
└── guides/
    ├── page.mdx           # /docs/guides
    ├── _meta.ts           # Sidebar for guides section
    ├── basic/
    │   └── page.mdx       # /docs/guides/basic
    └── advanced/
        └── page.mdx       # /docs/guides/advanced

In app/docs/_meta.ts:


export default {
  "getting-started": "Getting Started",
  guides: "Guides", // Links to the guides folder
};

Create app/docs/guides/_meta.ts:


export default {
  basic: "Basic Guide",
  advanced: "Advanced Guide",
};

MDX Features

Frontmatter

Add metadata to your pages:


---
title: Custom Page Title
description: A custom description for SEO
---
 
# Page Content

Code Blocks

Use fenced code blocks with syntax highlighting:


```typescript
const greeting = "Hello, World!";
console.log(greeting);
```

Callouts

Use blockquotes for callouts:


> **Note:** This is an important note.
 
> **Warning:** Be careful with this.

Links

Link to other pages:


Check out the [Getting Started](/docs/getting-started) guide.

Images

Place images in the public/ directory:


![Alt text](/my-image.png)

React Components

You can use React components in MDX files:


import { MyComponent } from "../components/MyComponent";
 
# My Page
 
<MyComponent prop="value" />

Special Pages

Separators

Add visual separators in the sidebar:


export default {
  "getting-started": "Getting Started",
  "-- Section Title": {
    type: "separator",
    title: "Section Title",
  },
  "another-page": "Another Page",
};

External Links

Link to external URLs:


export default {
  docs: "Documentation",
  github: {
    title: "GitHub",
    href: "https://github.com/your-repo",
    newWindow: true,
  },
};

Hidden Pages

Hide pages from navigation but keep them accessible:


export default {
  "public-page": "Public Page",
  "hidden-page": {
    display: "hidden",
  },
};