React Simplified - Next.js
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.
Watch Online React Simplified - Next.js
# | Title | Duration |
---|---|---|
1 | 01 - Course Introduction | 02:04 |
2 | 02 - What Is Next.js | 04:10 |
3 | 03 - Your First Next.js Project | 09:18 |
4 | 04 - Routing Basics | 10:47 |
5 | 05 - Metadata | 09:00 |
6 | 06 - Loading & Errors | 12:14 |
7 | 07 - Dynamic Routes | 11:08 |
8 | 08 - TypeScript Setup | 02:21 |
9 | 09 - Read Only Blog Introduction | 02:25 |
10 | 10 - Read Only Blog Walkthrough | 39:07 |
11 | 11 - Data Fetching | 08:22 |
12 | 12 - Request Memoization Cache | 08:22 |
13 | 13 - Data Cache | 18:33 |
14 | 14 - Full Route Cache | 08:11 |
15 | 15 - Router Cache | 05:36 |
16 | 16 - Server vs Client Components | 23:21 |
17 | 17 - Dynamic vs Static | 11:27 |
18 | 18 - Dynamic Functions | 10:57 |
19 | 19 - Static Paths | 07:54 |
20 | 20 - Blog Updates Introduction | 05:19 |
21 | 21 - Blog Updates Walkthrough | 24:25 |
22 | 22 - Server Actions With Forms | 24:15 |
23 | 23 - Server Actions Not In Forms | 10:02 |
24 | 24 - useOptimistic | 05:01 |
25 | 25 - useFormStatus & useFormState | 09:30 |
26 | 26 - Blog Mutation Introduction | 04:35 |
27 | 27 - Blog Mutation Walkthrough | 35:52 |
28 | 28 - Templates | 05:38 |
29 | 29 - Route Groups | 10:07 |
30 | 30 - Parallel Routes | 22:58 |
31 | 31 - Intercepting Routes | 21:25 |
32 | 32 - Route Handlers | 14:58 |
33 | 33 - Your First Next.js Pages Directo... | 03:45 |
34 | 34 - Routing | 06:19 |
35 | 35 - Metadata | 02:44 |
36 | 36 - Special Files | 06:57 |
37 | 37 - Rendering Modes | 08:11 |
38 | 38 - getServerSideProps | 09:22 |
39 | 39 - getStaticProps & getStaticPaths | 09:09 |
40 | 40 - getInitialProps | 02:48 |
41 | 41 - Data Mutation | 09:52 |
42 | 42 - Blog Project Introduction | 04:44 |
43 | 43 - Blog Project Walkthrough | 45:07 |
44 | 44 - Fonts | 10:21 |
45 | 45 - Images | 10:43 |
46 | 46 - Scripts | 06:45 |