Next.js 是一个 React 框架
React 是一个流行的 JavaScript 库。在某些情况下,你会需要 React 实现超出其本身能力范围的功能,这时 Next.js 就派上用场了。Next.js 以 React 库为核心技术,同时内置了许多常见的额外功能,满足更复杂的需求。
React 是一个库
React 是一个用于构建用户界面的 JavaScript 库。用户界面通常也被称为应用程序的前端。
本课程假设你已有 React 的使用经验,并达到了中级水平。你不需要成为专家,但在学习 Next.js 之前具备一定的 React 基础非常重要。

Next.js 是一个框架
Next.js 建立在 React 库的基础之上。它被称为框架,是因为使用 Next.js 有特定的规范和方式。它与 React 类似,但功能更强大、更完善。
React 应用需要大量额外功能,通常需要引入第三方 npm 包来实现。而 Next.js 已经将这些功能直接集成在框架内部。例如,内置了路由系统,使得特定 URL 可以加载指定组件并显示在对应位置;再比如,Next.js 能够轻松操作页面的 <head> 标签,这对搜索引擎优化(SEO)非常有利,且使用起来极为简便。

React 的优势
状态(State)
应用的状态用于存储数据,其中部分数据会随着用户操作而变化。可以将状态理解为前端数据库,使应用减少与后端的通信频率。状态还能驱动视图更新:一旦状态发生变化,用户界面中对应的内容也会随之更新。
组件(Components)
组件是任何 React 应用的基本构成单元,一个典型的 React 应用包含多个组件。简单来说,组件是一个 JavaScript 函数,它可以接收输入(如属性 props),并返回一个描述 UI 某一部分应如何呈现的 React 元素。
其他优点
React 极其流行,使用它的优势非常多,数量之多难以在此一一列举。
React 的缺点
总体而言,React 本身的缺点并不多。初学时甚至感觉不到任何不足,只有在长期使用该库后才会逐渐察觉。其中一些问题可以通过引入第三方 npm 包来解决,如下所述。
缺乏内置路由
使用类似 React Router DOM 这样的第三方路由库并不理想,原因有两点:首先,几乎每个 React 应用都需要路由功能,却必须额外安装第三方库;其次,路由的使用方式不够统一,具体实现会因项目结构不同而差异较大。
无法实现页面级 SEO
后续课程中我会详细解释为何仅使用 React 构建的网站不利于搜索引擎收录。目前只需了解:我和你一样,曾多次尝试让纯 React 构建的站点被 Google 等搜索引擎索引,几乎尝试了所有方法,最终仍以失败告终。后来我转而学习 Next.js,发现它非常容易上手。如果你正面临搜索引擎收录困难的问题,Next.js 能有效解决这一痛点。
为什么你应该使用 Next.js
Next.js 拥有 React 的所有优点,同时规避了 React 存在的诸多问题。随着课程深入,你会对此有更深刻的理解。使用 Next.js 还能避免频繁安装和学习多个第三方 npm 包,因为它已将关键功能内置于框架之中。