Next.js 教程

Table of content

Next.js 是一个基于 React 的框架，具有服务器端渲染功能，可以创建全栈 Web 应用。要创建用户界面，您可以使用 React，但 Next.js 可以提供额外的功能和自定义。

为什么要使用 Next.js？

Next.js 能够配置 React 应用中所需的工具，因此您可以提高生产力，专注于开发而不是配置。Next.js 解决了常见的应用需求，例如路由、数据获取、缓存，并改善了开发体验。

Next.js 的发明是为了减少 Web 浏览器的负载并提供增强的安全性。它还有一些其他特性，如下所示。

特性	描述
路由	Next.js 使用基于文件系统的路由器。每当我们在 pages 目录中添加任何页面时，它都会通过 URL 自动可用。
渲染	Next.js 渲染支持双端渲染（客户端和服务器端），用户的浏览器和服务器。因此，通过预构建一些页面并根据需要创建其他页面，可以使其更快。
数据获取	服务器组件现在可以使用 async/await 更轻松地获取数据，并通过改进的 fetch API 提供更好的方法来保存、缓存和更新数据。
样式	Next.js 支持内置的 css-in-js 库，名为 styled-jsx。它允许在 React 组件中编写 CSS，并且这些样式将限定在组件范围内。
优化	优化图像、字体、脚本将有助于您的应用获得更好的性能并改善 Web 应用的 SEO。
TypeScript	Next.js 支持 TypeScript，因此与 JavaScript 相比，它具有更好的类型检查和更有效的编译。

在继续本教程之前，您应该对JavaScript 和React.js 有基本的了解。

要开始使用 Next.js，您可以从以下主题开始。本教程将帮助您按照自己的节奏学习 Next.js，为了充分利用本教程，我们建议您在每个课程中进行编码练习。

在深入学习任何教程之前，始终要做好基础准备。

Next.js 支持内置的 css-in-js 库，名为 styled-jsx。

Next.js 根据您组织文件的方式自动创建网站链接。如果您在 pages 文件夹中添加一个新文件，它将成为您网站上的一个新页面。

API 路由是使用 Next.js 创建 REST API 的一种方式。它可以映射 /pages/api 文件夹中存在的任何文件，并将被视为 API 端点。

关于 Next.js 有些非常常见的问题 (FAQ)

Next.js 是一个用于构建全栈 Web 应用的 React 框架。

Next.js 比 React 更具主张性，但灵活性不如 React。使用 Next.js 配置 React 应用中所需的工具。

它可以用于两者，但建议用作前端。

否，两者不同 - Next.js 是基于 React 的框架，而 Node.js 是 JavaScript 运行时环境。

打印页面