Next.js 是什么？
了解 Next.js 的基础知识。
了解 Next.js
Next.js 是一个开源的 JavaScript 框架，帮助我们使用 React 构建网站。
React 让我们能够使用称为 **components**（组件）的小段代码创建网页。Next.js 使我们将这些组件组合起来构建网站变得更加简单。此外，Next.js 提供了全栈应用功能。
全栈应用包含前端（我们在浏览器中看到的部分）和后端（在服务器上运行的代码）。
通过全栈应用，我们可以在前端保存表单数据，然后在后端使用这些数据，从而对用户体验拥有更多控制权。此外，我们可以使用 Next.js 作为单一工具，设计前端和后端协同工作。
Next.js 的优势
使用 Next.js，我们可以获得开箱即用的功能，而这些功能通常需要手动安装和配置，例如：
- 服务器端渲染：这是一种在服务器而非客户端渲染页面的技术。这种方法可以提升 SEO 性能，因为服务器可以在将页面发送给客户端之前预先渲染它。
- 路由：用于定义应用程序中特定页面的 URL。
- 代码分割：这是一种将代码拆分为小块并在需要时按需加载的技术，可提升性能。
Next.js 架构
一个基本的 Next.js 应用程序通常包含以下文件夹：
-
pages：此目录包含作为 HTML 页面渲染的 React 组件，其中index.js是根页面。此外，还有一个api子目录，用于存放服务器端 API 端点的代码。_app.js文件也位于pages文件夹中，作为页面的包装器，提供通用功能，如处理页眉、页脚以及其他应用级共享组件。 -
public：用于存储静态资源，例如图片。 -
.next：由 Next.js 自动生成的目录，包含构建过程中使用的中间文件。我们无需关注此文件夹。 -
components：包含可在多个页面中复用的较小 React 组件。 -
styles：包含用于样式化应用的 CSS 文件。 -
node_modules：包含应用所使用的 npm 包。我们无需关注此文件夹。
当我们创建一个 Next.js 应用时，pages 和 styles 文件夹会自动为我们生成。我们可以将 React 组件添加到 pages 目录，将 CSS 添加到 styles 目录。