什么是 Next.js？——对您的电子商务商店有什么好处
作者：Ton Koop
什么是 Next.js
Next.js是一个 Javascript 框架，允许用户在他们的 React Web 应用程序中实现额外的功能、结构和优化。
它基于 React - 一个用于创建前端用户界面 (UI) 的 JavaScript 库。Next.js 具有多种功能，例如自动静态优化和服务器端渲染，这些功能支持快速开发 Web 应用程序，也使构建基于 React 的应用程序变得更加容易。
例如，我们来讨论一下服务器端渲染。与基于 React 的应用程序（开发人员只能在客户端浏览器中渲染其网站内容）不同，Next.js 允许进行服务器端渲染。这是 Next.js 相对于 React 的主要功能和优势。
客户端渲染意味着用户界面的初始渲染发生在用户的设备上。服务器发送没有任何内容和 Javascript 指令的空 HTML 文件。然后，Web 浏览器编译所有内容并将页面呈现给用户。
另一方面，在服务器端渲染中，服务器在每次请求时生成 HTML 页面，并将其与用于页面交互的 Javascript 指令一起发送到客户端。
Next.js 是开发者社区中非常流行的工具。Netflix、Uber、Twitch、Staples、Hulu 等顶级公司以及其他几个全球品牌都在使用它。在本文中，我们将详细了解这个框架以及它为何是一种广泛使用的工具。
Next.js 有哪些功能？
内置 CSS 支持和节点模块导入 CSS 文件。这意味着 Next.js 的“导入”不仅限于 Javascript。默认情况下，Next.js 使用 styled-jsx 进行样式设置，这允许您编写作用域和封装的 CSS 来设置网页样式。当您对任何 CSS 组件进行更改时，您不必担心会产生意外的副作用，因为您为组件编写的样式不会影响其他组件。Next.js 还允许您编写全局样式，您可以将其应用于整个应用程序。
文件系统路由
Next.js 有一个基于页面概念的路由系统。在 React 中，开发人员必须安装其他工具（如 React Router）来进行页面路由。但是，Next.js 包含此工具，并在将文件添加到“pages”目录时自动提供路由。它还支持嵌套路由、动态路由和页面之间的链接。
图像优化和组件
Next.js 中的图像组件是 HTML 中图像标签的扩展，并内置了优化功能，以更好 加纳电报数据 地改善用户体验。Next.js 图像优化考虑了图像大小调整，并使用 WebP 等现代图像格式为每个视口和设备提供合适的图像大小。此外，Next.js 图像仅在进入视口时才会显示，从而可以更快地加载网页。
增量静态再生
Next.js 的增量静态再生 (ISR) 功能结合了静态站点生成 (SSG) 和服务端渲染 (SSR)。
Next.js 允许开发人员使用每个页面的静态生成，而无需重建整个网站。ISR 允许您在运行时而不是构建时生成静态页面。这意味着网页是在初始请求时生成的，当访问者等待获取数据时，会立即显示后备页面。
一旦成功获取数据，最终页面将被缓存，并生成页面的缓存版本，以便后续访问者获得更快的响应时间。您还可以设置何时重新验证和更新页面。
快速刷新
当您对 React 组件进行更改时，Next.js 会立即提供反馈。因此，一旦您更改了代码，所做的编辑将在几秒钟内可见。9.4 及更高版本默认启用快速刷新功能。