Moai Nextra Architecture

Implementation Patterns

1. Installation & Setup

npm install next nextra nextra-theme-docs react react-dom

next.config.js:

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = withNextra();

theme.config.tsx (Core Configuration):

import { DocsThemeConfig } from "nextra-theme-docs";

const config: DocsThemeConfig = {
  logo: <span>My Docs</span>,
  project: {
    link: "https://github.com/user/project",
  },
  docsRepositoryBase: "https://github.com/user/project/tree/main/docs",
  footer: {
    text: "© 2025 My Company",
  },
  sidebar: {
    defaultMenuCollapseLevel: 1,
  },
  darkMode: true,
};

export default config;

2. Content Structure

pages/
├── index.mdx          # Homepage
├── _meta.json         # Navigation metadata
├── getting-started/
│   ├── installation.mdx
│   └── quickstart.mdx
└── api-reference/
    ├── functions.mdx
    └── classes.mdx

_meta.json (Navigation Config):

{
  "index": "Introduction",
  "getting-started": "Getting Started",
  "api-reference": "API Reference"
}

3. MDX Components & Syntax

Tabs, Callouts, Code Blocks:

---