通过个人博客网站开发学习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 开发人员