文档样式:

Next.js 是一个基于 React 的开源服务端渲染(SSR)框架,由 Vercel 公司开发,用于构建高性能、SEO 友好的现代 Web 应用程序。它支持多种渲染方式,包括静态生成(SSG)、服务端渲染(SSR)和客户端渲染(CSR),并提供开箱即用的功能,如文件系统路由、自动代码分割、热模块替换等。


核心特性

  • 服务端渲染(SSR):在服务器端生成 HTML,提升首屏加载速度和 SEO 表现。
  • 静态生成(SSG):在构建时生成静态 HTML,适合内容不频繁变化的页面(如博客、官网)。
  • 增量静态再生(ISR):允许在运行时更新静态页面,兼顾性能与动态性。
  • 文件系统路由:基于 pagesapp 目录结构自动创建路由,无需额外配置。
  • API 路由:可在 pages/apiapp/api 中创建后端接口,实现全栈开发。
  • TypeScript 支持:内置支持,无需额外配置。
  • 智能打包与预加载:自动拆分代码,按需加载资源,优化性能。

典型应用场景

  • 企业官网、营销页面(适合 SSG)
  • 电商产品列表、博客(适合 SSG + ISR)
  • 用户个性化页面、实时数据展示(适合 SSR)
  • 全栈应用(结合 API 路由)

快速上手

  1. 确保已安装 Node.js(推荐 18+ 版本)。
  2. 创建项目:
    npx create-next-app@latest my-app
    cd my-app
    npm run dev
  3. 项目默认运行在 http://localhost:3000

官方文档:Next.js 官网
中文文档(可能更新较慢):Next.js 中文文档


与其他框架对比

框架 渲染方式 学习曲线 适用场景
Next.js SSR/SSG/ISR 中等 SEO 友好、全栈、高性能应用
Create React App (CRA) CSR(默认) 简单 SPA、内部工具
Remix SSR/SSG 较高 数据密集型 Web 应用

Next.js 在 React 生态中因平衡开发体验与生产性能而广受欢迎,被 Airbnb、Netflix、GitHub 等公司采用 。