2022 年完成 Next.js 开发人员：从零到精通

掌握 NextJS 并构建企业级全栈 ReactJS 应用程序。由行业专家授课，采用现代最佳实践！

讲师：Andrei Neagoie，Ankita Kulkarni，Zero To Mastery

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

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

你会学到什么

• 构建真正的企业级 NextJS 应用程序并部署到生产环境
• 学习像高级开发人员一样构建反应性、高性能、大规模的应用程序
• 了解 NextJS 生态系统中的最新功能和工具，包括 SWR（React Hooks）、Hasura、Serverless Functions、Vercel、Framer Motion 等
• 学习不同的渲染技术：静态站点生成、服务器端渲染、增量静态再生、水化等…
• 使用 GraphQL 作为 NextJS 开发人员
• 成为前 10% 的 NextJS 开发者
• 设置身份验证和用户帐户（包括无密码登录！）
• 使用 Airtable（它正在爆炸式流行）构建全栈应用程序
• 了解 SEO 以及如何使用 NextJS 让你的应用程序在 Google 上排名
• 从零开始掌握 NextJS 开发者的最新生态系统
• 通过做出良好的架构决策并帮助团队中的其他人来学习领导 Next JS 项目
• 使用最新的 ES6/ES7/ES8/ES9/ES10/ES2020/ES2021 JavaScript 编写干净的代码

显示较少

课程内容

24 个部分• 417 个讲座• 36 小时 58 米总长度展开所有部分

介绍5 节课• 12 分钟

Next.js 基础知识（包括 React）11 节课• 38 分钟

项目 #1：构建你的第一个 Next.js 应用程序 | 咖啡鉴赏家19节课• 1 小时34 分钟

项目 #1：使用 Next.js 进行路由7节课• 34 分钟

项目 #1：Next.js 中的样式12 节课• 35 分钟

Next.js 中的水合作用、SEO 和不同的渲染技术10 节课• 45分钟

项目#1：静态咖啡店页面41 节课• 3 小时 29分钟

项目#1：按地点划分的咖啡店16 节课• 1 小时 27 分钟

项目 #1：无服务器函数10节课• 48 分钟

项目 #1：使用 Airtable 进行数据存储16 节课• 1 小时 47 分钟

项目 #1：带有客户端渲染的 SWR18 节课• 1 小时 45 分钟

项目 #1：部署和构建优化19 节课• 1 小时28 分钟

主项目：项目设置 | 带有 Next.js 的 Netflix5节课• 26 分钟

主项目：Netflix 主页和视频36节课• 3 小时 39 分钟

主项目：Magic 认证 | 带有 Next.js 的 Netflix24节课• 2 小时 26 分钟

主项目：增量静态再生 | 带有 Next.js 的 Netflix28节课• 2 小时 16 分钟

主项目：Hasura GraphQL | 带有 Next.js 的 Netflix20 节课• 2 小时6分钟

主项目：使用 Hasura 进行身份验证 | 带有 Next.js 的 Netflix19 节课• 1 小时 56 分钟

主项目：评级服务和我的列表页面 | 带有 Next.js 的 Netflix44节课• 4 小时 10 分钟

NextJS 12：新功能6 节课• 24 分钟

主项目：部署 | 带有 Next.js 的 Netflix7节课• 42 分钟

然后去哪儿？5 节课• 3 分钟

附录：学习 React38节课• 3 小时 51 分钟

奖金部分1 节课• 1 分钟

要求

• 基本的 HTML、CSS 和 JavaScript 知识
• 你不需要任何 React 或任何其他 JS 框架的经验！我们甚至提供 React 入门讲座作为选项！

描述

刚刚发布，包含 2022 年所有最新的 Next.js 功能！加入由超过 600,000 名开发人员组成的实时在线社区，以及由在硅谷和多伦多与 Next.js 实际合作过的行业专家教授的课程。Ankita 还是所有 Next.js 和 React 会议的常客和讲师。

本课程使用最新版本的 Next.js，专注于效率。永远不要再花时间在令人困惑、过时、不完整的教程上。安德烈课程的毕业生现在在谷歌、特斯拉、亚马逊、苹果、IBM、摩根大通、Facebook 等顶级科技公司工作是有原因的。

我们向你保证，这是关于 Next.js 和 React 的最全面的在线资源。这个基于项目的课程将向你介绍 2022 年 Next.js 开发人员的所有现代工具链。在此过程中，我们将使用 React Hooks、Hasura (GraphQL)、Context API、Airtable、Serverless Functions 构建一个庞大的 Netflix 克隆应用程序, Framer Motion, Vercel + 更多。这将是一个全栈应用程序，与你在大多数“简单”在线教程中看到的不同！

当我们从头到尾将专业的 Next.js 项目发布到生产中时，课程将非常实用。我们将从一开始就教你 Next.js 基础知识，然后进入高级主题，以便你可以在未来的任何 NextJS 项目中对架构和工具做出正确的决策。

所有代码都将逐步提供，即使你不喜欢编写代码，你也可以访问完整的主项目代码，因此任何注册该课程的人都将拥有自己的项目立即投资组合。

