Next.js 核心架构

tags: #nextjs #app-router #全栈

Next.js 解决什么问题

React 主要负责 UI，Next.js 在 React 之上提供：

• 文件系统路由
• 服务端渲染和静态生成
• Server Components
• 服务端数据获取
• Route Handlers
• Server Actions
• 图片、字体和脚本优化
• 缓存、重新验证和部署约定

App Router 的核心思想

App Router 使用 app 目录组织路由。目录结构本身就是 URL 结构，特殊文件代表不同的页面生命周期。

app/
├── layout.tsx       # 共享布局
├── page.tsx         # 当前路径页面
├── loading.tsx      # 加载状态
├── error.tsx        # 错误边界
├── not-found.tsx    # 404
└── notes/
    ├── page.tsx
    └── [id]/page.tsx

服务端优先

App Router 默认使用 Server Components。页面可以直接在服务端读取数据，减少发送到浏览器的 JavaScript。只有需要点击、输入、浏览器 API 或客户端状态时，才加上 "use client"。

一个页面的职责

页面组件负责组合内容，不应把所有数据库查询、业务规则和表单逻辑都塞进一个文件。建议拆成：

页面组件 → 服务层 → 数据访问层 → 数据库

关联：next-server-client-components、03-Next.js/数据获取缓存与重新验证