|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/complete-nextauth-course/
课程评论：没有评论
课程名称：完全的 NextAuth 课程 课程概述：在本课程中，我们将实现 NextAuth 以服务于我们的 NextAuth 应用程序。我们将探讨不同的身份验证提供者，包括电子邮件提供者、GitHub 提供者、Twitter 提供者、Facebook 提供者和 Auth0 提供者（可通过微软、亚马逊、PayPal、Dropbox、Yahoo 和 Yandex 等登录）。课程示例中，我们将演示如何使用微软账户进行登录。此外，我们将学习如何设置 SendGrid，以便实现无密码的电子邮件登录。我们还将配置 Firebase 适配器和 MongoDB 适配器，以便用户数据存储在这些数据库中。最后，我们将把应用程序部署到 Vercel。 为什么选择 Next.js？Next.js 可以让网站的用户界面部分的所有 React 组件首先在服务器上渲染。这意味着在 HTML 被传输到客户端（用户的浏览器）后，用户可以无需进一步操作即可阅读页面内容。这样可以显著提高用户感知的页面加载速度。此外，SSR 提供了即开即用、可索引和可爬取的网站，这对于搜索引擎优化（SEO）至关重要，因为无需客户端 JavaScript 即可查看页面内容，从而增强了技术 SEO，为客户带来好处。 为什么选择 TailwindCSS？Tailwind CSS 是一个受欢迎的低级 CSS 框架，提供了大量的自定义选项。虽然 Bootstrap 使用广泛，但它们本质上是不同的。Tailwind 不提供预设计组件，而是提供构建块，让开发者能够快速创建设计。 为什么选择 Daisy UI？Daisy UI 增强了 Tailwind，提供了美观的组件类，完全可自定义且可按主题设置。Daisy UI 创建了一个可扩展的、面向设计师的设计系统。 我们将学习的内容：使用 React Hook 检查用户是否点击输入框，结合使用 FontAwesome、Heroicons 和 Daisy UI，帮助我们创建一个美观的 Instagram 登录页面。通过使用 TailwindCSS 和 Next.js，我们将进一步提升我们的 CSS 技能，构建登录页面。
Complete NextAuth courseIn this project, we are going to implement the nextauth to our nextauth app. We will go through different provider like email provider, github provider, twitter provider, facebook provider and auth0 provider (which can login with microsoft, amazon, paypal, dropbox ,yahoo and yandex, etc.). In this example, we demonstrate how to login with microsoft account. We will also learn how to setup sendGrid so we can make a passwordless signin with email. Also, we will setup firebase adapter and mongodb adapter, so the users data will store in these database. At last, we will also deploy the app to the Vercel. Why Nextjs?All of the React components that make up a website's user-facing section are rendered on the server first. This means that after the HTML has been transmitted to the client (the user's browser), the user can read the material on the page without having to do anything further. The user perceives page loading speeds to be substantially faster as a result of this.SSR also provides an out-of-the-box, indexable and crawlable website, which is critical for Search Engine Optimization (SEO) because no client-side javascript is required to view the page content. Essentially, increased technical SEO benefits our clients.Why tailwindCSS?Tailwind CSS is a popular low-level CSS framework with a lot of customization options. Bootstrap is widely used as a comparison. They are, nevertheless, essentially different. Rather of delivering pre-designed components like Bootstrap, Tailwind provides building pieces that allow developers to quickly create designs.Why Daisy UI?Daisy UI enhances Tailwind with attractive component classes that are totally customisable and themeable. Daisy UI creates a scalable and designer-friendly design system.What we will coverUsing the react hook to check the user click on the inputbox or not, use the fontawesome, heroicon and daisy ui to help us create this beautiful ig login page. Take our css skill to next level by using the TailwindCSS and NextJS to build the login page.
