Complete Next.js Developer in 2023: Zero to Mastery | Udemy

Just released with all the latest Next.js features for 2023! Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked with Next.js both in Silicon Valley and Toronto. Ankita is also a regular speaker and lecturer at all the Next.js and React conferences.

Using the latest version of Next.js, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies for a reason.

We guarantee you this is the most comprehensive online resource on Next.js and React. This project based course will introduce you to all of the modern toolchain of a Next.js developer in 2023. Along the way, we will build a massive Netflix Clone application using React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel + more. This is going to be a full stack app unlike what you see in most “easy” tutorials online!

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional Next.js project all the way into production. We will start from the very beginning by teaching you Next.js fundamentals, and then going into advanced topics so you can make good decisions on architecture and tools on any of your future NextJS projects.

All code is going to be provided step by step, and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.

This is what the course will cover:

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
We will be building the first project right away. This 1st one mainly teaches 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 setup, etc…

3. Routing with Next.js | Coffee Connoisseur
You will learn everything about routing such as dynamic routes, index routes, named routes, 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
This is one of the most important section 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
Students 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 and 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 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 | Netflix with Next.js
This is a big one! You will start to set up for the final project. This section is about setting up our Netflix project.

13. Netflix Home Page and Video | Netflix with Next.js
You will build the home page and use server side rendering. You will learn how to server render content, and we will also invoke the YouTube API to get a list of videos and display on the home page. Card component is complex in Netflix so you will also learn some framer motion to build the card component.

14. Authentication with Magic | Netflix with Next.js
How does Auth works in Next.js? We will be using passwordless login in Next and build the login page with proper authentication and validation.

15. Incremental Static Regeneration | Netflix with Next.js
Display the videos on the home page 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 | 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 | 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 | Netflix with Next.js
You will setup Hasura for ratings service, create ratings API to like and dislike videos, and build the my list page to show a list of favourited YouTube videos.

19.  Deploying to Production | Netflix with Next.js
Create the final GitHub repo, setup 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 fully get the most out of this course.

————

We guarantee you this is the best course out there on Next.js.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in Next.js to someone that is in the top 10% of Next.js and React developers. We guarantee it.

See you inside the course!