为什么你应该学习 Next Next

你已经学习了 React。你至少对虚拟 DOM 有个大致的了解，并且能够熟练地使用 hooks，例如 `require` useState、` useEffectrequire` 和 `require` 。那么，下一步useRef该做什么呢？我想答案就在问题本身之中。

下一集

Next是一个基于 React 构建的框架，旨在让开发过程更加轻松愉快。就我个人而言，我本来就很喜欢使用 React，所以 Next 能够如此出色地兑现其承诺，着实让我感到惊喜。

主要特点

学习 Next 究竟有何价值？Next 与直接使用 React 有很多不同之处，但我们先来看看 Next 为解决常见的 React 问题而实现的 3 个关键特性。

1. 服务器端渲染 (SSR)

在浏览器中查看经典 React 应用的源代码时，你会发现它包含的内容并不多。通常，服务器只会发送一个 id<div>为 `<div>` 的 `<div>` 标签root。页面的其余部分都在客户端（即用户的浏览器）渲染。

当然，客户端渲染正是 React 强大之处的根本所在，它使 React 能够利用虚拟 DOM，并基于此选择性地更新真实的 DOM 树。虚拟 DOM 能够选择性地更新当前正在被操作的元素，而不是每次用户更改时都重写整个 DOM 树。

但在某些特定情况下，React最大的优势也可能成为它最大的劣势。NextJS默认就解决了这些问题，同时保留了React的其他优秀特性。

初始加载时间

React 应用中加载 DOM 可能需要一些时间，根据用户的网络速度，这可能会导致空白屏幕显示的时间过长。

SSR（服务器端渲染）可以缩短页面加载时间，因为组件已经在服务器端预渲染成 HTML 页面，如下方视频所示。虽然加载 DOM 内容的实际时间相近，但左侧的非 SSR 页面会显示空白页，直到所有脚本加载完毕；而右侧的 SSR 页面则会立即向用户显示内容。

视频演示了非服务器端渲染（左）和服务器端渲染（右）两种情况下页面加载时间的差异。网络限速已启用，并在 Chrome 开发者工具中设置为“常规 4G”。鸣谢：S. Karavadi 的精彩文章。

数据获取

想象一下你正在获取数据，这很正常。毕竟，我们都成了数据的奴隶，就像狗成了球的奴隶一样。一个标准的 React 应用需要先加载所有脚本，才能意识到其中包含一个用于获取数据的钩子。只有这样，它才能发送数据请求并等待响应。

我们通常会通过引入加载指示器或类似组件来处理这种情况，这些组件旨在告知用户应用程序仍在等待接收数据。而使用 Next，您可以在构建时预先获取一些数据，远早于用户请求查看这些数据的时间。

SEO

尽管 React 相比传统的 JavaScript 密集型 Web 应用已经拥有更强大的 SEO 功能，但 Next 版本将其提升到了一个新的高度。在标准的 React 应用中，搜索引擎爬虫通常只能看到服务器发送的初始空白 HTML 页面。而服务器端预渲染页面则可以解决这一潜在问题，使搜索引擎爬虫能够看到应用的完整内容，从而正确地对其进行索引。

2. 简化路由

告别 React-Router-DOM 和它那不断变化的文档吧（当然，我还是很感谢维护者们！）。现在，你可以直接在文件夹结构中定义页面和路由了！Next 会提供一个名为 pages 的文件夹，你可以往里面添加……嗯，各种页面。pages文件夹里的每个文件都会自动转换为一个同名路由。

/pages 
    /about.js
    /index.js
    /projects.js
    /writing.js

上述文件夹结构将转化为一个具有以下路由的应用程序：

/pages/index.js  - BASEURL/

/pages/about.js- BASEURL/about/

/pages/projects.js- BASEURL/项目/

/pages/writing.js- BASEURL/写作/

很方便，对吧？默认情况下，该文件index.js直接映射到路由/ 。Next 还可以轻松处理嵌套路由，就像这样。

/pages 
    /index.js
    /snoop
        /dogg.js
        /doggydogg.js
        /index.js
        /lion.js

上述文件夹结构将转化为一个具有以下路由的应用程序：

/pages/index.js- BASEURL/

/pages/snoop/index.js- BASEURL/snoop/

/pages/snoop/dogg.js- BASEURL/snoop/dogg/

/pages/snoop/doggydogg.js- BASEURL/snoop/doggydogg/

/pages/snoop/lion.js- BASEURL/snoop/lion/

如果是带有动态参数的动态路由呢？Next 也完全没问题。

/pages
    /index.js
    /about
    /products
        /index.js
        /[productId].js

通过将文件名用方括号括起来，您可以向 Next 表明您正在定义一个动态路由，然后您可以从代码中访问该路由的参数。

/pages/products/[productId]- BASEURL/products/{param}/

我会在一篇专门讲解路由的文章中详细介绍如何访问动态参数。但就本文而言，只需知道路由处理非常直观，无需导入任何额外的库即可。

3. 后端功能

NextJS 还允许我们集成后端代码，例如与数据库或文件系统通信的代码。您可能会发现自己在 Next 应用程序中编写 NodeJS 代码来执行 CRUD 操作或验证用户身份。使用 Next 构建全栈应用程序的好处在于，您不再需要在不同的项目之间切换来微调应用程序。

默认创建的文件夹中的文件pages/api将被视为 API 端点。例如，pages/api/artist.js如果某个路由指向的文件路径包含类似以下后端代码，则该路由将返回状态码为 200 的 JSON 响应：

export default function handler(req, res) {
  res.status(200).json({ name: 'Snoop Doggy Dogg' })
}

我一开始完全不知道 Next.js 还能做到这一点。我以前一直觉得 React 框架只能用于前端开发，但现在我意识到它竟然可以创建 RESTful API，这真是让我感到无比震撼。

就是这样？

不，我只是略窥门径。我在Reddit上找到了一篇非常简洁但技术性很强的 Next 功能总结，作者正是当时 Next 的首席维护者。如果你想了解更多，但又懒得花几个小时去仔细研读冗长的 Next 官方文档（顺便说一句，在我看来，Next 官方文档本身就符合所有“优秀文档”的标准），我强烈建议你读读这篇总结。

仍然不信服？

另一个需要考虑的因素是，NextJS 并非昙花一现的潮流。它最初由 Vercel 于 2016 年发布，如今已发展成为一个成熟的框架，拥有不断壮大的用户群体，使其成为就业市场上的热门技能。

NextJS 将会长期存在，并且大放异彩。

可以说，NextJS 的知名度已经高到足以让这篇文章显得意义不大。这里再举一个例子来证明 Next 强大的渲染能力。