Digital Fortress Documentation

This is a Next.js project bootstrapped with create-next-app and powered by Nextra for documentation.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Content Structure

Think of this documentation site like a well-organized library! 📚 Each section (group) is like a bookshelf, and each page is like a book on that shelf. This site uses Nextra with MDX files organized in the src/content/ directory, making it super easy to add and organize your content.

Current Structure

src/content/
├── _meta.ts              # Main navigation configuration
├── index.mdx             # Homepage content
└── group/                # Example group
    ├── _meta.ts          # Group navigation configuration
    ├── index.mdx         # Group homepage
    ├── page1/            # Example page 1
    │   └── index.mdx
    └── page2/            # Example page 2
        └── index.mdx

Creating New Groups

Ready to organize your documentation? Let's create a new group to keep related content together! 🚀

Scenario: Imagine you're creating documentation for a web development framework. You might want separate groups for "Getting Started", "API Reference", "Tutorials", and "Deployment" - each containing related pages that users can easily find.

1. Create the Group Directory

First, let's create a new folder in src/content/ for your group. Think of this as creating a new folder on your computer - it's that simple!

mkdir src/content/your-group-name

💡 Tip: Choose a descriptive name that clearly represents what content will go in this group. For example:

• getting-started for beginner guides
• api-reference for API documentation
• tutorials for step-by-step guides
• troubleshooting for common issues and solutions

Real Example: If you're documenting a React library, you might create groups like:

• react-basics - Core React concepts
• advanced-patterns - Complex use cases
• migration-guides - Upgrading from older versions

2. Create the Group Meta File

Now we need to tell Nextra how to organize and display your group in the navigation. Think of this file as the "table of contents" for your group - it controls what users see in the sidebar and how pages are organized.

Why this matters: Without this file, your pages won't appear in the navigation, making them hard for users to find!

import type { MetaRecord } from "nextra"

const meta: MetaRecord = {
  index: {
    display: "hidden", // This hides the group's main page from the sidebar navigation
  },
  page1: {
    title: "Your Page 1 Title", // This is what users will see in the navigation
  },
  page2: {
    title: "Your Page 2 Title",
  },
  // Add more pages as needed - each one will appear in your group's navigation
}

export default meta

🔧 What this does: The _meta.ts file is like a table of contents for your group. It controls:

• Which pages appear in the navigation
• What titles users see in the sidebar
• How pages are organized within your group

Pro Tip: You can reorder pages by changing their order in this file - the first page listed will appear at the top of your group's navigation!

3. Create Group Index (Optional)

Want to give your group a welcoming homepage? Create an index.mdx file in your group directory:

When to use this: Create a group index when you want to:

• Welcome users to your group
• Provide an overview of what's covered
• Give quick links to important pages
• Guide users on where to start

When to skip this: If your group has a clear first page (like "Installation"), you can skip this step and users will go directly to that page.

# Getting Started

Welcome to the Getting Started guide! This section will help you get up and running with our platform quickly and efficiently.

## What You'll Learn

In this section, you'll find everything you need to:

- Set up your development environment
- Install and configure the necessary tools
- Create your first project
- Deploy your application

## Quick Start Guide

If you're eager to jump right in, follow our [Quick Start](./quick-start) guide to have your first project running in under 5 minutes.

## Step-by-Step Tutorials

For a more detailed approach, we recommend following these guides in order:

1. **[Installation](./installation)** - Set up your development environment
2. **[Configuration](./configuration)** - Configure your project settings
3. **[First Project](./first-project)** - Create and run your first application
4. **[Deployment](./deployment)** - Deploy your app to production

## Common Questions

- **New to our platform?** Start with [Installation](./installation)
- **Having trouble?** Check our [Troubleshooting](./troubleshooting) guide
- **Need help?** Visit our [Support](./support) page or join our community

## What's Next?

Once you've completed the Getting Started guides, explore our other documentation sections:

- **[API Reference](../api-reference)** - Complete API documentation
- **[Tutorials](../tutorials)** - Advanced tutorials and examples
- **[Best Practices](../best-practices)** - Recommended patterns and tips

📝 Note: This step is optional! If you don't create an index.mdx file, users will go directly to the first page in your group when they click on your group name.

4. Update Main Navigation

Almost done! Now we need to add your new group to the main navigation so users can find it. This is like adding a new section to your website's main menu.

What happens if you skip this: Your group will exist, but users won't see it in the main navigation sidebar - they'd have to know the exact URL to find it!

