App Router
欢迎来到 Next.js 基础课程!在这个免费的互动课程中,您将通过构建一个全栈 Web 应用程序来学习 Next.js 的主要功能。
我们将构建什么


在本课程中,我们将构建一个具有以下功能的财务仪表板:
- 一个公共主页。
- 一个登录页面。
- 受身份验证保护的仪表板页面。
- 用户添加、编辑和删除发票的功能。
该仪表板还将附带一个数据库,您将在后面的章节中设置它。
在本课程结束时,您将掌握开始构建全栈 Next.js 应用程序所需的基本技能。
概述
以下是您将在本课程中学习的功能概述
- 样式:在 Next.js 中为应用程序设置样式的不同方法。
- 优化:如何优化图像、链接和字体。
- 路由:如何使用文件系统路由创建嵌套布局和页面。
- 数据获取:如何在 Vercel 上设置 Postgres 数据库,以及获取和流式传输的最佳实践。
- 搜索和分页:如何使用 URL 搜索参数实现搜索和分页。
- 修改数据: 如何使用 React Server Actions 修改数据,并重新验证 Next.js 缓存。
- 错误处理: 如何处理常规错误和
404
未找到错误。 - 表单验证和可访问性: 如何进行服务器端表单验证以及改进可访问性的技巧。
- 身份验证:如何使用
NextAuth.js
和中间件向应用程序添加身份验证。 - 元数据:如何添加元数据并为社交分享准备您的应用程序。
先决知识
本课程假定您对 React 和 JavaScript 有基本的了解。如果您是 React 新手,我们建议您首先学习我们的 React 基础课程,以了解 React 的基本原理,例如组件、props、state 和 hooks,以及服务器组件和 Suspense 等较新的功能。
系统要求
在开始本课程之前,请确保您的系统满足以下要求
- 已安装 Node.js 18.18.0 或更高版本。在此处下载。
- 操作系统:macOS、Windows(包括 WSL)或 Linux。
此外,您还需要一个 GitHub 帐户 和一个 Vercel 帐户。
参与讨论
这有帮助吗?