Next.js 14 & React - The Complete Guide

Name: Next.js 14 & React - The Complete Guide
Price: 12.75 USD
Availability: InStock
Rating: 5 (1 reviews)

36h 13m 15s

English

Paid

April 23, 2024

I created the bestselling Udemy course on React, and now I'm excited to share this comprehensive course on Next.js with you. This in-depth guide covers an amazing React framework that allows you to advance as a React developer and build production-ready projects with Next.js and React. Next.js is a fullstack-capable, production-ready framework for ReactJS, one of today's most popular JavaScript libraries!

Why Choose Next.js?

Feeling overwhelmed by buzzwords? That's understandable, but Next.js truly is a great choice for advancing your React developer skills and enhancing your React applications!

Next.js is rapidly growing and in high demand. It offers built-in server-side rendering and page pre-rendering, making it easier than ever to create user-friendly and SEO-optimized React apps.

Additionally, it simplifies building fullstack React apps by combining frontend and backend code in one project. You can seamlessly integrate client-side and server-side code and build a Node.js-based API right alongside your frontend React apps. Next.js makes this process straightforward!

Need authentication? Next.js streamlines user signup, sign-in, and session management, adding another layer of convenience.

Course Overview

This course will take you from a Next.js beginner to an advanced level rapidly!

We'll start with the basics, so no prior Next.js knowledge is needed. We'll then delve into all core features through multiple real projects that apply concepts step by step. A basic understanding of React is required, but the course includes a "React refresher" module if you're a bit rusty.

You'll also receive a "Next.js Summary" module, allowing you to revisit core concepts without going through the entire course again. It’s perfect for a quick overview of Next.js's main features.

After completing this course, you will be well-equipped to build your own Next.js projects from scratch and be ready to pursue opportunities for Next.js roles!

Course Content

This course covers:

Understanding Next.js and its advantages
Why React alone may not suffice in some cases
Starting from scratch to create and understand Next.js projects
File-based routing and dynamic routes
Page pre-rendering and server-side rendering
Fetching data to enhance your applications
Pre-generating dynamic and static pages
Optimizing pages with metadata
Using the Next.js Image component for image optimization
Developing fullstack applications with API routes
State management using React context within Next.js apps
Implementing authentication in Next.js apps
Creating multiple complete apps to reinforce core concepts
In-depth React.js refresher module
A go-to Next.js summary module for quick learning
...and much more!

Additional

NextJS Essentials: https://github.com/mschwarzmueller/nextjs-complete-guide-course-resources
Rest of the Course: https://github.com/mschwarzmueller/nextjs-course-code

About the Authors

Academind Pro

Academind offers the most comprehensive and up-to-date learning resources on Web Development. From the very basics up to advanced topics and real projects - we got you covered! And we'll give you course completion certificates to prove your progress to others!

udemy

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 383 lessons

0:00

#1: Welcome To The Course!

All Course Lessons (383)

