跳至内容

学习 Next.js

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

我们将构建什么

Screenshots of the dashboard project showing desktop and mobile versions.

在本课程中,我们将构建一个简化版的财务仪表板,它具有

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

仪表板还将附带一个数据库,您将在后续章节中进行设置。

在本课程结束时,您将掌握开始构建全栈 Next.js 应用程序所需的必要技能。

概述

以下是您将在本课程中学习的功能概述

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

先决条件知识

本课程假设您对 React 和 JavaScript 有一定的了解。如果您是 React 新手,我们建议您先学习我们的React 基础课程,以学习 React 的基础知识,例如组件、props、状态和钩子,以及服务器组件和 Suspense 等较新的功能。

系统要求

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

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

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

加入讨论

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

准备好了吗?

既然您已经了解了课程,让我们深入了解一下。

下一步

1:入门

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