Complete Next.js Developer
Authors: Ankita Kulkarni, Andrei Neagoie
Last updated:
November 2024
Subtitles:
English, Français, Deutsch, Español, العربية, Nederlands, Vlaams, हिन्दी, हिंदी, Bahasa indonesia, 日本語 (にほんご／にっぽんご), Português, Română
Audio:
English
Overview
Welcome to our Next.js course, where we prioritize effective learning. Say goodbye to outdated and confusing tutorials that waste your precious time!
We'll take you past the fundamentals, empowering you to create modern, enterprise-grade applications using the latest Next.js technologies.
And the best part? You’ll be learning in a vibrant community.
By signing up today, you’ll gain access to our exclusive live online community classroom, connecting you with thousands of fellow students, alumni, mentors, teaching assistants, and instructors.
Engaging. Dynamic. Supportive. Friendly. Inspiring. Essential.
These words capture how students feel about the ZTM Discord, one of the largest and most active developer communities on Discord.
Most importantly, you’ll be guided by industry veterans (Ankita and Andrei) who bring real-world experience as Senior Engineers from leading firms in Silicon Valley and Toronto. Additionally, Ankita is a regular speaker and lecturer at prestigious Next.js and React conferences.
This project-driven course will enlighten you about the modern Next.js developer toolset for 2024.
You’ll even create an extensive Netflix Clone app utilizing React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel, and more.
Unlike most online Next.js tutorials, this is a comprehensive full-stack application!
All coding is provided step-by-step, so even if you choose not to code alongside, you will receive access to the complete master project code (yes, you’ll be building Netflix!) to showcase in your portfolio.
Here’s what the course will entail to transform you from a novice to a Next.js expert
The curriculum is hands-on, guiding you from project conception to launching a professional Next.js application in production.
We’ll start with the basics by covering Next.js fundamentals.
But that's just the beginning; we will then delve into advanced topics to help you make informed architectural and tool choices for your future Next.js endeavors.
Here's a brief overview of the topics you'll cover:
1. Next.js Basics
We’ll explore the differences between Next.js and React, highlight the numerous benefits of Next.js, and explain the JAM Stack concept. This foundational section will set the stage for the entire course.
2. Your First Next.js Application | Coffee Connoisseur Project
You’ll create your first project instantly. This project aims to teach you Next.js essentials, focusing on setting up the project, CSS modules, fast refresh, and more.
3. Routing in Next.js | Coffee Connoisseur
You’ll learn about various routing aspects, including dynamic routes, index routes, named routes, and the link component.
4. Styling in Next.js | Coffee Connoisseur
This segment covers styling your apps with CSS modules, separating component styles, and applying global styles.
5. Hydration, SEO, and Rendering Techniques in Next.js
This critical portion discusses SEO essentials, how Next.js boosts SEO, and various rendering techniques such as static site generation, server-side rendering, incremental static regeneration, and client-side rendering.
6. Static Coffee Store Pages | Coffee Connoisseur
Learn the intricacies of static rendering and how to decide on what to statically render as you make API requests to Foursquare and implement SSG.
7. Locating Coffee Stores | Coffee Connoisseur
This section explores different fallbacks in static rendering, along with retrieving user locations and using the Context API.
8. Serverless Functions | Coffee Connoisseur
What are serverless functions, and when are they applicable? You’ll create serverless functions to fetch static coffee store information.
9. Storing Coffee Store Data with Airtable | Coffee Connoisseur
You’ll dive into database storage using Airtable, storing coffee store data and learning about client-side rendering.
10. SWR and Client-Side Rendering | Coffee Connoisseur
What is SWR, and when should you utilize it? You will use Next.js for SWR and client-side rendering in this part.
11. Deployment and Optimization | Coffee Connoisseur
Learn to deploy your app to Vercel and Netlify, discover different cloud providers, understand what Lighthouse is, and optimize your Next.js performance.
12. Project Setup | Netflix Clone with Next.js
Prepare for your major project! This section is about laying the groundwork for your Netflix clone.
13. Netflix Homepage and Video Display | Netflix Clone with Next.js
Build the Netflix homepage with server-side rendering, learning to invoke the YouTube API to fetch and display videos. You’ll also use Framer Motion for complex card designs.
14. Authentication with Magic | Netflix Clone with Next.js
Discover how authentication operates in Next.js by implementing passwordless login and creating a secure login page.
15. Incremental Static Regeneration | Netflix Clone with Next.js
Showcase videos on the homepage and use ISR to create a modal page, learning more about incremental static generation.
16. Exploring Hasura GraphQL | Netflix Clone with Next.js
Uncover GraphQL, Hasura, and their underlying architecture, setting up your project within the Hasura environment.
17. Hasura Authentication | Netflix Clone with Next.js
Learn about auth flow architecture and utilize server-side SDK for user login.
18. Ratings and Favorites Page | Netflix Clone with Next.js
Configure Hasura for a ratings service, develop a ratings API to like/dislike videos, and create a favorites list page.
19. Final Deployment | Netflix Clone with Next.js
Establish the final GitHub repository, configure it, and deploy to Vercel!
20. React Primer | Optional Section
A supplementary section for those needing a refresher on React.js and React Hooks to maximize your course experience.
Curious about the best part?
This course will continually evolve and adapt alongside the Next.js ecosystem.
As updates occur in the Next.js realm, expect our course to refresh with new lectures and resources.
This means you can revisit the course anytime to brush up on the latest Next.js best practices.
So, what’s the gist?
This course is not about simply coding along without grasping the core concepts, leading you to finish without knowing how to proceed other than by watching more tutorials… No way!
We aim to elevate you from a complete beginner to being among the top 10% of Next.js and React developers 💪.
How do we know this works?
Because numerous Zero To Mastery alumni have successfully landed roles at companies including Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, and Shopify.
Our graduates represent diverse backgrounds, ages, and experiences, with many starting from a place of complete inexperience.
So, why not you?
With nothing to lose, you can begin your learning journey today, and if you find the course doesn’t meet your expectations, we offer a hassle-free 100% refund within 30 days. No questions asked.
Structure
Structure:
Total sections: 21
Total lessons: 299
1. Section 1 - Introduction
8 lessons
2. Section 2 - Next.js Fundamentals (including React)
10 lessons
3. Section 3 - App Router - Project #1: Build Your First Next App
14 lessons
4. Section 4 - App Router - Server Components and Client Components
11 lessons
5. Section 5 - App Router - Routing with Next.js
12 lessons
6. Section 6 - App Router - SEO Hydration-Different Rendering Techniques
14 lessons
7. Section 7 - App Router - Static Coffee Stores
0 lessons
8. Section 8 - App Router - Dynamic Coffee Stores by Location
13 lessons
9. Section 9 - App Router - Server Actions and Serverless Functions
0 lessons
10. Section 10 - App Router - Deployment and Built Optimization
9 lessons
11. Section 11 - Pages Router - Project Setup | Netflix with Next.js
6 lessons
12. Section 12 - Pages Router - Netflix Home Page and Video
37 lessons
Authors
Price
Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
Access to our private Discord with 450,000+ members
Unlimited access to all courses, projects, and career paths
Unlimited access to all bootcamps, bytes, and projects, and career paths
Access to our private LinkedIn networking group with 100,000+ members
Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
Access to our private Discord with 450,000+ members
Unlimited access to all courses, projects, and career paths
Unlimited access to all bootcamps, bytes, and projects, and career paths
Access to our private LinkedIn networking group with 100,000+ members
Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
Access to our private Discord with 450,000+ members
Unlimited access to all courses, projects, and career paths
Unlimited access to all bootcamps, bytes, and projects, and career paths
Access to our private LinkedIn networking group with 100,000+ members
Frequently asked questions
Are there any prerequisites for this course?
Are there any prerequisites for this course?
- A device (Windows, Mac, or Linux) with internet access
- Foundational knowledge of HTML, CSS, and JavaScript (available for learning here)
- No prior experience with React or any JavaScript framework is necessary. We even offer optional introductory React lectures!
- A passion for learning and a proactive approach
Who is this course for?
Who is this course for?
- Developers eager to enhance their NextJS skills
- Students ready to advance beyond basic Next.js tutorials
- Programmers aiming to acquire one of the most sought-after skills in Web Development
- Developers aspiring to rank among the top 10% of NextJS Experts
- Students seeking hands-on experience with large, scalable applications
- Graduates from bootcamps or online tutorials looking to dive deeper than the fundamentals
- Students wanting to learn from Senior Developers who are true industry professionals, not just typical online instructors who rely on documentation
Do you provide a certificate of completion?
Do you provide a certificate of completion?
Absolutely! We provide elegant certificates. You’ll also have the opportunity to showcase Zero To Mastery Academy on your LinkedIn profile's education section as well.
Can I use the course projects in my portfolio?
Can I use the course projects in my portfolio?
Definitely! In our slightly biased opinion, you’d be missing out if you didn’t! Every project is downloadable and readily accessible as soon as you enroll.
A lot of our learners have shared that the projects they created while taking our courses helped them secure interviews, and because they built them independently, they felt prepared to discuss their work confidently during job interviews.
And you know what that could lead to? A job offer!
Are there subtitles?
Are there subtitles?
Yes, indeed! We offer high-quality subtitles in 11 languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.
You can even personalize the subtitle text size, color, background, and more to make them just right for you!
Still have more questions about the Academy?
Still have more questions about the Academy?
If you have further questions about the Academy membership, don’t worry! We address additional queries here.
Guaranty
Guaranty period is 30 days, beginning from the purchase day.
Complete Next.js Developer