#	Lesson Title	Duration
1	Welcome To The Course! Demo	01:21
2	What Is NextJS? Why Would You Use It?	02:21
3	Key Features & Benefits Of NextJS	02:41
4	Creating a First NextJS App	04:26
5	NextJS vs "Just React" - Analyzing The NextJS Project	02:31
6	Editing The First App	02:22
7	Pages Router vs App Router - One Framework, Two Approaches	02:30
8	How To Get The Most Out Of This Course	03:06
9	Module Introduction	01:09
10	What Is React & Why Would You Use It?	05:38
11	React Projects - Requirements	02:10
12	Creating React Projects	03:28
13	Our Starting Project	03:29
14	Understanding How React Works	07:47
15	Building A First Custom Component	11:16
16	Outputting Dynamic Values	05:04
17	Reusing Components	06:01
18	Passing Data to Components with Props	06:16
19	CSS Styling & CSS Modules	10:08
20	Exercise & Another Component	06:32
21	Preparing the App For State Management	03:47
22	Adding Event Listeners	07:53
23	Working with State	10:01
24	Lifting State Up	09:09
25	The Special "children" Prop	07:22
26	State & Conditional Content	09:00
27	Adding a Shared Header & More State Management	07:52
28	Adding Form Buttons	03:35
29	Handling Form Submission	06:19
30	Updating State Based On Previous State	05:31
31	Outputting List Data	06:40
32	Adding a Backend to the React SPA	06:11
33	Sending a POST HTTP Request	04:13
34	Handling Side Effects with useEffect()	09:07
35	Handle Loading State	04:24
36	Understanding & Adding Routing	03:56
37	Adding Routes	05:37
38	Working with Layout Routes	04:09
39	Refactoring Route Components & More Nesting	05:36
40	Linking & Navigating	08:10
41	Data Fetching via loader()s	09:08
42	Submitting Data with action()s	11:09
43	Dynamic Routes	08:42
44	Module Summary	01:26
45	Module Introduction	01:21
46	Starting Setup	02:33
47	Understanding File-based Routing & React Server Components	02:46
48	Adding Another Route via the File System	03:07
49	Navigating Between Pages - Wrong & Right Solution	04:13
50	Working with Pages & Layouts	03:23
51	Reserved File Names, Custom Components & How To Organize A NextJS Project	06:32
52	Configuring Dynamic Routes & Using Route Parameters	06:18
53	Onwards to the Main Project: The Foodies App	01:25
54	Exercise: Your Task	02:04
55	Exercise: Solution	08:20
56	Revisiting The Concept Of Layouts	03:51
57	Adding a Custom Component To A Layout	05:59
58	Styling NextJS Project: Your Options & Using CSS Modules	06:01
59	Optimizing Images with the NextJS Image Component	04:58
60	Using More Custom Components	03:49
61	Populating The Starting Page Content	04:19
62	Preparing an Image Slideshow	03:26
63	React Server Components vs Client Components - When To Use What	08:16
64	Using Client Components Efficiently	11:08
65	Outputting Meals Data & Images With Unknown Dimensions	10:32
66	Setting Up A SQLite Database	03:12
67	Fetching Data By Leveraging NextJS & Fullstack Capabilities	07:18
68	Adding A Loading Page	04:01
69	Using Suspense & Streamed Responses For Granular Loading State Management	05:55
70	Handling Errors	05:23
71	Handling "Not Found" States	01:58
72	Loading & Rendering Meal Details via Dynamic Routes & Route Parameters	11:05
73	Throwing Not Found Errors For Individual Meals	02:04
74	Getting Started with the "Share Meal" Form	01:54
75	Adding an Image Preview to the Picker	06:01
76	Getting Started with a Custom Image Picker Input Component	08:29
77	Introducing & Using Server Actions for Handling Form Submissions	09:03
78	Storing Server Actions in Separate Files	03:46
79	Creating a Slug & Sanitizing User Input for XSS Protection	03:21
80	Storing Uploaded Images & Storing Data in the Database	12:57
81	Managing the Form Submission Status with useFormStatus	05:31
82	Adding Server-Side Input Validation	05:55
83	Working with Server Action Responses & useFormState	08:06
84	Building For Production & Understanding NextJS Caching	06:07
85	Triggering Cache Revalidations	03:58
86	Don't Store Files Locally On The Filesystem!	02:14
87	Adding Static Metadata	03:48
88	Adding Dynamic Metadata	02:21
89	Module Summary	04:26
90	Module Introduction	01:38
91	Project Setup, Overview & An Exercise!	04:18
92	Exercise Solution - Part 1	07:18
93	Exercise Solution - Part 2	04:57
94	App Styling & Using Dummy Data	09:00
95	Handling "Not Found" Errors & Showing "Not Found" Pages	04:40
96	Setting Up & Using Parallel Routes	06:41
97	Working with Parallel Routes & Nested Routes	12:51
98	Configuring Catch-All Routes	06:02
99	Catch-All Fallback Routes & Dealing With Multiple Path Segments	09:22
100	Throwing (Route-related) Errors	03:39
101	Handling Errors With Error Pages	03:03
102	Server vs Client Components	10:11
103	Nested Routes Inside Dynamic Routes	04:57
104	Intercepting Navigation & Using Interception Routes	05:12
105	Combining Parallel & Intercepting Routes	07:43
106	Navigating Programmatically	02:43
107	Using & Understanding Route Groups	06:40
108	Building APIs with Route Handlers	05:16
109	Using Middleware	05:41
110	Module Summary	00:31
111	Module Introduction	00:57
112	Adding a Backend	02:47
113	Option 1: Client-side Data Fetching	08:51
114	Option 2: Server-side Data Fetching	05:37
115	Why Use A Separate Backend? Fetching Directly From The Source!	06:15
116	Showing a "Loading" Fallback	04:51
117	Migrating An Entire Application To A Local Data Source (Database)	13:20
118	Granular Data Fetching With Suspense	11:36
119	Module Introduction	01:12
120	Starting Project & Analyzing Mutation Options	05:47
121	Setting Up A Form Action	09:20
122	Creating a Server Action	04:17
123	Storing Data in Databases	04:40
124	Providing User Feedback with The useFormStatus Hook	06:05
125	Validating User Input With Help Of The useFormState Hook	09:58
126	Adjusting Server Actions for useFormState	07:41
127	Storing Server Actions In Separate Files	03:58
128	Uploading & Storing Images	08:14
129	Alternative Ways of Using, Configuring & Triggering Server Actions	11:01
130	Revalidating Data To Avoid Caching Problems	04:46
131	Performing Optimistic Updates With NextJS	11:43
132	Caching Differences: Development vs Production	06:14
133	Module Introduction	01:10
134	Making Sense of NextJS' Caching Types	05:14
135	Project Setup	01:46
136	Handling Request Memoization	05:32
137	Understanding The Data Cache & Cache Settings	05:50
138	Controlling Data Caching	05:28
139	Making Sense Of The Full Route Cache	04:43
140	On-Demand Cache Invalidation with revalidatePath & revalidateTag	06:04
141	Setting Up Request Memoization For Custom Data Sources	07:16
142	Setting Up Data Caching For Custom Data Sources	03:45
143	Invalidating Custom Data Source Data	03:33
144	Module Summary	01:45
145	Module Introduction	03:09
146	Using the NextJS Image Component	03:44
147	Understanding the NextJS Image Component	05:16
148	Controlling the Image Size	04:46
149	Working with Priority Images & More Settings	03:04
150	Loading Unknown Images	04:13
151	Configuring CSS For Images With The "fill" Prop	03:04
152	Using An Image Loader & Cloudinary Resizing	15:52
153	Page Metadata - An Introduction	01:05
154	Configuring Static Page Metadata	02:58
155	Configuring Dynamic Page Metadata	05:04
156	Understanding Layout Metadata	01:39
157	Module Introduction	01:05
158	Project Setup	03:27
159	User Signup: Extracting & Validating User Input	14:36
160	Storing Users in a Database - The Wrong Way	04:31
161	Hashing Passwords & Storing User Data The Right Way	02:08
162	Checking for Email Duplication	05:02
163	Theory: How Does User Authentication Work?	05:22
164	Choosing a Third-Party Auth Package (Lucia)	02:55
165	Creating a New Lucia Auth Instance	04:33
166	Configuring A Session & A Session Cookie	04:52
167	Setting Up An Auth Session	03:44
168	Verifying An Active Auth Session	07:16
169	Protecting Routes Against Unauthenticated Access	03:08
170	Switching Auth Modes With Query Parameters (Search Params)	05:36
171	Adding User Login (via a Server Action)	05:35
172	Triggering Different Server Actions via Query Parameters	03:45
173	Adding an Auth-only Layout	03:42
174	Adding User Logout	04:11
175	Course Roundup	01:50
176	But There's More NextJS Content!	03:11
177	From App Router To Pages Router	01:39
178	Module Introduction	01:13
179	Our Starting Setup	01:20
180	What Is "File-based Routing"? And Why Is It Helpful?	05:23
181	Adding A First Page	04:02
182	Adding a Named / Static Route File	01:35
183	Working with Nested Paths & Routes	03:34
184	Adding Dynamic Paths & Routes	04:55
185	Extracting Dynamic Path Segment Data (Dynamic Routes)	04:55
186	Building Nested Dynamic Routes & Paths	07:13
187	Adding Catch-All Routes	05:45
188	Navigating with the "Link" Component	05:45
189	Navigating To Dynamic Routes	03:42
190	A Different Way Of Setting Link Hrefs	02:56
191	Navigating Programmatically	03:51
192	Adding a Custom 404 Page	01:36
193	Module Summary	05:52
194	Module Introduction	02:05
195	Planning The Project	04:16
196	Setting Up The Main Pages	07:36
197	Adding Dummy Data & Static Files	04:47
198	Adding Regular React Components	07:15
199	Adding More React Components & Connecting Components	10:23
200	Styling Components In Next.js Projects	09:29
201	Adding Buttons & Icons	08:27
202	Adding the "Event Detail" Page (Dynamic Route)	08:32
203	Adding a General Layout Wrapper Component	06:28
204	Working on the "All Events" Page	02:06
205	Adding a Filter Form for Filtering Events	08:26
206	Navigating to the "Filtered Events" Page Progammatically	08:26
207	Extracting Data on the Catch-All Page	08:55
208	Final Steps	07:03
209	Module Summary	01:41
210	Module Introduction	02:26
211	The Problem With Traditional React Apps (and Data Fetching)	05:16
212	How NextJS Prepares & Pre-renders Pages	05:39
213	Introducing Static Generation with "getStaticProps"	04:05
214	NextJS Pre-renders By Default!	03:09
215	Adding "getStaticProps" To Pages	06:40
216	Running Server-side Code & Using the Filesystem	07:42
217	A Look Behind The Scenes	05:21
218	Utilizing Incremental Static Generation (ISR)	07:23
219	ISR: A Look Behind The Scenes	03:46
220	A Closer Look At "getStaticProps" & Configuration Options	04:20
221	Working With Dynamic Parameters	09:47
222	Introducing "getStaticPaths" For Dynamic Pages	03:45
223	Using "getStaticPaths"	03:27
224	"getStaticPaths" & Link Prefetching: Behind The Scenes	04:00
225	Working With Fallback Pages	05:28
226	Loading Paths Dynamically	04:03
227	Fallback Pages & "Not Found" Pages	05:54
228	Introducing "getServerSideProps" for Server-side Rendering (SSR)	04:14
229	Using "getServerSideProps" for Server-side Rendering	04:06
230	"getServerSideProps" and its Context	04:21
231	Dynamic Pages & "getServerSideProps"	04:05
232	"getServerSideProps": Behind The Scenes	03:26
233	Introducing Client-Side Data Fetching (And When To Use It)	03:41
234	Implementing Client-Side Data Fetching	14:48
235	Using the "useSWR" NextJS Hook	08:59
236	Combining Pre-Fetching With Client-Side Fetching	08:56
237	Module Summary	06:46
238	Module Introduction	01:05
239	Preparations	05:02
240	Adding Static Site Generation (SSG) On The Home Page	11:03
241	Loading Data & Paths For Dynamic Pages	09:51
242	Optimizing Data Fetching	07:48
243	Working on the "All Events" Page	02:48
244	Using Server-side Rendering (SSR)	09:53
245	Adding Client-Side Data Fetching	10:56
246	Module Summary	01:31
247	Module Summary	01:20
248	Analyzing the Need for "head" Metadata	01:50
249	Configuring the "head" Content	03:42
250	Adding Dynamic "head"	05:18
251	Reusing Logic Inside A Component	04:23
252	Working with the "_app.js" File (and Why)	03:04
253	Merging "head" Content	03:18
254	The "_document.js" File (And What It Does)	05:32
255	A Closer Look At Our Images	02:00
256	Optimizing Images with the "Next Image" Component & Feature	08:38
257	Taking A Look At The "Next Image" Documentation	00:52
258	Module Summary	01:17
259	Module Introduction	00:51
260	What are "API Routes"?	05:38
261	Writing Our First API Route	08:25
262	Preparing the Frontend Form	06:30
263	Parsing The Incoming Request & Executing Server-side Code	10:17
264	Sending Requests To API Routes	05:44
265	Using API Routes To Get Data	07:57
266	Using API Routes For Pre-Rendering Pages	08:05
267	Creating & Using Dynamic API Routes	13:42
268	Exploring Different Ways Of Structuring API Route Files	05:10
269	Module Summary	01:45
270	Module Introduction	01:32
271	Starting Setup & A Challenge For You!	05:16
272	Adding a Newsletter Route	11:11
273	Adding Comments API Routes	08:44
274	Connecting the Frontend To the Comments API Routes	11:00
275	Setting Up A MongoDB Database	05:43
276	Running MongoDB Queries From Inside API Routes	09:15
277	Inserting Comments Into The Database	06:27
278	Getting Data From The Database	04:32
279	Adding Error Handling	07:34
280	More Error Handling	10:48
281	Module Summary	01:46
282	Module Introduction	01:28
283	Our Target State & Starting Project	04:33
284	Creating a New React Context	05:38
285	Adding Context State	03:50
286	Using Context Data In Components	04:38
287	Example: Triggering & Showing Notifications	06:36
288	Example: Removing Notifications (Automatically)	06:32
289	Challenge Solution	07:23
290	Module Summary	01:10
291	Module Introduction	03:00
292	Setting Up The Core Pages	05:11
293	Getting Started With The Home Page	05:30
294	Adding The "Hero" Component	08:48
295	Adding Layout & Navigation	08:46
296	Time To Add Styling & A Logo	03:19
297	Starting Work On The "Featured Posts" Part	05:48
298	Adding A Post Grid & Post Items	09:42
299	Rendering Dummy Post Data	12:26
300	Adding the "All Posts" Page	04:00
301	Working On The "Post Detail" Page	10:11
302	Rendering Markdown As JSX	02:31
303	Adding Markdown Files As A Data Source	07:33
304	Adding Functions To Read & Fetch Data From Markdown Files	13:41
305	Using Markdown Data For Rendering Posts	08:20
306	Rendering Dynamic Post Pages & Paths	11:43
307	Rendering Images With The "Next Image" Component (From Markdown)	12:47
308	Rendering Code Snippets From Markdown	06:30
309	Preparing The Contact Form	04:19
310	Adding The Contact API Route	04:27
311	Sending Data From The Client To The API Route	07:27
312	Storing Messages With MongoDB In A Database	08:53
313	Adding UI Feedback With Notifications	15:06
314	Adding "head" Data	06:53
315	Adding A "_document.js" File	02:56
316	Using React Portals	03:46
317	Module Summary	01:25
318	Module Introduction	01:18
319	Building NextJS Apps: Your Options	08:06
320	Key Deployment Steps	03:07
321	Checking & Optimizing Our Code	03:12
322	The NextJS Config File & Working With Environment Variables	14:26
323	Running a Test Build & Reducing Code Size	07:22
324	A Full Deployment Example (To Vercel)	17:41
325	A Note On Github & Secret Credentials	01:58
326	Using the "export" Feature	02:17
327	Module Summary	00:39
328	Module Introduction	01:17
329	Our Starting Project	01:46
330	How Does Authentication Work (In React & NextJS Apps)?	14:24
331	Using The "next-auth" Library	03:05
332	Adding A User Signup API Route	13:00
333	Sending Signup Requests From The Frontend	09:42
334	Improving Signup With Unique Email Addresses	03:01
335	Adding the "Credentials Auth Provider" & User Login Logic	14:09
336	Sending a "Signin" Request From The Frontend	06:53
337	Managing Active Session (On The Frontend)	05:58
338	Adding User Logout	02:19
339	Adding Client-Side Page Guards (Route Protection)	07:51
340	Adding Server-Side Page Guards (And When To Use Which Approach)	07:42
341	Protecting the "Auth" Page	05:47
342	Using the "next-auth" Session Provider Component	05:15
343	Analyzing Further Authentication Requirements	03:43
344	Protecting API Routes	06:38
345	Adding the "Change Password" Logic	10:37
346	Sending a "Change Password" Request From The Frontend	09:17
347	Module Summary & Final Steps	03:30
348	Module Introduction	03:04
349	What is NextJS?	04:46
350	Key Feature: Server-side (Pre-) Rendering of Pages	06:39
351	Key Feature: File-based Routing	03:14
352	Key Feature: Build Fullstack Apps With Ease	01:51
353	Creating a NextJS Project & IDE Setup	06:15
354	About the "App Router"	02:48
355	Analyzing the Created Project	02:53
356	Adding First Pages To The Project	06:06
357	Adding Nested Pages / Paths	03:48
358	Creating Dynamic Pages	03:37
359	Extracting Dynamic Route Data	04:08
360	Linking Between Pages	07:14
361	Onwards To A Bigger Project!	03:33
362	Preparing Our Project Pages	03:43
363	Rendering A List Of (Dummy) Meetups	05:04
364	Adding A Form For Adding Meetups	03:56
365	The "_app.js" File & Wrapper Components	06:18
366	Programmatic Navigation	03:48
367	Adding Custom Components & Styling With CSS Modules	10:01
368	How NextJS Page Pre-Rendering Actually Works	05:53
369	Introducing Data Fetching For Page Generation (getStaticProps)	08:57
370	More Static Site Generation (SSG) With getStaticProps	05:45
371	Exploring getServerSideProps	06:28
372	Working With Dynamic Path Params In getStaticProps	05:15
373	Dynamic Pages & getStaticProps & getStaticPaths	07:17
374	Introducing API Routes	06:21
375	Connecting & Querying a MongoDB Database	09:33
376	Sending HTTP Requests To API Routes	06:50
377	Getting Data From The Database (For Page Pre-Rendering)	07:11
378	Getting Meetup Detail Data & Paths	09:42
379	Adding "head" Metadata To Pages	09:20
380	Deploying NextJS Projects	12:27
381	Working With Fallback Pages & Re-Deploying	04:14
382	Module Summary	02:16
383	Course Roundup	03:58

Unlock unlimited learning

Get instant access to all 382 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription