Next.js 教程
Next.js 是基于 React 的框架,具有服务器端渲染功能,可用于创建全栈 Web 应用。要创建用户界面,您可以使用 React,但 Next.js 用于附加功能和自定义。
为什么要使用 Next.js?
Next.js 能够配置 React 应用程序中所需的工具,因此您可以提高工作效率并专注于开发而不是配置。Next.js 解决了路由、数据获取、缓存等常见应用程序需求并改善了开发体验。
Next.js 的主要功能
Next.js 的发明是为了减少 Web 浏览器的负载并提供增强的安全性。还有一些其他功能,如下所示。
功能 | 说明 |
---|---|
路由 | Next.js 使用基于文件系统的路由器。每当我们将任何页面添加到 pages 目录时,它都会通过 url 自动可用。 |
渲染 | Next.js 渲染支持用户浏览器和服务器的两边渲染(客户端和服务器端)。因此,通过预先构建一些页面并根据要求创建其他页面,可以加快速度。 |
数据获取 | 服务器组件现在可以更轻松地使用 async/await 获取数据,并使用改进的获取 API 有更好的方法来保存、缓存和更新数据。 |
样式 | Next.js 支持名为 styled-jsx 的内置 css-in-js 库。它允许在 React 组件中编写 CSS,这些样式将作用域限定在组件内。 |
优化 | 优化图像、字体、脚本将帮助您的应用程序表现更好,并改善 Web 应用程序的 SEO。 |
TypeScript | Next.js 支持 TypeScript,因此与 JavaScript 相比,它具有更好的类型检查和更高效的编译。 |
先决条件
在继续本教程之前,您应该对 JavaScript 和 React.js 有基本的了解。
开始使用 Next.js
要开始使用 Next.js,您可以从以下主题开始。本教程将帮助您按照自己的节奏学习 Next.js,为了从中获益,我们建议您在每节课中进行编码练习。
Next.js 基础知识
在深入学习任何教程之前,请务必从基础知识开始准备。
Next.js 样式
Next.js 支持名为 styled-jsx 的内置 css-in-js 库。
Next.js 路由
Next.js 根据您组织文件的方式自动创建网站链接。如果您在 pages 文件夹中添加新文件,它将是您网站上的新页面。
Next.js API 路由
API 路由是一种使用 Next.js 创建 rest API 的方法。它可以映射 /pages/api 文件夹中存在的任何文件,并将被视为 API 端点。
Next.js 常见问题解答
关于 Next.js 有一些非常常见问题 (FAQ)
NextJS 用于什么?
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。
NextJS 比React?
Next.js 比 React 更有主见,但不如 React 灵活。使用 Next.js 配置 React 应用程序中所需的工具。
NextJS 是前端还是后端?
它可以用于两者,但建议用作前端。
NextJS 和 Nodejs 一样吗?
不,两者不同 - Next.js 是基于 React 的框架和 Node.js JavaScript 运行时环境。