重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
moai-library-nextra by modu-ai/moai-adk
npx skills add https://github.com/modu-ai/moai-adk --skill moai-library-nextra用途:使用 Nextra 和 Next.js 构建专业的文档站点。
Nextra 优势:
核心文件:
pages 目录包含 MDX 格式的文档页面theme.config.tsx 文件包含站点配置_meta.js 文件控制导航结构此技能涵盖 Nextra 3.x 和 4.x 文档框架架构模式、Next.js 14 和 15 集成与优化配置、通过 theme.config.tsx 或 Layout 属性进行主题自定义、集成 FlexSearch 的高级搜索、国际化支持、使用 React 组件的 MDX 驱动内容,以及 Nextra 4.x 中支持 Turbopack 的 App Router。
当您需要构建具有现代 React 功能的文档站点、创建具有高级搜索功能的知识库、开发多语言文档门户、实现自定义文档主题或在技术文档中集成交互式示例时,请使用此技能。
要初始化 Nextra 文档站点,请使用 npx create-nextra-app 命令并指定 docs 模板。生成的项目结构包含一个 目录,其中包含自定义 App 组件文件、主页的 index MDX 文件以及用于文档章节的子目录。每个章节包含用于内容的 MDX 文件和用于导航配置的 文件。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
pages_meta.jsontheme.config.tsx 文件导出一个包含多个关键属性的配置对象。logo 属性定义站点品牌元素。project 属性包含项目仓库的链接。docsRepositoryBase 属性指定编辑链接功能的基础 URL。useNextSeoProps 函数返回 SEO 配置,包括标题模板。
基本配置选项包括用于 logo 和 logoLink 的品牌设置、用于项目链接和仓库基础 URL 的导航设置、用于默认折叠级别和切换按钮可见性的侧边栏设置、包含返回顶部功能的目录设置,以及用于自定义页脚文本的页脚设置。
_meta.js 文件控制侧边栏菜单的排序和显示名称。每个文件导出一个默认对象,其中键代表文件或目录名,值代表显示标签。特殊条目包括使用三个破折号作为键且值为空字符串的分隔线,外部链接可以通过包含 title、href 和 newWindow 属性的嵌套对象进行配置。
Nextra 支持在 MDX 文件中直接混合使用 Markdown 和 React 组件。组件可以在文件顶部导入,并与 Markdown 内容内联使用。自定义组件可以在 MDX 文件本身内定义和导出。来自 nextra/components 的 Callout 组件为注释、警告和提示提供了样式化的标注框。
主题配置支持内置搜索,可自定义占位符文本。SEO 元数据可以通过 head 属性进行配置,该属性接受用于元标签的 JSX,包括 Open Graph 标题、描述和图片。useNextSeoProps 函数提供动态标题模板配置。
此技能采用渐进式披露。详细模式请参阅 modules 目录:
modules/configuration.md 提供完整的 theme.config 参考modules/mdx-components.md 涵盖 MDX 组件库modules/i18n-setup.md 包含国际化指南modules/deployment.md 涵盖托管和部署内置主题包括推荐用于文档站点的 nextra-theme-docs,以及用于博客实现的 nextra-theme-blog。
自定义选项包括用于颜色的 CSS 变量、自定义侧边栏组件、页脚自定义和导航布局修改。
流行的部署平台包括具有零配置推荐设置的 Vercel、用于免费自托管选项的 GitHub Pages、用于灵活 CI/CD 集成的 Netlify,以及用于完全控制的自定义服务器。
对于 Vercel 部署,请使用 npm 全局安装 Vercel CLI,然后运行 vercel 命令以选择项目并进行部署。
互补技能包括用于从代码自动生成文档的 moai-docs-generation、用于验证文档质量的 moai-workflow-docs,以及用于 Markdown 格式化的 moai-cc-claude-md。
版本 2.2.0 发布于 2026-01-11,移除了代码块以符合 CLAUDE.md 文档标准,并将所有示例转换为叙述性描述。
版本 2.1.0 发布于 2025-12-30,更新了 configuration.md 以包含完整的 Nextra 特定 theme.config.tsx 模式,添加了 Nextra 4.x App Router 配置模式,更新了 Next.js 14 和 15 的版本兼容性,并添加了 Turbopack 支持文档。
版本 2.0.0 发布于 2025-11-23,采用渐进式披露进行了重构,突出了配置模式,并添加了 MDX 集成指南。
版本 1.0.0 发布于 2025-11-12,提供了初始的 Nextra 架构指南、主题配置和 i18n 支持。
维护者:MoAI-ADK 团队 领域:文档架构 生成工具:MoAI-ADK 技能工厂
代理:
workflow-docs 用于文档生成code-frontend 用于 Nextra 实现workflow-spec 用于架构文档技能:
moai-docs-generation 用于内容生成moai-workflow-docs 用于文档验证moai-library-mermaid 用于图表集成命令:
moai:3-sync 用于文档部署moai:0-project 用于 Nextra 项目初始化每周安装量
63
仓库
GitHub 星标数
888
首次出现时间
2026 年 1 月 22 日
安全审计
安装于
codex56 opencode54 gemini-cli52 cursor49 claude-code49 antigravity48
Purpose: Build professional documentation sites with Nextra and Next.js.
Nextra Advantages:
Core Files:
This skill covers Nextra 3.x and 4.x documentation framework architecture patterns, Next.js 14 and 15 integration with optimal configuration, theme customization via theme.config.tsx or Layout props, advanced search with FlexSearch integration, internationalization support, MDX-powered content with React components, and App Router support in Nextra 4.x with Turbopack compatibility.
Use this skill when building documentation sites with modern React features, creating knowledge bases with advanced search capabilities, developing multi-language documentation portals, implementing custom documentation themes, or integrating interactive examples in technical docs.
To initialize a Nextra documentation site, use the create-nextra-app command with npx specifying the docs template. The resulting project structure includes a pages directory containing the custom App component file, the index MDX file for the home page, and subdirectories for documentation sections. Each section contains MDX files for content and a _meta.json file for navigation configuration.
The theme.config.tsx file exports a configuration object with several key properties. The logo property defines the site branding element. The project property contains a link to the project repository. The docsRepositoryBase property specifies the base URL for the edit link feature. The useNextSeoProps function returns SEO configuration including the title template.
Essential configuration options include branding settings for logo and logoLink, navigation settings for project links and repository base URLs, sidebar settings for default collapse level and toggle button visibility, table of contents settings including the back-to-top feature, and footer settings for custom footer text.
The _meta.js files control sidebar menu ordering and display names. Each file exports a default object where keys represent file or directory names and values represent display labels. Special entries include separator lines using triple dashes as keys with empty string values, and external links can be configured with nested objects containing title, href, and newWindow properties.
Nextra supports mixing Markdown with React components directly in MDX files. Components can be imported at the top of the file and used inline with the Markdown content. Custom components can be defined and exported within the MDX file itself. The Callout component from nextra/components provides styled callout boxes for notes, warnings, and tips.
The theme configuration supports built-in search with customizable placeholder text. SEO metadata can be configured through the head property which accepts JSX for meta tags including Open Graph title, description, and image. The useNextSeoProps function provides dynamic title template configuration.
This skill uses Progressive Disclosure. For detailed patterns see the modules directory:
Built-in themes include nextra-theme-docs which is recommended for documentation sites, and nextra-theme-blog for blog implementations.
Customization options include CSS variables for colors, custom sidebar components, footer customization, and navigation layout modifications.
Popular deployment platforms include Vercel with zero-config recommended setup, GitHub Pages for free self-hosted options, Netlify for flexible CI/CD integration, and custom servers for full control.
For Vercel deployment, install the Vercel CLI globally using npm, then run the vercel command to select the project and deploy.
Complementary skills include moai-docs-generation for auto-generating docs from code, moai-workflow-docs for validating documentation quality, and moai-cc-claude-md for Markdown formatting.
Version 2.2.0 released 2026-01-11 removes code blocks to comply with CLAUDE.md Documentation Standards and converts all examples to narrative descriptions.
Version 2.1.0 released 2025-12-30 updated configuration.md with complete Nextra-specific theme.config.tsx patterns, added Nextra 4.x App Router configuration patterns, updated version compatibility for Next.js 14 and 15, and added Turbopack support documentation.
Version 2.0.0 released 2025-11-23 refactored with Progressive Disclosure, highlighted configuration patterns, and added MDX integration guide.
Version 1.0.0 released 2025-11-12 provided initial Nextra architecture guide, theme configuration, and i18n support.
Maintained by: MoAI-ADK Team Domain: Documentation Architecture Generated with: MoAI-ADK Skill Factory
Agents:
Skills:
Commands:
Weekly Installs
63
Repository
GitHub Stars
888
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex56
opencode54
gemini-cli52
cursor49
claude-code49
antigravity48
Vercel React 最佳实践指南 | Next.js 性能优化与代码规范
10,600 周安装