跳到内容

开始使用 Next.js 构建

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

学习 Next.js

学习 Next.js

16 个章节，带你从 React 到 Next.js。

占位符

React 基础

刚接触 React？学习基础概念，助你从 JavaScript 转向 React。

Next.js Pages Router

学习如何使用 Pages Router 构建静态博客。

本课程如何运作？

通过一步步构建一个完整的 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 Server Actions 变异数据，并重新验证 Next.js 缓存。
13

错误处理

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

提高可访问性

实现服务器端表单验证并提高表单的可访问性。
15

添加认证

添加认证以使用 NextAuth.js、Server Actions 和中间件保护你的仪表板路由。
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 的完整资源

查看文档