moai-library-nextra
Enterprise Nextra documentation framework with Next.js
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for building enterprise-grade documentation sites using Nextra and Next.js. It streamlines the creation of high-performance, SEO-optimized, and multi-language knowledge bases by leveraging zero-config MDX support, automated file-system routing, and professional theme customization.
Use Cases
- Case 1: Building professional developer portals that seamlessly integrate interactive React components within Markdown content using MDX.
- Case 2: Creating multi-language (i18n) technical documentation sites with built-in internationalization support for global audiences.
- Case 3: Implementing advanced search-enabled knowledge bases using FlexSearch integration for rapid information retrieval.
- Case 4: Developing customizable documentation themes with optimized navigation structures, breadcrumbs, and table of contents for enhanced user experience.
| name | moai-library-nextra |
|---|---|
| description | Enterprise Nextra documentation framework with Next.js |
| version | 2.0.0 |
| modularized | true |
| category | library |
| Purpose | Build professional documentation sites with Nextra + Next.js. |
| Pattern 1 | Nextra Project Setup |
| Pattern 2 | Custom Theme Configuration |
| logo | <span>My Docs</span>, |
| project | { link: "https://github.com/..." }, |
| docsRepositoryBase | "https://github.com/.../tree/main", |
| useNextSeoProps | () => ({ |
| titleTemplate | "%s - My Docs", |
| Pattern 3 | MDX with React Components |
| ### Pattern 1 | Project Structure |
| Key Concept | Make documentation discoverable |
| ### Pattern 2 | Theme Configuration |
| const config | DocsThemeConfig = { |
| logoLink | "/", |
| sidebar | { |
| defaultMenuCollapseLevel | 1, |
| toggleButton | true, |
| toc | { backToTop: true }, |
| footer | { text: "Built with Nextra" }, |
| ### Pattern 3 | Navigation Structure (\_meta.js) |
| index | "Overview", |
| "getting-started" | "Getting Started", |
| basics | "Basic Concepts", |
| advanced | "Advanced Topics", |
| "---" | "", // Separator |
| faq | "FAQ", |
| ### Pattern 4 | MDX Content & JSX Integration |
| ### Pattern 5 | Search & SEO Optimization |
| search | { |
| placeholder | "Search docs...", |
| head | ( |
| <meta name="og | image" content="/og-image.png" /> |
Advanced Documentation
This Skill uses Progressive Disclosure. For detailed patterns:
- modules/configuration.md - Complete theme.config reference
- modules/mdx-components.md - MDX component library
- modules/i18n-setup.md - Internationalization guide
- modules/deployment.md - Hosting & deployment
Theme Options
Built-in Themes:
- nextra-theme-docs (recommended for documentation)
- nextra-theme-blog (for blogs)
Customization:
- CSS variables for colors
- Custom sidebar components
- Footer customization
- Navigation layout
Deployment
Popular Platforms:
- Vercel (zero-config, recommended)
- GitHub Pages (free, self-hosted)
- Netlify (flexible, CI/CD)
- Custom servers (full control)
Vercel Deployment:
npm install -g vercel
vercel
# Select project and deploy
Integration with Other Skills
Complementary Skills:
- Skill("moai-docs-generation") - Auto-generate docs from code
- Skill("moai-workflow-docs") - Validate documentation quality
- Skill("moai-cc-claude-md") - Markdown formatting
Version History
1.0.1 (2025-11-23)
- Refactored with Progressive Disclosure
- Configuration patterns highlighted
- MDX integration guide
1.0.0 (2025-11-12)
- Nextra architecture guide
- Theme configuration
- i18n support
Maintained by: alfred Domain: Documentation Architecture Generated with: MoAI-ADK Skill Factory
Works Well With
Agents:
- workflow-docs - Documentation generation
- code-frontend - Nextra implementation
- workflow-spec - Architecture documentation
Skills:
- moai-docs-generation - Content generation
- moai-workflow-docs - Documentation validation
- moai-library-mermaid - Diagram integration
Commands:
/moai:3-sync- Documentation deployment/moai:0-project- Nextra project initialization