Skip to main content
CF

React Simplified - Next.js

9h 33m 4s
English
Paid

Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because Next.js has two main ways that you can render out and use Next.js. These two ways are essentially completely different from each other in how they work, so that's why the course is broken into two different sections.

The first major section is going to be on the app router. You'll notice there's a few sections in this course that'll be prefixed with app router or app. That way you know those are specifically about the app router.

Then after that, I have a couple sections specifically about the pages directory. You'll see there's going to be something like pages directory or pages or something along those lines at the prefix of those sections. That way you know that there's a certain section for the app router and there's a certain section for the pages directory.

Finally, at the very end of the course, there's a general section that is going to be applicable to both the app router and the pages directory. It doesn't matter which way you plan on actually rendering your Next.js applications. This general section applies to both of those different paradigms.

The nice thing about Next.js is you can use both of these paradigms together at once, but the app router is the newer way of doing things. I personally find it more enjoyable and easier to work in, while the pages directory is technically the older way of doing things, but it's really not that old, and a lot of companies still use it, which is why I include both sections in this course. If you have just one section you want to choose, I would recommend choosing the app router section just because that's the newest way of doing things and that's where Next.js is going towards, but a lot of companies still use the pages directory, so I'd recommend if you want to learn the pages directory, that you would go through both the app router and the pages directory section because I do a lot of references back to what the app router is in the pages directory, that way it's easier to understand.

I'd recommend doing both sections if you want to learn the pages directory, but if you only want to learn the app router, you can just skip the pages directory section. Most companies that you're going to be working in are probably going to be using both of these different techniques, though, because they're going to have legacy code using the pages directory, and maybe their newer code is going to be using the app router, so honestly, I'd probably recommend learning both of them just because most companies are going to have you use both of them.

Additional

https://github.com/WebDevSimplified/Next.js-Simplified/

About the Author: Web Dev Simplified (Kyle Cook)

Web Dev Simplified (Kyle Cook) thumbnail

Web Dev Simplified (webdevsimplified.com) is the online course platform of Kyle Cook, a US developer behind one of the larger independent web-development YouTube channels. The channel publishes weekly tutorials on JavaScript, React, CSS, and the modern web ecosystem, with paid courses extending the most-requested topics into deeper long-form material.

The course catalog covers JavaScript fundamentals (the canonical JavaScript Simplified course), modern CSS (including Grid, Flexbox, animations), React deep-dives, the testing tracks, and the algorithm / data-structure material aimed at junior developers preparing for early-career interviews. Material is taught at a deliberately accessible level for self-taught developers.

The CourseFlix listing under this source carries 9 Web Dev Simplified courses spanning that range. Material is paid; courses are sold individually on the original platform. Courses are aimed primarily at junior and self-taught developers building real proficiency.

Watch Online 51 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 51 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Next.js 15 Updates
All Course Lessons (51)
#Lesson TitleDurationAccess
1
Next.js 15 Updates Demo
01:30
2
Course Introduction
02:04
3
What Is Next.js
04:10
4
Your First Next.js Project
09:17
5
Routing Basics
10:47
6
Metadata
09:00
7
Loading & Errors
12:14
8
Dynamic Routes
12:19
9
TypeScript Setup
02:21
10
Read Only Blog Introduction
02:25
11
Read Only Blog Walkthrough
39:07
12
Data Fetching
08:22
13
Request Memoization Cache
08:22
14
Data Cache
20:00
15
Full Route Cache
09:35
16
Router Cache
07:10
17
DynamicIO
23:51
18
Caching Recap
08:21
19
Server vs Client Components
23:21
20
Dynamic vs Static
13:07
21
Dynamic Functions
11:43
22
Static Paths
07:54
23
Blog Updates Introduction
05:57
24
Blog Updates Walkthrough
16:59
25
Blog Updates DynamicIO
05:17
26
Server Actions With Forms
24:15
27
Server Actions Not In Forms
10:02
28
Blog Mutation Introduction
05:28
29
Blog Mutation Walkthrough
37:10
30
Blog Mutation DynamicIO
02:55
31
Templates
05:38
32
Route Groups
10:07
33
Parallel Routes
22:58
34
Intercepting Routes
21:25
35
Route Handlers
14:58
36
after Function
03:30
37
Your First Next.js Pages Directory App
03:45
38
Routing
06:19
39
Metadata
02:44
40
Special Files
06:57
41
Rendering Modes
08:11
42
getServerSideProps
09:22
43
getStaticProps & getStaticPaths
09:09
44
getInitialProps
02:48
45
Data Mutation
09:52
46
Blog Project Introduction
04:44
47
Blog Project Walkthrough
45:07
48
Fonts
10:21
49
Images
10:43
50
Scripts
06:45
51
Forms
02:38
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for this course?
Before taking this course, students should have a basic understanding of JavaScript and React. Familiarity with TypeScript will be beneficial, particularly since one of the lessons covers TypeScript setup. The course does not focus on teaching these foundational technologies, so prior experience will help in grasping the concepts of Next.js more effectively.
What will I build throughout the course?
Throughout the course, students will work on building a blog application. The course includes sections like 'Read Only Blog Introduction' and 'Blog Updates Walkthrough' which guide you through creating and updating a blog using Next.js. By the end of the course, you will have a functional blog that incorporates various Next.js features such as dynamic routes and server actions.
Who is the target audience for this course?
This course is designed for developers who are familiar with React and want to expand their skills by learning Next.js. It is suitable for those interested in modern web development practices and who wish to explore both the app router and pages directory approaches in Next.js. The course is also beneficial for developers looking to understand how to handle server and client components within a single framework.
How does this course compare to other Next.js courses in terms of depth?
This course offers a detailed exploration of both the app router and pages directory in Next.js, which are two distinct paradigms for rendering applications. Unlike some courses that might focus on just one approach, this course provides comprehensive coverage of both, along with a general section that applies to both paradigms. This allows students to gain a well-rounded understanding of Next.js capabilities.
Is there any specific tooling or platform focus in this course?
The course focuses on using Next.js, a popular framework for building React applications. It incorporates the use of TypeScript, which is specifically covered in a lesson dedicated to setting it up. The course also delves into caching strategies, dynamic and static data handling, and server-side functions, which are essential for optimizing Next.js applications.
What topics are not covered in this course?
The course does not cover basic React or JavaScript fundamentals, as it assumes prior knowledge in these areas. It also does not delve into advanced back-end technologies or database management, as the focus remains on front-end development using Next.js and its associated features like routing, dynamic functions, and server actions.
What is the time commitment required for completing this course?
While the total runtime of the video lessons is not specified, the course consists of 51 lessons, including practical walkthroughs and exercises. Students should expect to dedicate additional time outside of watching the lessons to work on the projects and practice the concepts taught, potentially extending the total time commitment to several weeks depending on individual pace and prior experience.