Next.js 知识框架总结

一、核心概念

1. 渲染策略

• CSR (Client-Side Rendering): 传统 React 渲染方式

• SSR (Server-Side Rendering): 服务端渲染

  • getServerSideProps

• SSG (Static Site Generation): 静态生成

  • getStaticProps

  • getStaticPaths (动态路由)

• ISR (Incremental Static Regeneration): 增量静态再生

  • revalidate 选项

• 混合渲染: 不同页面采用不同策略

2. 路由系统

• 文件系统路由

  • pages 目录结构映射为路由

  • 动态路由: [param].js

  • 嵌套路由: 文件夹嵌套

  • 可选捕获所有路由: [[...slug]].js

• 路由API

  • useRouter hook

  • router.push, router.replace 等方法

  • 路由事件: routeChangeStart, routeChangeComplete 等

• API 路由

  • pages/api 目录下的文件作为 API 端点

  • 支持中间件

3. 数据获取

• 客户端数据获取

  • useEffect + fetch/axios

  • SWR/React Query 等库

• 服务端数据获取

  • getServerSideProps

  • getStaticProps

  • getStaticPaths

• Edge API: 边缘计算的数据获取

二、核心功能

1. 页面与布局

• 页面组件 : pages 目录下的组件

• 布局模式

  • 自定义 App 组件 (_app.js)

  • 自定义 Document 组件 (_document.js)

  • 布局组件模式

  • Next.js 13+ 的 app 目录布局系统

2. 样式方案

• CSS Modules

• 全局 CSS

• Sass/SCSS 支持

• CSS-in-JS

  • styled-jsx (内置)

  • Emotion/styled-components 等

• Tailwind CSS 集成

3. 优化功能

• 图片优化

  • next/image 组件

  • 自动格式转换、大小优化、懒加载

• 字体优化 : next/font

• 脚本优化 : next/script

• 预加载与预取

  • next/link 自动预取

  • 手动预加载资源

• 中间件: 路由请求处理

• 边缘函数: 边缘计算支持

4. 国际化 (i18n)

• 路由本地化

• 语言检测

• 内容本地化策略

三、高级特性

1. API 功能

• API 路由

  • 创建无服务器函数

  • 请求处理 (req, res)

  • 中间件支持

• 边缘 API: 低延迟 API 端点

2. 认证与安全

• 认证模式

  • 与 Auth.js (NextAuth) 集成

  • 第三方认证服务

• 安全特性

  • CSP 支持

  • CSRF 防护

  • 环境变量安全

3. 状态管理

• 客户端状态: 同 React (Context, Redux, Zustand 等)

• 服务端状态: 通过数据获取方法管理

• URL 状态: 通过查询参数管理

4. 部署与构建

• 构建输出

  • next build 命令

  • 静态导出 (next export)

• 部署目标

  • Vercel (官方平台)

  • Node.js 服务器

  • 静态文件托管

  • 边缘网络

• 运行时配置

  • 环境变量

  • 自定义服务器 (Express 等)

四、Next.js 13+ 新特性

1. App Router (beta)

• 新的文件路由系统 : app 目录

• 布局系统

  • layout.js

  • 嵌套布局

  • 模板支持

• 服务端组件

  • 默认组件为服务端组件

  • 客户端组件需要 'use client' 指令

• 流式渲染

  • 渐进式内容加载

  • loading.js 模式

• 数据获取

  • 简化的 async 组件

  • 新的 fetch 缓存行为

2. 其他改进

• TurboPack: 新的 Rust 打包工具

• Turborepo 集成: 更好的 monorepo 支持

• 改进的图片组件

• 改进的字体组件

五、生态系统

1. 常用库集成

• 状态管理: Redux, Zustand, Jotai 等

• 数据获取: SWR, React Query, Apollo Client 等

• 表单: React Hook Form, Formik 等

• UI 库: Material UI, Chakra UI, Tailwind UI 等

2. 测试策略

• 单元测试: Jest, Vitest

• 组件测试: React Testing Library

• E2E 测试: Cypress, Playwright

• 可视化测试: Storybook

六、性能优化

1. 代码分割: 自动按页分割

2. 预渲染优化: 选择合适的渲染策略

3. 图片优化 : 使用 next/image

4. 字体优化 : 使用 next/font

5. CDN 缓存策略

6. Bundle 分析 : @next/bundle-analyzer

七、调试与错误处理

1. 开发工具

   • Next.js 开发模式

   • React DevTools

2. 错误处理

   • ErrorBoundary 组件

   • 自定义错误页面 (_error.js)

   • Next.js 13+ 的 error.js 约定

3. 日志与监控

   • 服务端日志

   • 客户端错误监控

八、迁移与升级

1. 从 React 迁移到 Next.js

2. 从 Pages Router 迁移到 App Router

3. 版本升级策略

4. 从 CRA 迁移到 Next.js

这个知识框架涵盖了 Next.js 的主要方面，从基础概念到高级特性，以及生态系统和最佳实践。随着 Next.js 的快速发展，特别是 App Router 等新特性的引入，开发者需要持续关注官方文档和更新日志。