更新：本课程现已修订，包含新的App Router功能，该功能已于 2023 年 5 月通过 Next.js v13.4 稳定运行。本课程的前半部分介绍了新的App Router，而后半部分介绍了较旧的（但仍受支持）Pages Router。

Next.js 被称为“Web 的 React 框架”，可以通过服务器端渲染 React 组件轻松构建高度优化的 Web 应用程序。

本课程将指导您通过逐步开发完整的项目来学习 Next.js。

第一部分将向您展示如何使用Next.js 作为静态站点生成器，将所有页面预渲染为静态 HTML、CSS 和 JavaScript。

这将教您基本的 Next.js 概念，例如基于文件的路由、预渲染、React 服务器组件、服务器和客户端组件之间的差异以及如何在服务器组件中获取数据。

它还将使用流行的Tailwind CSS框架进行样式设置，演示如何将自定义字体嵌入到您的应用程序中，以及如何使用元数据使您的页面对 SEO 更加友好。

部署部分将向您展示在生产中运行应用程序的各种选项，从使用Vercel等完全托管的平台到执行可上传到任何 Web 服务器的静态导出。

第二部分将向您展示如何使用Next.js 作为全栈框架，启用动态渲染、基于时间的重新验证和按需重新验证等功能。

它将使用Headless CMS（Strapi）来存储数据，并演示如何从 Next.js 应用程序调用其 REST API，以及当 CMS 中的数据发生变化时更新前端页面的各种选项。

它还将涵盖图像优化，展示 Next.js 如何按需转换图像和调整图像大小，以及如何启用浏览器的延迟加载。

最后，它将演示如何在应用程序中集成第三方 UI 组件，以及何时使用客户端数据获取仍然有意义。

您可以使用JavaScript 或 TypeScript来遵循该示例。提供了完整的源代码，可以轻松查看每个讲座中所做的更改。