[mini-next.js] 总览：Next.js 核心架构分析
引言
Next.js 是一个基于 React 的全栈框架，它提供了文件系统路由、服务端渲染、静态生成等强大功能。本文将从宏观角度分析 Next.js 的核心架构，为后续深入实现打下基础。
Next.js 的核心功能模块
1. 路由系统 (Routing)
Next.js 提供了两种路由系统：
- Pages Router：基于
pages目录的文件系统路由 - App Router：基于
app目录的新路由系统（Next.js 13+）
核心职责： - 扫描文件系统，构建路由映射表 - 匹配 URL 路径到对应的页面组件 - 处理动态路由参数
2. 开发服务器 (Development Server)
核心职责： - 启动 HTTP 服务器 - 处理客户端请求 - 路由匹配和页面渲染 - 提供热重载功能 - 服务静态资源
3. 渲染系统 (Rendering)
Next.js 支持多种渲染模式：
- SSR (Server-Side Rendering)：服务端渲染
- SSG (Static Site Generation)：静态生成
- CSR (Client-Side Rendering)：客户端渲染
核心职责： - 在服务端渲染 React 组件为 HTML - 处理布局嵌套（App Router） - 生成完整的 HTML 文档
4. 模块加载器 (Module Loader)
核心职责： - 动态加载页面组件 - 缓存模块以提高性能 - 支持热重载时的缓存清除
5. 文件监听器 (File Watcher)
核心职责： - 监听文件系统变化 - 触发路由重新扫描 - 清除相关模块缓存
整体架构图
┌─────────────────────────────────────────┐
│ CLI 命令入口 │
│ (dev.js, build.js, start.js) │
└──────────────┬──────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ 开发服务器 (DevServer) │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ HTTP Server │ │ File Watcher │ │
│ └──────┬───────┘ └──────┬───────┘ │
└─────────┼─────────────────┼────────────┘
│ │
▼ ▼
┌──────────────────┐ ┌──────────────┐
│ 路由系统 │ │ 模块加载器 │
│ ┌────────────┐ │ │ │
│ │Pages Router│ │ │ - 加载组件 │
│ └────────────┘ │ │ - 缓存管理 │
│ ┌────────────┐ │ │ - 热重载 │
│ │App Router │ │ └──────────────┘
│ └────────────┘ │
└────────┬────────┘
│
▼
┌──────────────────┐
│ 渲染系统 │
│ ┌────────────┐ │
│ │SSR Renderer│ │
│ └────────────┘ │
│ ┌────────────┐ │
│ │App Renderer│ │
│ └────────────┘ │
└─────────────────┘
请求处理流程
Pages Router 流程
1. HTTP 请求到达
↓
2. 解析 URL 路径
↓
3. Pages Router 匹配路由
↓
4. 模块加载器加载页面组件
↓
5. SSR 渲染器渲染组件为 HTML
↓
6. 返回 HTML 响应
App Router 流程
1. HTTP 请求到达
↓
2. 解析 URL 路径
↓
3. App Router 匹配路由
↓
4. 加载所有相关布局（从根到当前路由）
↓
5. 加载页面组件
↓
6. App 渲染器嵌套渲染布局和页面
↓
7. 返回 HTML 响应
核心数据结构
路由信息
// Pages Router
{
path: '/about', // URL 路径
filePath: '/path/to/pages/about.js', // 文件路径
isDynamic: false, // 是否为动态路由
params: [] // 动态路由参数名列表
}
// App Router
{
path: '/about',
pagePath: '/path/to/app/about/page.js',
layoutPath: '/path/to/app/layout.js', // 当前路由段的布局
isDynamic: false,
params: []
}
模块缓存
Map<filePath, Component>
技术栈
- Node.js：运行环境
- React：UI 框架
- React DOM Server：服务端渲染
- chokidar：文件系统监听
- 原生 HTTP 模块：HTTP 服务器
实现策略
我们将采用自顶向下的实现策略：
- 先理解整体架构（本文）
- 实现路由系统：从 Pages Router 开始
- 实现开发服务器：HTTP 服务器和请求处理
- 实现渲染系统：SSR 渲染
- 实现 App Router：新路由系统
- 优化开发体验：热重载、错误处理等
设计原则
1. 简化优先
这是一个教学项目，我们优先实现核心功能，简化复杂特性： - ✅ 实现核心路由和渲染 - ❌ 暂不实现代码分割、CSS 处理等
2. 代码清晰
- 使用中文注释
- 函数职责单一
- 代码结构清晰
3. 渐进式实现
- 先实现基础功能
- 再添加高级特性
- 每一步都可以运行和测试
下一步
在下一篇文章中，我们将深入实现 Pages Router，这是 Next.js 最基础也是最重要的功能之一。
我们将： 1. 分析文件系统路由的原理 2. 实现路由扫描逻辑 3. 实现路由匹配算法 4. 处理动态路由
相关文件：
- src/router/file-system-router.js - Pages Router 实现
- src/router/app-router.js - App Router 实现
- src/server/dev-server.js - 开发服务器实现