通过个人博客网站开发学习Next.js

使用 React 和 Next.js 12 开发静态网站和混合（静态+SSR）网络应用程序，包括 Tailwind CSS、React Query

讲师：Mirko Nasato

独家Udemy付费课程，中英文字幕，课程资料包齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

你将会学到的

• 使用 Next·js 开发 Web 应用程序
• 使用 styled-jsx 或 Tailwind CSS 样式化组件
• 构建完全静态的网站或混合（静态 + SSR）应用程序
• 从远程 API（例如 Headless CMS）获取数据
• 实现基于 cookie 的 JWT 身份验证
• 使用 React Query 缓存数据

课程内容

12 个章节 • 98 个讲座 • 总时长 8 小时 19 分钟展开所有章节

入门6 个讲座 • 28 分钟

路由和导航5 个讲座 • 21 分钟

造型3 个讲座 • 16 分钟

加载数据中13 个讲座 • 56 分钟

客户端功能6 个讲座 • 34 分钟

部署5 个讲座 • 25 分钟

下一个商店：设置10 个讲座 • 54 分钟

数据获取16 个讲座 • 1 小时 27 分钟

响应式设计和图像优化5 个讲座 • 27 分钟

验证13 个讲座 • 1 小时 12 分钟

反应查询7 个讲座 • 43 分钟

购物车（练习）9 个讲座 • 37 分钟

要求

• 熟悉现代 Web 开发：HTML、CSS、JavaScript、npm
• 熟悉 React，包括 useState 和 useEffect hooks

说明

Next.js被描述为“用于生产的 React 框架”，它可以轻松地在 React 中构建高度优化的 Web 应用程序。

本课程将通过开发两个示例来指导你学习 Next.js：一个完全静态的网站和一个混合（静态 + 服务器端渲染）应用程序。

第一个示例是个人博客网站，它将向你介绍 Next.js 的基本概念，例如预渲染、基于文件系统的路由和水合。

它将向你展示如何在构建时静态生成的页面中加载数据，以及如何在全局 CSS 文件或使用提供组件范围样式的styled-jsx库中设置页面样式。

部署部分将向你展示在生产中运行应用程序的所有选项，从完全托管的无服务器平台（如Vercel）到配置你自己的 Linux 服务器。

你将开发的第二个示例是商店网站。这将是一个更复杂的应用程序，它从Headless CMS ( Strapi ) 加载其数据，并使用高级 Next.js 功能（如增量静态再生）来自动反映后端数据的变化。

如果你愿意，它将向你展示如何在 Next.js 项目中启用TypeScript支持。使用 TypeScript 是可选的；除了一个视频之外，所有视频都使用纯 JavaScript。但是，如果你更喜欢 TypeScript，你可以在 GitHub 存储库中找到商店示例的完整 TypeScript 代码。

该网站将使用流行的Tailwind CSS库进行样式设置，并使用Next Image组件进行图像优化。

你将看到从外部 API 加载数据的不同方法，包括在 Next.js 中编写自己的API 路由，以及如何为你的特定要求选择最佳方法。

该示例将包括一个基于JWT和 cookie 的安全身份验证系统，并且React Query库将用于在客户端缓存数据。

提供了所有示例的完整源代码，可以轻松查看每次讲座中所做的更改。

该课程是最新的 Next.js 版本，即 12。

此课程面向哪些人：

• 想要使用 Next·js 构建静态或混合（静态 + SSR）Web 应用程序的 React/Web 开发人员