Next.js & React - The Complete Guide (incl. Two Paths!)
- Descripción
- Currículum
- Reseñas
Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!
This course comes with two paths which you can take: The “complete” path (full >20h course) and the “summary” path (~3h summary module) – you can choose the path that best fits your time requirements!
—
I created the bestselling Udemy course on React, now I’m super excited to share this course on NextJS with you – an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!
Next.js is the production-ready, fullstack-capable framework for ReactJS – the most popular JavaScript library you can learn these days!
Too many buzzwords for your taste?
Fair enough – but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!
Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!
In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It’s a breeze with NextJS!
Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.
This course will take you from NextJS beginner to advanced level in no time!
We’ll start at the very basics, no NextJS knowledge is required at all, and we’ll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.
For this course, you’ll need basic React knowledge, though the course does come with a “React refresher” module in case it’s been some time since you last worked with React.
This course also includes a “NextJS Summary” module which allows you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take that summary module (and skip the rest for now) to learn about all the core features in as little time as possible.
After finishing this course, you’ll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!
In detail, this course will cover:
-
What is NextJS? And why would you use it?
-
Why is just React (in many cases) not enough?
-
Creating NextJS projects from the ground up & understanding these projects
-
Working with file-based routing
-
Adding dynamic routes and catch-all routes
-
Implementing different forms of page pre-rendering and server-side rendering
-
Working with data and adding data fetching + pre-fetching to your apps
-
Pre-generating dynamic and static pages
-
Adding optimizations like metadata to pages
-
Optimizing images with the NextJS Image component
-
Building fullstack apps with API routes
-
Managing app-wide state with React context (in NextJS apps)
-
Adding authentication to NextJS apps
-
Multiple complete apps where we’ll apply all these core concepts!
-
A complete React.js refresher module (so that we’re all on the same page)
-
A NextJS summary module so that you can refresh what you learned or just explore the core features quickly
-
And much more!
I can’t wait to start this journey together with you! 🙂
-
1Welcome to the Course!Video lesson
-
2What Is Next.js? And Why Would You Use It?Video lesson
-
3Key Feature: Server-side Page (Pre-)RenderingVideo lesson
-
4Key Feature: File-based RoutingVideo lesson
-
5Key Feature: Build Fullstack React Apps!Video lesson
-
6Join Our Learning Community!Text lesson
-
7Creating a NextJS Project & Setting Up Our IDEVideo lesson
-
8About the "App Router"Video lesson
-
9Analyzing The Created ProjectVideo lesson
-
10A First Demo: NextJS In Action!Video lesson
-
11About This Course & Course OutlineVideo lesson
-
12Taking This Course: Your Two OptionsVideo lesson
-
13How To Get The Most Out Of This CourseVideo lesson
-
14Downloading Course CodeText lesson
-
15Course Resources & Dependency VersionsText lesson
-
16Module ResourcesText lesson
-
17Module IntroductionVideo lesson
-
18What is ReactJS?Video lesson
-
19Why ReactJS & A First DemoVideo lesson
-
20Building Single-Page Applications (SPAs)Video lesson
-
21React AlternativesVideo lesson
-
22Creating a New React ProjectVideo lesson
-
23Setting Up A Code EditorVideo lesson
-
24React 18Text lesson
-
25Diving Into The Created ProjectVideo lesson
-
26How React Works & Understanding ComponentsVideo lesson
-
27More Component Work & Styling With CSS ClassesVideo lesson
-
28Building & Re-using ComponentsVideo lesson
-
29Passing Data With Props & Dynamic ContentVideo lesson
-
30Handling EventsVideo lesson
-
31Adding More ComponentsVideo lesson
-
32Introducing StateVideo lesson
-
33Working with "Event Props"Video lesson
-
34Use The Right React Router VersionText lesson
-
35Adding RoutingVideo lesson
-
36Adding Links & NavigationVideo lesson
-
37Scoping Component Styles With CSS ModulesVideo lesson
-
38Outputting Lists Of Data & ComponentsVideo lesson
-
39Adding Even More ComponentsVideo lesson
-
40Creating "Wrapper" ComponentsVideo lesson
-
41Working With FormsVideo lesson
-
42Getting User Input & Handling Form SubmissionVideo lesson
-
43Preparing The App For Http Requests & Adding a BackendVideo lesson
-
44Sending a POST Http RequestVideo lesson
-
45Navigating ProgrammaticallyVideo lesson
-
46Getting Started with Fetching DataVideo lesson
-
47Using the "useEffect" HookVideo lesson
-
48Introducing React ContextVideo lesson
-
49Updating State Based On Previous StateVideo lesson
-
50Using Context In ComponentsVideo lesson
-
51More Context UsageVideo lesson
-
52Module SummaryVideo lesson
-
53Module ResourcesText lesson
-
54Module IntroductionVideo lesson
-
55Our Starting SetupVideo lesson
-
56What Is "File-based Routing"? And Why Is It Helpful?Video lesson
-
57Adding A First PageVideo lesson
-
58Adding a Named / Static Route FileVideo lesson
-
59Working with Nested Paths & RoutesVideo lesson
-
60Adding Dynamic Paths & RoutesVideo lesson
-
61Extracting Dynamic Path Segment Data (Dynamic Routes)Video lesson
-
62Building Nested Dynamic Routes & PathsVideo lesson
-
63Adding Catch-All RoutesVideo lesson
-
64Navigating with the "Link" ComponentVideo lesson
-
65Navigating To Dynamic RoutesVideo lesson
-
66A Different Way Of Setting Link HrefsVideo lesson
-
67Navigating ProgrammaticallyVideo lesson
-
68Adding a Custom 404 PageVideo lesson
-
69Module SummaryVideo lesson
-
70Module ResourcesText lesson
-
71Module IntroductionVideo lesson
-
72Planning The ProjectVideo lesson
-
73Setting Up The Main PagesVideo lesson
-
74Adding Dummy Data & Static FilesVideo lesson
-
75Adding Regular React ComponentsVideo lesson
-
76Adding More React Components & Connecting ComponentsVideo lesson
-
77Styling Components In Next.js ProjectsVideo lesson
-
78<Link> & NextJS 13Text lesson
-
79Adding Buttons & IconsVideo lesson
-
80Adding the "Event Detail" Page (Dynamic Route)Video lesson
-
81Adding a General Layout Wrapper ComponentVideo lesson
-
82Working on the "All Events" PageVideo lesson
-
83Adding a Filter Form for Filtering EventsVideo lesson
-
84Navigating to the "Filtered Events" Page ProgammaticallyVideo lesson
-
85Extracting Data on the Catch-All PageVideo lesson
-
86Final StepsVideo lesson
-
87Module SummaryVideo lesson
-
88Module ResourcesText lesson
