# 基础概念

## 文件结构

```
nextra-docs-template/
├── app/                    # 应用目录
│   ├── _meta.js           # 主导航配置
│   ├── layout.tsx         # 布局组件
│   ├── page.mdx           # 首页
│   ├── getting-started/   # 入门指南
│   └── guide/             # 使用指南
├── public/                # 静态资源
├── theme.config.tsx       # 主题配置
├── next.config.mjs        # Next.js 配置
├── package.json           # 项目配置
└── tsconfig.json          # TypeScript 配置
```

## 核心概念

### MDX

Nextra 使用 MDX 格式，支持在 Markdown 中使用 React 组件：

```markdown
# 标题

普通文本。

<MyComponent />

代码示例：

\`\`\`js
console.log('Hello, Nextra!');
\`\`\`
```

### 导航系统

Nextra 根据文件结构和 `_meta.js` 自动生成导航。

- **主导航**：`app/_meta.js`
- **子导航**：各子目录的 `_meta.js`

### 侧边栏

侧边栏自动根据文件结构生成，支持：
- 手风琴式折叠
- 多级嵌套
- 自动排序

## 常用组件

### 代码块

使用三个反引号创建代码块：

```javascript
function hello() {
  console.log('Hello!');
}
```

### 提示框

使用 `>` 创建提示框：

> 这是一个提示框，用于强调重要内容。

### 列表

**无序列表：**
- 项目一
- 项目二

**有序列表：**
1. 第一步
2. 第二步