跳到内容

App Router

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

我们将构建什么

Screenshots of the dashboard project showing desktop and mobile versions.

本课程中,我们将构建一个财务仪表盘,它包含:

  • 一个公共主页。
  • 一个登录页面。
  • 受认证保护的仪表盘页面。
  • 用户添加、编辑和删除发票的功能。

该仪表盘还将附带一个数据库,你将在稍后的章节中进行设置。

课程结束时,你将掌握构建全栈 Next.js 应用程序所需的基本技能。

概述

以下是本课程中你将学习到的功能概述

  • 样式:Next.js 中为应用程序设置样式的不同方法。
  • 优化:如何优化图像、链接和字体。
  • 路由:如何使用文件系统路由创建嵌套布局和页面。
  • 数据获取:如何在 Vercel 上设置 Postgres 数据库,以及数据获取和流的最佳实践。
  • 搜索和分页:如何使用 URL 搜索参数实现搜索和分页。
  • 数据修改: 如何使用 React Server Actions 修改数据,并重新验证 Next.js 缓存。
  • 错误处理: 如何处理一般错误和 404 未找到错误。
  • 表单验证和可访问性: 如何进行服务器端表单验证和提高可访问性的技巧。
  • 认证:如何使用 NextAuth.js 和中间件为应用程序添加认证。
  • 元数据:如何添加元数据并为社交分享准备应用程序。

先决知识

本课程假定你对 React 和 JavaScript 有基本了解。如果你是 React 新手,我们建议你先学习我们的 React 基础课程,了解 React 的基本概念,例如组件、props、状态和 hooks,以及 Server Components 和 Suspense 等新功能。

系统要求

在开始本课程之前,请确保你的系统满足以下要求:

  • 已安装 Node.js 18.18.0 或更高版本。点击此处下载
  • 操作系统:macOS、Windows(包括 WSL)或 Linux。

此外,你还需要一个 GitHub 账户 和一个 Vercel 账户

加入讨论

如果你对本课程有任何疑问或想提供反馈,可以在 RedditGitHub 上向我们的社区提问。

准备好开始了吗?

现在你已经了解了本课程的介绍,让我们开始吧。

下一章

1:入门

学习如何创建 Next.js 应用程序并运行本地开发服务器。