import type { MetaRecord } from "nextra"

const meta: MetaRecord = {
  index: {
    href: "/",
  },
  group: {
    title: "Group (Example)",
  },
  "your-group-name": {
    title: "Your Group Display Name", // This is what appears in the main navigation
  },
}

export default meta

🎉 Congratulations! Your new group is now ready! Users will see "Your Group Display Name" in the main navigation sidebar.

Creating New Pages

Great! Now that you have a group, let's add some pages to it. Pages are where your actual content lives! 📄

Scenario: Let's say you're creating a "Getting Started" group. You might want pages like:

• installation - How to install the software
• quick-start - A 5-minute tutorial
• configuration - Setting up your environment
• first-project - Building your first app

1. Create Page Directory

Create a new folder in your group directory for each page:

mkdir src/content/your-group-name/your-page-name

💡 Naming Tips:

• Use kebab-case (lowercase with hyphens) for folder names
• Make it descriptive but concise
• Examples: installation, quick-start, api-basics, troubleshooting

Why kebab-case? It's URL-friendly and easy to read. Compare:

• ✅ api-basics (good)
• ❌ api_basics (underscores can cause issues)
• ❌ ApiBasics (harder to type in URLs)

2. Create Page Content

Now the fun part - writing your content! Create an index.mdx file in your page directory:

What is MDX? It's like Markdown with superpowers! You can write regular markdown (like you would in a README file), but you can also use React components and interactive elements.

Writing Tips:

• Start with a clear, descriptive title
• Use headings to organize your content
• Include code examples when helpful
• Add links to related pages
• Keep it scannable with bullet points and short paragraphs

# Your Page Title

This is your page content written in MDX format. You can write just like you would in any markdown file!

## Section 1

You can use all standard Markdown features:

- **Bold text** for emphasis
- _Italic text_ for subtle emphasis
- `Code snippets` for inline code
- [Links](https://example.com) to external resources

## Section 2

You can also use React components and custom MDX components:

```jsx
<Callout type="info">This is an informational callout</Callout>
```

## Code Examples

```javascript
function example() {
  console.log("Hello, World!")
}
```

## Tips

- Keep your content clear and concise
- Use headings to organize your content
- Include code examples when helpful
- Add links to related pages

3. Update Group Meta

Don't forget to add your new page to the group's _meta.ts file so it appears in the navigation:

This step is crucial! If you skip this, your page will exist but won't show up in the navigation sidebar. Users would have to know the exact URL to find it.

Pro Tip: You can control the order of pages by changing their position in this file. The first page listed will appear at the top of your group's navigation.

const meta: MetaRecord = {
  index: {
    display: "hidden", //hide the group index from navigation
  },
  "your-page-name": {
    title: "Your Page Display Title", // This is what users see in the sidebar
  },
  // ... other pages
}

✨ That's it! Your new page is now live and accessible through your group's navigation.

Meta Configuration Options

The _meta.ts files support various configuration options to customize how your content appears:

When to use these: These options help you create a better user experience by controlling how your content is displayed and organized.

Page Configuration

{
  "page-name": {
    title: "Display Title",           // Navigation title
    display: "hidden",                // Hide from navigation
    href: "/custom-url",             // Custom URL
    theme: {                         // Page-specific theme
      breadcrumb: false,
      sidebar: true,
      toc: true,
    }
  }
}

Special Meta Values

• index: Configuration for the group/page index
• separator: Add a visual separator in navigation (useful for organizing large groups)
• menu: Create a menu group (groups related pages together)

Example Use Cases:

• Use separator to divide "Beginner" and "Advanced" content
• Use menu to group related API endpoints together
• Use index to customize your group's homepage

MDX Features

Your MDX files support powerful features that make your documentation engaging and interactive:

• Standard Markdown: All GitHub Flavored Markdown features (headings, lists, links, etc.)
• React Components: Import and use React components for interactive elements
• Custom Components: Use Nextra's built-in components like callouts, tabs, and code blocks
• Frontmatter: Add metadata at the top of files (useful for SEO and page configuration)
• Code Highlighting: Automatic syntax highlighting for code blocks
• Math Equations: LaTeX support with KaTeX for mathematical formulas

Pro Tip: Start with simple markdown, then gradually add more advanced features as you become comfortable with MDX!

Learn More

To learn more about the technologies used:

• Next.js Documentation - learn about Next.js features and API
• Nextra Documentation - learn about Nextra features
• MDX Documentation - learn about MDX syntax and features

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.