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

发表回复

后才能评论

  • 每一个课程页面,都有演示地址选项,点击链接可以跳转到课程发布网站查看详细课程列表。
  • 绝大部分课程都有试看内容,可以先点击试看,再决定是否购买。
  • 本站课程均存储在阿里云盘或百度网盘中,由于阿里云盘对分享的文件类型有限制,所以课程资料和字幕会存储到蓝奏云盘中。
  • 阿里云盘和蓝奏云盘都是不限速下载的,你既可以选择在阿里云盘中在线学习,也可以选择下载到本地学习。
  • 课程下载到本地可以挂载中英文双字幕,请点击查看Potplayer挂载中英文双字幕教程
  • 本站所有课程,均提供mp4格式视频文件,中英文双字幕,配套资料齐全,不加密。
  • 每一个课程右侧下载面板中,都会有清晰度标识,大部分都是1080P或者720P,还有少数是超高清的。
  • 本站课程购买之后,均可以免费更新,所有课程,皆配有中文字幕。
  • 请注意,课程的中文字幕是根据英文字幕用谷歌翻译生成的,本非人工翻译。谷歌翻译准确度尚可,学习观看,没有问题。
  • 由于数字资源具有可复制性,一旦购买,不接受退款要求,请在购买之前,认真了解课程内容,确定是否需要。
  • 当然,如果有特殊情况,可以查看网站底部联系方式,联系站长说明问题,我会为你妥善处理。
  • 赞助本站VIP会员,可以免费下载所有课程,详情请查看VIP介绍