Next.js 简介

Next.js 是基于 React 的最大的全功能web应用扩展框架，并且集成了一个快速构建的 基于 Rust 的 JavaScript 工具。根据 Top Software Repos on GitHub 统计，Next.js也是GitHub上排名第14的软件仓库(以Star计算)，可见这个web框架的流行程度。

备注

阮一峰的网络日志 曾经推荐过一篇 How I Built My Blog 介绍如何采用Next.js构建blog的文章，非常详细和精彩。

Next.js是由 Vercel 公司推出的基于 React 的web框架，可以实现 server-side rendering 和 static website generation :

  • 传统的React应用都是客户端浏览器渲染，但是Next.js扩展了功能提供了服务器端渲染，并且建议开发者使用Node.js构建服务器端选软应用

  • Vercel公司 提供 静态网站 托管

从本质上来说(Under the hood)，Next.js为 React 抽象和自动化配置了工具，例如 bunding, compiling 等。这样开发者可以聚焦在应用程序开发而不是浪费时间来配置它。

Reddit上一个讨论NextJs vs React(中文机翻) 提供了一个概览对比:

  • Nextjs在React基础上提供了服务器端渲染，这样对于客户端响应更快(降低客户单渲染需求)，也更有利于Google SEO排名

  • Nextjs特别适合构建大型静态页面

  • Nextjs 13+引入了服务器动作，这样前端和后端可以共存于一个代码库而不需要调用API

我个人感觉Nextjs适合快速入门实践，构建作品并体会现代web框架的实现优点。但后续更深入应该是学习框架的构成原理以及如何实现从JavaScript构建出框架的能力。越深入底层越能够真正理解框架。

主要功能

Next.js 主要功能

功能

说明

Routing

基于文件系统路由到服务器组件，支持布局(layouts)，嵌套路由(nested routing)，负载状态(loading state)，错误处理(error handing)等等

Rending

通过客户端和服务器端的渲染，支持静态和动态渲染优化，可以在边缘串流以及 Node.js 运行时

Data Fetching

在服务器组件中采用 async/await 获取数据，并且有一个扩展的 fetch API用于请求记忆(request memoization)，数据缓存(data caching)和重新验证(revalidation)

Styling

支持各种样式，包括CSS模块，Tailwind CSS 和 CSS-in-JS

Optimizations

图像、字体和脚本优化来提高应用的核心web生命和用户体验

TypeScript

支持TypeScript，更好的类型检查和更高效的编译，以及自定义TypeScript插件和类型检测器

参考