Author: Andrei Neagoie and Ankita Kulkarni
Duration: 27h 26m+
Last Updated: 10/2021
Course Source: https://academy.zerotomastery.io/p/learn-next-js
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level React applications from scratch & get hired as a Next.js Developer in 2022.
Just released with all the latest Next.js features for 2022! We guarantee you this is the most comprehensive online course on Next.js and React. You will learn Next.js by building real-world projects (including a massive Netflix clone application) step-by-step alongside senior industry professionals.
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!
By enrolling today, you’ll also get to join our exclusive live online community classroom so that you'll be learning and designing alongside thousands of students, alumni, mentors, TAs, and Instructors.
Most importantly, you will be learning from industry professionals (Ankita and Andrei) that have actual real-world experience using Next.js as Senior Engineers working for top companies in both Silicon Valley and Toronto. Ankita is also a regular speaker and lecturer at major Next.js and React conferences.
The curriculum is very hands-on as we walk you from start to finish of releasing a professional Next.js project all the way into production.
We start from the very beginning by teaching you Next.js fundamentals. But we don't stop there, we'll then dive into advanced topics so that you can make good decisions on architecture and tools for any of your future NextJS projects.
All code is provided step-by-step so even if you don’t like to code along, you will get access to the full master project code (reminder... building Netflix!) to add to your portfolio.
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.
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 ????.
Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies. They are also working as top freelancers getting paid while working remotely around the world. This can be you.
And you have nothing to lose. You can start learning now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.
What you'll learn
• Build REAL enterprise-level NextJS applications and deploy to production
• Learn the latest features and tools in the NextJS ecosystem including: SWR (React Hooks), Hasura, Serverless Functions, Vercel, Framer Motion + more
• Using GraphQL as a NextJS Developer
• Set up authentication and user accounts (including password-less login!)
• Learn about SEO and how to use NextJS to have your applications rank on Google
• Learn to lead Next JS projects by making good architecture decisions and helping others on your team
• Learn to build reactive, performant, large-scale applications like a senior developer
• Learn different rendering techniques: static site generation, server side rendering, incremental static regeneration, hydration, etc.
• Become a top 10% NextJS Developer
• Use Airtable (which is exploding in popularity) to build full-stack applications
• Master the latest ecosystem of a NextJS Developer from scratch
Who is this Rust course for?
• Developers who want to learn and master NextJS
• Students who want to go beyond all of the "beginner" Next.js tutorials out there
• Programmers who want to learn one of the most in-demand skills of a web developer
• Developers that want to be in the top 10% of NextJS Developers
• Students who want to gain experience working on a large, scalable application
• Bootcamp or online tutorial graduates that want to go beyond the basics
• Students who want to learn from Senior Developers who are real-world industry experts, not just another online instructor that teaches off of documentation
Are there any prerequisites for this course?
• A computer (Windows, Mac, or Linux) with an internet connection
• You do not need any experience with React or any other JS framework. We even include introductory React lectures as an optional section!
• A willingness and enthusiasm to learn and take action
Meet your instructors
Hi! I'm Andrei.
Senior Software Developer turned Instructor, Founder of ZTM
Andrei is the instructor of some of the highest rated programming courses on the web. Some of his students (500,000+ in the past few years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM, Shopify and many more...
Hi! I'm Ankita.
Senior Engineering Manager & Instructor
Ankita is a Senior Engineering Manager with over 10 years of experience in Software Development. Her career began by helping small businesses develop apps and since then she has worked at top companies in North America...