English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 24h 58m | 10.0 GB
Learn NextJS from the ground up and build production-ready, fullstack ReactJS apps with the NextJS framework!
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!
What you’ll learn
- Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing and authentication
- Learn how to build client-side and fullstack ReactJS apps with NextJS
- Build real projects and apply what you learned with hands-on projects and examples
- Take the full course or the “NextJS Summary” module for a quickstart if you have limited time
Table of Contents
Getting Started
1 Welcome to the Course!
2 What Is Next.js And Why Would You Use It
3 Key Feature Server-side Page (Pre-)Rendering
4 Key Feature File-based Routing
5 Key Feature Build Fullstack React Apps!
6 Join Our Learning Community!
7 Creating a NextJS Project & Setting Up Our IDE
8 Analyzing The Created Project
9 A First Demo NextJS In Action!
10 About This Course & Course Outline
11 Taking This Course Your Two Options
12 How To Get The Most Out Of This Course
13 Module Resources
Optional React Refresher
14 Module Introduction
15 What is ReactJS
16 Why ReactJS & A First Demo
17 Building Single-Page Applications (SPAs)
18 React Alternatives
19 Creating a New React Project
20 Setting Up A Code Editor
21 Diving Into The Created Project
22 How React Works & Understanding Components
23 More Component Work & Styling With CSS Classes
24 Building & Re-using Components
25 Passing Data With Props & Dynamic Content
26 Handling Events
27 Adding More Components
28 Introducing State
29 Working with Event Props
30 Adding Routing
31 Adding Links & Navigation
32 Scoping Component Styles With CSS Modules
33 Outputting Lists Of Data & Components
34 Adding Even More Components
35 Creating Wrapper Components
36 Working With Forms
37 Getting User Input & Handling Form Submission
38 Preparing The App For Http Requests & Adding a Backend
39 Sending a POST Http Request
40 Navigating Programmatically
41 Getting Started with Fetching Data
42 Using the useEffect Hook
43 Introducing React Context
44 Updating State Based On Previous State
45 Using Context In Components
46 More Context Usage
47 Module Summary
48 Module Resources
Pages & File-based Routing
49 Module Introduction
50 Our Starting Setup
51 What Is File-based Routing And Why Is It Helpful
52 Adding A First Page
53 Adding a Named Static Route File
54 Working with Nested Paths & Routes
55 Adding Dynamic Paths & Routes
56 Extracting Dynamic Path Segment Data (Dynamic Routes)
57 Building Nested Dynamic Routes & Paths
58 Adding Catch-All Routes
59 Navigating with the Link Component
60 Navigating To Dynamic Routes
61 A Different Way Of Setting Link Hrefs
62 Navigating Programmatically
63 Adding a Custom 404 Page
64 Module Summary
65 Module Resources
Project Time Working with File-based Routing
66 Module Introduction
67 Planning The Project
68 Setting Up The Main Pages
69 Adding Dummy Data & Static Files
70 Adding Regular React Components
71 Adding More React Components & Connecting Components
72 Styling Components In Next.js Projects
73 Adding Buttons & Icons
74 Adding the Event Detail Page (Dynamic Route)
75 Adding a General Layout Wrapper Component
76 Working on the All Events Page
77 Adding a Filter Form for Filtering Events
78 Navigating to the Filtered Events Page Progammatically
79 Extracting Data on the Catch-All Page
80 Final Steps
81 Module Summary
82 Module Resources
Page Pre-Rendering & Data Fetching
83 Module Introduction
84 The Problem With Traditional React Apps (and Data Fetching)
85 How NextJS Prepares & Pre-renders Pages
86 Introducing Static Generation with getStaticProps
87 NextJS Pre-renders By Default!
88 Adding getStaticProps To Pages
89 Running Server-side Code & Using the Filesystem
90 A Look Behind The Scenes
91 Utilizing Incremental Static Generation (ISR)
92 ISR A Look Behind The Scenes
93 A Closer Look At getStaticProps & Configuration Options
94 Working With Dynamic Parameters
95 Introducing getStaticPaths For Dynamic Pages
96 Using getStaticPaths
97 getStaticPaths & Link Prefetching Behind The Scenes
98 Working With Fallback Pages
99 Loading Paths Dynamically
100 Fallback Pages & Not Found Pages
101 Introducing getServerSideProps for Server-side Rendering (SSR)
102 Using getServerSideProps for Server-side Rendering
103 getServerSideProps and its Context
104 Dynamic Pages & getServerSideProps
105 getServerSideProps Behind The Scenes
106 Introducing Client-Side Data Fetching (And When To Use It)
107 Implementing Client-Side Data Fetching
108 Using the useSWR NextJS Hook
109 Combining Pre-Fetching With Client-Side Fetching
110 Module Summary
111 Module Resources
Project Time Page Pre-rendering & Data Fetching
112 Module Introduction
113 Preparations
114 Adding Static Site Generation (SSG) On The Home Page
115 Loading Data & Paths For Dynamic Pages
116 Optimizing Data Fetching
117 Working on the All Events Page
118 Using Server-side Rendering (SSR)
119 Adding Client-Side Data Fetching
120 Module Summary
121 Module Resources
Optimizing NextJS Apps
122 Module Summary
123 Analyzing the Need for head Metadata
124 Configuring the head Content
125 Adding Dynamic head Content
126 Reusing Logic Inside A Component
127 Working with the app.js File (and Why)
128 Merging head Content
129 The document.js File (And What It Does)
130 A Closer Look At Our Images
131 Optimizing Images with the Next Image Component & Feature
132 Taking A Look At The Next Image Documentation
133 Module Summary
134 Module Resources
Adding Backend Code with API Routes (Fullstack React)
135 Module Introduction
136 What are API Routes
137 Writing Our First API Route
138 Preparing the Frontend Form
139 Parsing The Incoming Request & Executing Server-side Code
140 Sending Requests To API Routes
141 Using API Routes To Get Data
142 Using API Routes For Pre-Rendering Pages
143 Creating & Using Dynamic API Routes
144 Exploring Different Ways Of Structuring API Route Files
145 Module Summary
146 Module Resources
Project Time API Routes
147 Module Introduction
148 Starting Setup & A Challenge For You!
149 Adding a Newsletter Route
150 Adding Comments API Routes
151 Connecting the Frontend To the Comments API Routes
152 Setting Up A MongoDB Database
153 Running MongoDB Queries From Inside API Routes
154 Inserting Comments Into The Database
155 Getting Data From The Database
156 Improvement Getting Comments For A Specific Event
157 Adding Error Handling
158 More Error Handling
159 Module Summary
160 Module Resources
Working with App-wide State (React Context)
161 Module Introduction
162 Our Target State & Starting Project
163 Creating a New React Context
164 Adding Context State
165 Using Context Data In Components
166 Example Triggering & Showing Notifications
167 Example Removing Notifications (Automatically)
168 Challenge Solution
169 Module Summary
170 Module Resources
Complete App Example Build a Full Blog A to Z
171 Module Introduction
172 Setting Up The Core Pages
173 Getting Started With The Home Page
174 Adding The Hero Component
175 Adding Layout & Navigation
176 Time To Add Styling & A Logo
177 Starting Work On The Featured Posts Part
178 Adding A Post Grid & Post Items
179 Rendering Dummy Post Data
180 Adding the All Posts Page
181 Working On The Post Detail Page
182 Rendering Markdown As JSX
183 Adding Markdown Files As A Data Source
184 Adding Functions To Read & Fetch Data From Markdown Files
185 Using Markdown Data For Rendering Posts
186 Rendering Dynamic Post Pages & Paths
187 Rendering Images With The Next Image Component (From Markdown)
188 Rendering Code Snippets From Markdown
189 Preparing The Contact Form
190 Adding The Contact API Route
191 Sending Data From The Client To The API Route
192 Storing Messages With MongoDB In A Database
193 Adding UI Feedback With Notifications
194 Adding head Data
195 Adding A document.js File
196 Using React Portals
197 Module Summary
198 Module Resources
Deploying NextJS Apps
199 Module Introduction
200 Building NextJS Apps Your Options
201 Key Deployment Steps
202 Checking & Optimizing Our Code
203 The NextJS Config File & Working With Environment Variables
204 Running a Test Build & Reducing Code Size
205 A Full Deployment Example (To Vercel)
206 A Note On Github & Secret Credentials
207 Using the export Feature
208 Module Summary
209 Module Resources
Adding Authentication
210 Module Introduction
211 Our Starting Project
212 How Does Authentication Work (In React & NextJS Apps)
213 Using The next-auth Library
214 Adding A User Signup API Route
215 Sending Signup Requests From The Frontend
216 Improving Signup With Unique Email Addresses
217 Adding the Credentials Auth Provider & User Login Logic
218 Sending a Signin Request From The Frontend
219 Managing Active Session (On The Frontend)
220 Adding User Logout
221 Adding Client-Side Page Guards (Route Protection)
222 Adding Server-Side Page Guards (And When To Use Which Approach)
223 Protecting the Auth Page
224 Using the next-auth Session Provider Component
225 Analyzing Further Authentication Requirements
226 Protecting API Routes
227 Adding the Change Password Logic
228 Sending a Change Password Request From The Frontend
229 Module Summary & Final Steps
230 Module Resources
Optional NextJS Summary
231 Module Introduction
232 What is NextJS
233 Key Feature Server-side (Pre-) Rendering of Pages
234 Key Feature File-based Routing
235 Key Feature Build Fullstack Apps With Ease
236 Creating a NextJS Project & IDE Setup
237 Analyzing the Created Project
238 Adding First Pages To The Project
239 Adding Nested Pages Paths
240 Creating Dynamic Pages
241 Extracting Dynamic Route Data
242 Linking Between Pages
243 Onwards To A Bigger Project!
244 Preparing Our Project Pages
245 Rendering A List Of (Dummy) Meetups
246 Adding A Form For Adding Meetups
247 The app.js File & Wrapper Components
248 Programmatic Navigation
249 Adding Custom Components & Styling With CSS Modules
250 How NextJS Page Pre-Rendering Actually Works
251 Introducing Data Fetching For Page Generation (getStaticProps)
252 More Static Site Generation (SSG) With getStaticProps
253 Exploring getServerSideProps
254 Working With Dynamic Path Params In getStaticProps
255 Dynamic Pages & getStaticProps & getStaticPaths
256 Introducing API Routes
257 Connecting & Querying a MongoDB Database
258 Sending HTTP Requests To API Routes
259 Getting Data From The Database (For Page Pre-Rendering)
260 Getting Meetup Detail Data & Paths
261 Adding head Metadata To Pages
262 Deploying NextJS Projects
263 Working With Fallback Pages & Re-Deploying
264 Module Summary
265 Module Resources
Course Roundup
266 Course Roundup
267 Bonus!
Resolve the captcha to access the links!