跳到内容

开始使用 Next.js 构建

通过学习 Next.js 的基础知识并构建一个使用所有最新功能的完整演示网站，从初学者成为专家。

学习 Next.js

学习 Next.js

共 16 章，带您从 React 入门到 Next.js。

占位符

React 基础

React 新手？ 学习基础概念，帮助您从 JavaScript 过渡到 React。

Next.js Pages 路由器

学习如何使用 Pages 路由器构建静态博客。

课程如何运作？

通过构建完整的 Web 应用程序。逐步进行。
Course explainer

设置您的本地环境并初始化 “ACME” Next.js 项目模板。

使用预置样式的组件作为每个章节的一部分，这些组件利用了 Next.js 的约定和模式。

连接真实的应用程序逻辑和数据，使一个成熟的演示网站栩栩如生。

最后，您将拥有一个随时可以交付的网站，以及构建和部署您自己的网站的知识。

您的进度将在您完成章节时同步

按照您自己的节奏学习，并在您上次中断的地方继续

在每个章节中测试您的知识

参加快速测验以查看您学到了什么

我将学到什么？

以下是课程涵盖的所有内容。

介绍

学习如何通过免费的 Next.js 基础课程构建全栈 Web 应用程序。
1

开始入门

使用仪表板启动器示例创建一个新的 Next.js 应用程序，并探索该项目。
2

CSS 样式

使用 Tailwind 和 CSS 模块为您的 Next.js 应用程序设置样式。
3

优化字体和图像

使用 Next.js 内置组件优化字体和图像。
4

创建布局和页面

创建仪表板路由和一个可以在多个页面之间共享的共享布局。
5

在页面之间导航

学习如何使用 <Link> 组件在页面之间导航。
6

设置数据库

为您的应用程序设置数据库，并使用初始数据进行填充。
7

获取数据

了解在 Next.js 中获取数据的不同方式，并使用服务器组件为您的仪表板页面获取数据。
8

静态和动态渲染

了解 Next.js 中的渲染工作原理，并使您的仪表板应用程序动态化。
9

流式处理

通过流式处理和加载骨架来改善应用程序的加载体验。
10

部分预渲染

初步了解部分预渲染及其工作原理。
11

添加搜索和分页

使用 Next.js API 将搜索和分页添加到您的仪表板应用程序。
12

修改数据

使用 React 服务器操作修改数据，并重新验证 Next.js 缓存。
13

处理错误

使用 error.tsx 和 notFound 优雅地处理错误。
14

提高可访问性

在您的表单中实施服务器端表单验证并提高可访问性。
15

添加身份验证

使用 NextAuth.js、服务器操作和中间件添加身份验证以保护您的仪表板路由。
16

添加元数据

学习如何向您的 Next.js 应用程序添加元数据。
17

下一步

Next.js 仪表板课程总结
占位符

想要深入了解？

通过使用我们的指南继续学习。

查看所有指南

如何使用 Next.js、Prisma 和 Postgres 构建全栈应用

构建、部署和 Git

使用 Next.js 和自定义域名构建多租户应用

构建、部署和 Git

将 Next.js 和 Contentful 集成到您的无头 CMS 中

数据库和 CMS

使用 Next.js 和 Shopify 构建电子商务站点

数据库和 CMS

将无头 WordPress 与 Next.js 和 Vercel 结合使用

数据库和 CMS

Next.js 文档

安装、运行、使用和部署 Next.js 的完整资源

查看文档