[mini-next.js] 总览：Next.js 核心架构分析

作者：oasis

引言

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 响应

核心数据结构

路由信息

javascript

// 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: []
}

模块缓存

javascript

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 最基础也是最重要的功能之一。

我们将：

分析文件系统路由的原理
实现路由扫描逻辑
实现路由匹配算法
处理动态路由

相关文件：

src/router/file-system-router.js - Pages Router 实现
src/router/app-router.js - App Router 实现
src/server/dev-server.js - 开发服务器实现