Year of issue : 2021
Manufacturer : Zerotomastery
Manufacturer website : https://www.udemy.com/course/complete-nextjs-developer-zero-to-mastery/
Author : Andrei Neagoie, Ankita Kulkarni
Duration : ~36h
Shared Material Type : Video Clips
Language : English
Описание : Using the latest version of Next.js, this course is focused on efficiency. You never have to spend time on confusing, out-of-date, incomplete tutorials anymore. We also push you beyond the basics so that you can build modern, enterprise-level apps.
This project-based course will introduce you to the modern toolchain of a Next.js developer in 2022. Along the way, you will build a massive Netflix Clone application using React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel + more. This is a full-stack app unlike what you will find in most Next.js tutorials online!
Here’s what this Next.js course covers:
1. Next.js Fundamentals
Comparing Next.js with React, and learning about the benefits that Next.js offers. You will understand why Next.js has gained so much popularity and what JAM Stack is all about. This section will build the foundation you need for the rest of the course.
2. Build your first Next.js app | Coffee Connoisseur Project
You will be building your first project right away. The goal of this project is to teach you the fundamentals of Next.js. This section focuses on setting up the project, teaching fundamentals such as CSS modules, fast refresh, how the project is set up, etc.
3. Routing with Next.js | Coffee Connoisseur
You will learn everything about routing such as dynamic routes, index routes, named routes, and link component.
4. Styling in Next.js | Coffee Connoisseur
This section will teach you how to style your applications using css modules, separate components styles, and global styles.
5. Hydration, SEO and Different Rendering Techniques in Next.js
One of the most important sections of the course. The section will teach you about what SEO is, how Next.js helps with SEO, what the different rendering techniques are such as: static site generation, server-side rendering, incremental static regeneration (and how they are different), client-side rendering, and what is hydration.
6. Static Coffee Store Pages | Coffee Connoisseur
You will learn about static rendering in detail and how to choose what to statically render. You will make API requests to Foursquare and rendering those using SSG.
7. Coffee stores by Location | Coffee Connoisseur
Next.js allows you to use different fallbacks when you choose to statically render. This section will talk about that in-depth. You will also learn how to retrieve users location and use the Context API.
8. Serverless functions | Coffee Connoisseur
What are serverless functions? Why do we use them and when? You will be creating serverless functions for retrieving static coffee stores.
9. Store Coffee Store Data using Airtable | Coffee Connoisseur
You will learn about database storage using Airtable. We will be storing the coffee store data in Airtable and will learn client-side rendering here.
10. SWR with Client Side Rendering | Coffee Connoisseur
What is SWR? When to use it? We will be using the Next.js library for SWR, and using SWR and client-side rendering in this section.
11. Deployment and Build Optimization | Coffee Connoisseur
Deploy your app to Vercel as well as Netlify. You will learn what the different cloud providers are and how Vercel is different, what is Lighthouse, and how to improve our performance in Next.js.
12. Project Setup | Building Netflix with Next.js Project
This is a big one! You will start to set up for the major project. This section is about setting up our Netflix project.
13. Netflix Home Page and Video | Building Netflix with Next.js
You will build the homepage and use server-side rendering. You will learn how to server render content and how to invoke the YouTube API to get a list of videos and display them on the homepage. The card component is complex in Netflix so you will also learn some framer motion to build the card component.
14. Authentication with Magic | Building Netflix with Next.js
How does Auth work in Next.js? We will be using passwordless login in Next and building the login page with proper authentication and validation.
15. Incremental Static Regeneration | Building Netflix with Next.js
Display the videos on the homepage and use ISR to build the modal as a page. You will learn more about incremental static generation to build this modal.
16. Hasura GraphQL | Building Netflix with Next.js
You will learn what is GraphQL, Hasura, and how Hasura architecture looks like. We will be setting up the project with the Hasura environment.
17. Authentication with Hasura | Building Netflix with Next.js
You will learn how auth flow architecture works and introduce server side SDK to log the user in.
18. Ratings Service and Favourited Videos Page | Building Netflix with Next.js
You will setup Hasura for ratings service, create a ratings API to like and dislike videos, and build the my list page to show a list of favorited videos.
19. Deploying to Production | Netflix with Next.js
Create the final GitHub repo, set-up the repo, and finally deploy to Vercel!
20. Appendix: Introduction to React
An optional section for those that need a primer on React.js and React Hooks to get you ready to get the most out of this course.
Comparing Next.js with React, and learning about the benefits that Next.js offers. You will understand why Next.js has gained so much popularity and what JAM Stack is all about. This section will build the foundation you need for the rest of the course.
2. Build your first Next.js app | Coffee Connoisseur Project
You will be building your first project right away. The goal of this project is to teach you the fundamentals of Next.js. This section focuses on setting up the project, teaching fundamentals such as CSS modules, fast refresh, how the project is set up, etc.
3. Routing with Next.js | Coffee Connoisseur
You will learn everything about routing such as dynamic routes, index routes, named routes, and link component.
4. Styling in Next.js | Coffee Connoisseur
This section will teach you how to style your applications using css modules, separate components styles, and global styles.
5. Hydration, SEO and Different Rendering Techniques in Next.js
One of the most important sections of the course. The section will teach you about what SEO is, how Next.js helps with SEO, what the different rendering techniques are such as: static site generation, server-side rendering, incremental static regeneration (and how they are different), client-side rendering, and what is hydration.
6. Static Coffee Store Pages | Coffee Connoisseur
You will learn about static rendering in detail and how to choose what to statically render. You will make API requests to Foursquare and rendering those using SSG.
7. Coffee stores by Location | Coffee Connoisseur
Next.js allows you to use different fallbacks when you choose to statically render. This section will talk about that in-depth. You will also learn how to retrieve users location and use the Context API.
8. Serverless functions | Coffee Connoisseur
What are serverless functions? Why do we use them and when? You will be creating serverless functions for retrieving static coffee stores.
9. Store Coffee Store Data using Airtable | Coffee Connoisseur
You will learn about database storage using Airtable. We will be storing the coffee store data in Airtable and will learn client-side rendering here.
10. SWR with Client Side Rendering | Coffee Connoisseur
What is SWR? When to use it? We will be using the Next.js library for SWR, and using SWR and client-side rendering in this section.
11. Deployment and Build Optimization | Coffee Connoisseur
Deploy your app to Vercel as well as Netlify. You will learn what the different cloud providers are and how Vercel is different, what is Lighthouse, and how to improve our performance in Next.js.
12. Project Setup | Building Netflix with Next.js Project
This is a big one! You will start to set up for the major project. This section is about setting up our Netflix project.
13. Netflix Home Page and Video | Building Netflix with Next.js
You will build the homepage and use server-side rendering. You will learn how to server render content and how to invoke the YouTube API to get a list of videos and display them on the homepage. The card component is complex in Netflix so you will also learn some framer motion to build the card component.
14. Authentication with Magic | Building Netflix with Next.js
How does Auth work in Next.js? We will be using passwordless login in Next and building the login page with proper authentication and validation.
15. Incremental Static Regeneration | Building Netflix with Next.js
Display the videos on the homepage and use ISR to build the modal as a page. You will learn more about incremental static generation to build this modal.
16. Hasura GraphQL | Building Netflix with Next.js
You will learn what is GraphQL, Hasura, and how Hasura architecture looks like. We will be setting up the project with the Hasura environment.
17. Authentication with Hasura | Building Netflix with Next.js
You will learn how auth flow architecture works and introduce server side SDK to log the user in.
18. Ratings Service and Favourited Videos Page | Building Netflix with Next.js
You will setup Hasura for ratings service, create a ratings API to like and dislike videos, and build the my list page to show a list of favorited videos.
19. Deploying to Production | Netflix with Next.js
Create the final GitHub repo, set-up the repo, and finally deploy to Vercel!
20. Appendix: Introduction to React
An optional section for those that need a primer on React.js and React Hooks to get you ready to get the most out of this course.
