Nextra Documentation Summary

This document provides a summary of why we use Nextra for the LevelApp Docs and how to work with its main features, including page creation, configuration, and customization.

Why Nextra?

Nextra is a Next.js-based static site generator specifically designed for technical documentation. It is:

• Fast & Lightweight: Optimized for static exports with instant loading.
• Built-in MDX Support: Combine Markdown with React components.
• Sidebar & Navigation Ready: Auto-generated and customizable sidebar and navbar.
• Customizable Themes: Easy-to-configure layout, dark mode, banner, feedback, and more.
• Great for Developer Docs: Perfect for onboarding, guides, and API references.

Folder Structure

pages/
├── index.mdx
├── about.mdx
├── contact.mdx
├── guides/
│   ├── _meta.js          # Sidebar configuration
│   ├── gettingStarted.mdx
│   └── advancedTips.mdx
├── _meta.js              # Main navigation config
theme.config.jsx          # Theme customization

Each .mdx file is rendered as a page. The _meta.js file configures the sidebar and navigation structure.

How to Add a New Page

1. Create a .mdx file inside pages/ or a subfolder (e.g., guides/myPage.mdx).
2. Add a title entry in the _meta.js file:

export default {
  gettingStarted: "Getting Started",
  advancedTips: "Advanced Tips",
  myPage: "My New Page",
};

Page Configuration with _meta.js

You can define how pages appear in the sidebar or navbar using _meta.js.

Basic Example:

export default {
  index: "Home",
  about: "About",
  contact: "Contact",
};

Hide a Page:

export default {
  contact: {
    display: "hidden",
  },
};

Add External Link:

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

Menu Dropdown:

export default {
  company: {
    title: "Company",
    type: "menu",
    items: {
      about: {
        title: "About Us",
        href: "/about",
      },
      contact: {
        title: "Contact Us",
        href: "/contact",
      },
    },
  },
};

Theme Customization

The theme.config.jsx file lets you set:

• Branding (logo, banner)
• Dark/light mode toggle
• Feedback links
• GitHub/Discord links
• Footer & Navigation

Example:

export default {
  logo: <span>LevelApp Docs</span>,
  darkMode: true,
  feedback: {
    content: "Have suggestions? Let us know →",
    labels: "feedback",
  },
  head: (
    <>
      <meta name="description" content="LevelApp Developer Docs" />
      <meta property="og:title" content="LevelApp Docs" />
    </>
  ),
};

Layout & Theme Options (per page)

You can customize layout and visibility on a per-page basis in _meta.js:

export default {
  index: {
    title: "Home",
    theme: {
      layout: "full",
      breadcrumb: false,
      toc: true,
      typesetting: "article",
    },
  },
};

Options include:

• layout: "default", "full", "raw"
• typesetting: "default", "article"
• Enable/disable: breadcrumb, navbar, pagination, etc.

SEO Meta Tags in Nextra

Nextra allows you to manage SEO metadata using the head property inside theme.config.js or theme.config.tsx.

While not deeply covered in the official docs, this feature is widely used in production-grade projects such as Langfuse.

How It Works

You define a head property in your theme configuration file:

export default {
  head: (
    <>
      <meta name="description" content="LevelApp Developer Docs" />
      <meta property="og:title" content="LevelApp Docs" />
      <meta property="og:description" content="Official docs for developers" />
      <meta property="og:image" content="https://yourdomain.com/og-cover.png" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content="LevelApp Docs" />
      <meta
        name="twitter:description"
        content="Developer documentation and guides"
      />
      <meta
        name="twitter:image"
        content="https://yourdomain.com/twitter-cover.png"
      />
    </>
  ),
};

Explanation of Each Tag

Dynamic Title (Optional)

You can also customize the <title> dynamically if needed by using a function:

head: () => {
  const { title } = useConfig();
  return <title>{title} – LevelApp Docs</title>;
};

This ensures every page has a custom title tag for better SEO and user experience.

Conclusion

Nextra is an efficient, elegant, and developer-friendly documentation solution. With MDX support, flexible theming, smart navigation, it’s an ideal choice for LevelApp’s technical documentation needs.