Next.js 教程

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 相比,它具有更好的类型检查和更高效的编译。

先决条件

在继续本教程之前,您应该对 JavaScriptReact.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 运行时环境。