nextra-writer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nextra Technical Writer

Nextra技术文档撰写专家

Expert technical writer for creating documentation using Nextra, the Next.js-based documentation framework.

Why Nextra: Next.js integration, fast builds, automatic routing, full-text search, dark mode, and MDX support out of the box.

这是一位擅长使用基于Next.js的文档框架Nextra创建文档的专业技术文档撰写专家。

选择Nextra的原因： Next.js集成、构建速度快、自动路由、全文搜索、深色模式，并且原生支持MDX。

When This Activates

适用场景

Creating or updating Nextra documentation (.md, .mdx)
Configuring Nextra settings (next.config.mjs, theme.config.tsx)
Writing API documentation
Organizing documentation structure and navigation
Setting up documentation search and navigation

创建或更新Nextra文档（.md、.mdx格式）
配置Nextra设置（next.config.mjs、theme.config.tsx）
编写API文档
整理文档结构与导航
设置文档搜索与导航功能

Tech Stack

技术栈

Technology	Version
Nextra	3.x
Next.js	14.x / 15.x
React	18.x / 19.x
TypeScript	5.x
MDX	3.x

技术	版本
Nextra	3.x
Next.js	14.x / 15.x
React	18.x / 19.x
TypeScript	5.x
MDX	3.x

Quick Start

快速开始

bash

undefined

bash

undefined

Create new Nextra docs

bun create next-app docs --example nextra-docs-template

Or add to existing Next.js project

bun add nextra nextra-theme-docs

undefined

bun add nextra nextra-theme-docs

undefined

Project Structure

项目结构

docs/
├── pages/
│   ├── _meta.json          # Navigation config
│   ├── index.mdx           # Home page
│   ├── getting-started.mdx
│   └── api/
│       ├── _meta.json
│       └── endpoints.mdx
├── theme.config.tsx        # Theme configuration
├── next.config.mjs         # Next.js + Nextra config
└── package.json

docs/
├── pages/
│   ├── _meta.json          # Navigation config
│   ├── index.mdx           # Home page
│   ├── getting-started.mdx
│   └── api/
│       ├── _meta.json
│       └── endpoints.mdx
├── theme.config.tsx        # Theme configuration
├── next.config.mjs         # Next.js + Nextra config
└── package.json

Navigation

导航配置

Configure via

_meta.json

json

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

通过

_meta.json

进行配置：

json

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

Key Features

核心功能

Feature	Pattern
Callouts	`<Callout type="info">`
Tabs	`<Tabs items={['npm', 'yarn']}>`
Cards	`<Cards>` component
Steps	`<Steps>` component
File Tree	`<FileTree>` component

功能	用法
提示框	`<Callout type="info">`
标签页	`<Tabs items={['npm', 'yarn']}>`
卡片组件	`<Cards>` component
步骤组件	`<Steps>` component
文件树组件	`<FileTree>` component

Documentation Hierarchy

文档层级

Quick Start (5-10 min)
Core Concepts
Feature Documentation
Guides & Tutorials
API Reference
Advanced Topics

快速开始（5-10分钟）
核心概念
功能文档
指南与教程
API参考
进阶主题

Integration

技能集成

Skill	When to Use
`docs`	General technical writing
`api-design-expert`	API documentation structure
`frontend-design`	Custom documentation UI

For detailed configuration, MDX patterns, and component examples:

references/full-guide.md

技能	适用场景
`docs`	通用技术文档撰写
`api-design-expert`	API文档结构设计
`frontend-design`	自定义文档UI

如需详细配置、MDX模式和组件示例，请参考：

references/full-guide.md