Next.js 是目前市面上非常流行的 Node.js Web 框架。跟着 Codevolution 的教程 操作一遍后，觉得它的流行确实有道理。Next.js 是非常适合前端开发者的 Web 框架，优秀的技术方案不仅能大幅提升生产力事半功倍，其良好的架构和编程范式，还能帮助我们在建立更准确、简洁的场景认知。
一、从 Web 应用程序和 URL 说起
一般来说，Web 应用程序是指一种基于互联网浏览器运行的软件，它由一个或多个页面构成，通过 URL 实现页面资源的寻址访问，并通过超链接将页面关联起来，构成完整的产品逻辑。
因此实现页面的 URL 定义和访问，是 Web 产品的基础。但实际上很多传统 Web 服务器的 URL 是基于代码或配置实现的，有时甚至因为分层架构需要而进行多层配置。而 Next.js 基于文件层级的路由设计，在实现同样功能时显得简单直观。这让我想到 Unix 的文件系统设计，好的设计往往简单自然，且经得起时间考验。
接下来是资源寻址完成后的解析与消费。资源本质上是信息，信息可以从接口消费，也可以加上一定的模板作为页面呈现。Next.js 在这方面的设计也非常清晰：仅通过有限的文件夹和文件名组合，就能完成资源类型的解析和页面各种状态的声明。
也就是说，Next.js 仅基于文件夹和文件名，就可以构建一个具备完整 URL 定义的静态页面站点。
二、传统前端常见问题
接下来重点看看页面的展现和渲染。前端技术这方面的发展历程比较曲折，在增强各类能力的同时，也不断引入新的问题。
跳过更早的 jQuery、CMD、MVC 时期，直接从 React 流行说起。
随着 Web 应用越来越富交互化，React 这类 MVVM 方案开始流行，不仅在于它的声明式而非指令式的开发范式更适合富交互的组织表达，也在于它以组件形态具备更完整的模块化方案，继而具备复杂场景的拆解组装能力。
但与此同时，React 的集成问题也比较多。市面上普遍的 Web 框架多以后端视角为主，对前端视图渲染支持有限，很少有框架能完整支持 React 的服务端渲染能力。这导致当时以页面 DOM 为入口、JS 完成整个渲染的 SPA 架构应用大量流行。这类应用虽然具备较好的富交互承载能力，却往往面临较差的性能和 SEO 表现。为了优化性能，开发者不得不进行局部的拆包和调优，或者通过微前端方案进行拆包，为了提高 SEO，也可能采用人蛛分离方案增加收录。而当时流行的 Webpack 打包方案，在支持各类前端打包能力的同时，也存在配置复杂和性能方面的问题。这类问题存在了很长时间，SPA 的性能和 SEO 似乎都遇到了瓶颈。
不仅如此，页面渲染形态还存在服务端渲染（SSR）、静态渲染（SSG）、客户端渲染（CSR）等多种模式，使得前端开发和选型非常碎片化。一旦大方向定型，后期要变更整合能力也会非常困难。
三、Next.js 在编程范式和架构上的创新
Next.js 的创新主要有两点：基于 React 的同构编程范式，以及融合渲染策略的一体化架构。
React 的设计超越同时期的其他库，在于它不依赖浏览器 API，能支持包括服务端在内的多端渲染。React 在前端的流行度已经证明了其符合当前富应用趋势的前端认可度。Next.js 基于 React 的同构编程范式，首先能极大程度上降低前后端编程差异，从而降低生产成本。
但其实，React 同构编程范式的好处不仅仅在于降低前后端差异和编程成本，它真正激动人心的威力在于由此带来的一体化能力。
四、 Next.js 怎么解决传统前端问题
如今看来，传统前端存在前端库众多、前后端差异大、前端渲染策略选型困难，以及富交互应用普遍的性能和 SEO 问题。而 Next.js 基于编程范式和架构的创新，从原生层面解决问题，让一切回归简单。
首先，基于渲染策略的前端选型消失了，只用 Next.js 就能实现不错的页面级别的服务端渲染（SSR）、静态渲染（SSG）和客户端渲染（CSR）。这不仅降低了选型带来的技术差异，也让应用更具备后期变化和扩展能力。
其次，SPA 的性能问题也消失了。基于 RSC 结合服务端的混合渲染非常出色，能够实现基于服务端渲染的整体页面快速呈现，并通过流的方式逐步输出局部内容。据我了解，这个效果非常好，比同一时期的微前端类似方案性能更好，与此同时几乎没有前者带来的技术复杂度。也就是说，Next.js 从原生角度解决了性能问题，编程范式也几乎不增加负担。
至此会发现，前端角度 Next.js 几乎解决了传统前端的受限于架构很难突破的问题，它具备富交互应用的 React 良好范式，又从架构上原生解决了工程和性能的负面问题，且具备更好的扩展性和张力，形成一个非常全面的能力，前端技术和前后端技术也从分裂割据形态形成一个简单统一的整体。
五、Next.js 区别于传统前端方案带来的新能力
1、与后端方案的深度集成能力
以 Clerk 登录为例，通过简单配置 SDK，不仅可无缝集成接口和中间件的登录和权限管理功能，还能集成页面组件级别的相关按钮和表单，大幅降低了以往二次开发或自研的成本。
2. 其他新特性
不仅如此，Next.js 还有一些有创意的编程范式。比如通过 useActionState 实现的前后端数据交互，前后端可以不再用繁琐的基于 URL API 的实现和解析。虽然在小的场景上能减少很多样板代码，在更细粒度和更大规模的场景上还有待实际验证，但确实让人耳目一新。
六、部署体验 Vercel 生态的工程化保障
Next.js 由 Vercel 团队开发，且 Vercel 赞助了类似 React 等核心开源项目，使得技术合作紧密。构建也采用了 Vite 等性能更好的方案，且开箱即用，而部署托管方面，使用 Vercel 能一键部署仓库，并提供运行时的 CDN 加速等其他能力，使得简单产品从开发到发布一气呵成。
总结，学习 Next.js 的收获
因此 Next.js 是特别适合前端学习使用的 Web 框架，学习会带来很多收获：
- 认知角度，基于文件的资源定位，以及基于范式和架构创新的渲染能力，带来了更清晰、简洁的场景概念认知，降低了传统研发带来的开发成本。
- 技术角度，得益于其同构编程范式和一体化架构带来的创新，Next.js 原生解决了传统前端的许多问题，也优化了部署方式。
- 能力角度，单一前端职能的能力往往比较局限，而 Next.js 能提供构建 Web 产品所需的较为完整的能力。
- 市场角度，Next.js 在市场上认可度较高，能带来更多的工作机会。
