Next.js by Example
使用React、Next.js和Tailwind CSS开发静态网站和全栈web应用程序
讲师：Mirko Nasato
中英文字幕单独处理，翻译流畅，课程资料包齐全！
你将会学到什么？
- 用Next·js开发web应用程序
- 使用Tailwind CSS样式组件
- 构建完全静态的网站或全栈应用程序
- 从远程API获取数据，如无头CMS
- 实现基于cookie的JWT认证
- 使用React查询缓存数据
课程内容
22 个章节 • 153 个讲座 • 总时长 12 小时 46 分钟
课程要求
- 熟悉现代 Web 开发：HTML、CSS、JavaScript、npm
- 熟悉 React，包括 useState 和 useEffect hooks
课程说明
更新：本课程正在更新，以涵盖新的应用程序路由器功能，该功能将于2023年5月在Next.js v13.4中稳定运行。
它目前在新的应用程序路由器上包含大约4小时的内容，涵盖了与使用Next.js作为静态站点生成器兼容的所有功能。剩下的8个小时涵盖了旧的Pages路由器功能。
Next.js被描述为“用于生产的React框架”，使得在React中构建高度优化的web应用程序变得容易。
本课程将通过开发两个示例来指导您学习Next.js：一个完全静态的网站和一个混合（静态+服务器端渲染）应用程序。
第一个例子是个人博客网站，它将向您介绍Next.js的基本概念，如预渲染、基于文件系统的路由和水合。
它将向您展示如何在构建时静态生成的页面中加载数据，以及如何在全局CSS文件中或使用提供组件范围样式的styled-jsx库来设置页面样式。
部署部分将向您展示在生产环境中运行应用程序的所有选项，从完全托管的无服务器平台（如Vercel）到配置您自己的Linux服务器。
您将开发的第二个示例是商店网站。这将是一个更复杂的应用程序，它从无头CMS（Strapi）加载数据，并使用高级Next.js功能（如增量静态再生）来自动反映后端数据的变化。
它将向您展示如何在Next.js项目中启用TypeScript支持，如果您愿意的话。使用TypeScript是可选的；除了一个视频之外，所有视频都使用纯JavaScript。但是如果您喜欢TypeScript，您可以在GitHub存储库中找到商店示例的完整TypeScript代码。
该网站将使用流行的Tailwind CSS库进行样式设计，并使用Next Image组件进行图像优化。
您将看到从外部API加载数据的不同方法，包括在Next.js中编写自己的API路由，以及如何为您的特定需求选择最佳方法。
该示例将包括一个基于JWT和cookies的安全身份验证系统，React查询库将用于在客户端缓存数据。
提供了所有示例的完整源代码，并提供了一种简单的方法来查看每个讲座中所做的更改。
本课程可以使用最新的Next.js 13，但是它还没有涵盖新的应用程序路由器功能。
此课程面向哪些人？
- 想要使用Next·js构建静态或混合（静态+SSR）web应用程序的React/web开发人员