本课程将涵盖以下内容：

1. Next.js 基础
比较 Next.js 与 React，并了解 Next.js 提供的好处。你将了解 Next.js 为何如此受欢迎以及 JAM Stack 的意义所在。本节将为你在课程的其余部分奠定基础。

2. 构建你的第一个 Next.js 应用程序 | 咖啡鉴赏家
我们将立即建立第一个项目。第一篇主要讲授 Next.js 的基础知识。本节重点介绍设置项目，教授css模块等基础知识，快速刷新，如何设置项目等…

3. 使用 Next.js 进行路由 | Coffee Connoisseur
你将学习有关路由的所有内容，例如动态路由、索引路由、命名路由、链接组件。

4. Next.js 中的样式| Coffee Connoisseur
本节将教你如何使用 css 模块、单独的组件样式和全局样式来设置应用程序的样式。

5. Next.js 中的水合作用、SEO 和不同的渲染技术
这是本课程最重要的部分之一。本节将教你什么是 SEO，Next.js 如何帮助 SEO，不同的渲染技术是什么，例如：静态站点生成、服务器端渲染、增量静态再生（以及它们的不同之处）、客户端渲染、什么是水合作用。

6. 静态咖啡店页面 | Coffee Connoisseur
学生将详细了解静态渲染以及如何选择静态渲染的内容。你将向 Foursquare 发出 API 请求并使用 SSG 呈现这些请求。

7. 按地点分类的咖啡店 | Coffee Connoisseur
Next.js 允许你在选择静态渲染时使用不同的回退。本节将深入讨论这一点，你还将学习如何检索用户位置和使用 Context API。

8. 无服务器功能 | Coffee Connoisseur
什么是无服务器功能？我们为什么使用它们以及何时使用它们？你将创建用于检索静态咖啡店的无服务器函数。

9. 使用 Airtable 存储咖啡店 | Coffee Connoisseur
你将了解如何使用 Airtable 进行数据库存储。我们将把咖啡店数据存储在 Airtable 中，并在这里学习客户端渲染。

10. 带有客户端渲染的 SWR | 咖啡鉴赏家
什么是 SWR？什么时候使用它？我们将使用 Next.js 库进行 SWR，并在本节中使用 SWR 和客户端渲染。

11. 部署和构建优化 | Coffee Connoisseur
将你的应用程序部署到 Vercel 和 Netlify。你将了解不同的云提供商是什么，Vercel 有何不同，什么是 Lighthouse，以及如何提高我们在 Next.js 中的性能。

12. 项目设置 | 带有 Next.js 的 Netflix
这是一个大项目！你将开始为最终项目进行设置。本节是关于设置我们的 Netflix 项目。

13. Netflix 主页和视频 | Netflix 和 Next.js
你将构建主页并使用服务器端渲染。你将学习如何服务器呈现内容，我们还将调用 YouTube API 来获取视频列表并显示在主页上。卡片组件在 Netflix 中很复杂，因此你还将学习一些成帧器运动来构建卡片组件。

14. 魔术认证 | Netflix 与 Next.js
Auth 在 Next.js 中如何工作？我们将在 Next 中使用无密码登录，并使用正确的身份验证和验证构建登录页面。

15. 增量静态再生 | Netflix 与 Next.js
在主页上显示视频并使用 ISR 将模态构建为页面。你将了解有关增量静态生成的更多信息以构建此模式。

16. 哈苏拉 GraphQL | Netflix 与 Next.js
你将了解什么是 GraphQL、Hasura 以及 Hasura 架构的外观。我们将使用 Hasura 环境设置项目。

17. Hasura 认证 | Netflix 与 Next.js
你将了解身份验证流程架构的工作原理，并介绍服务器端 SDK 以使用户登录。

18. 评分服务和收藏视频页面 | 带有 Next.js 的 Netflix
你将为评分服务设置 Hasura，创建评分 API 以喜欢和不喜欢视频，并构建我的列表页面以显示收藏的 YouTube 视频列表。

19. 部署到生产 | Netflix 和 Next.js
创建最终的 GitHub 存储库，设置存储库，最后部署到 Vercel！

20. 附录：React 简介
对于那些需要 React.js 和 React Hooks 入门的人来说，这是一个可选部分，让你准备好充分利用本课程。
————
我们向你保证这是 Next.js 上最好的课程。

本课程不是让你在不了解原理的情况下编写代码，这样当你完成课程后，除了观看另一个教程之外，你不知道该做什么。不！本课程将推动你并挑战你从 Next.js 的绝对初学者转变为 Next.js 和 React 开发人员中排名前 10% 的人。我们保证。

课程内见！

本课程适用于：

• 有兴趣超越普通“初学者”教程的学生
• 想要学习 Web 开发人员最需要的技能的程序员
• 想要进入 NextJS 开发者前 10% 的开发者
• 希望获得使用可扩展大型应用程序经验的学生
• 想要超越基础知识的训练营或在线教程毕业生
• 想要向真正的行业专家学习的学生，而不仅仅是另一个从文档中教授的在线讲师