1 00:00:03,000 --> 00:00:06,983 Before we start writing our first Next.js project, 2 00:00:06,983 --> 00:00:08,505 you should be aware that 3 00:00:08,505 --> 00:00:12,535 there are now two different ways to use Next.js, 4 00:00:12,535 --> 00:00:16,989 known as the App Router and the Pages Router. 5 00:00:16,989 --> 00:00:19,205 Even when looking at the documentation, 6 00:00:19,205 --> 00:00:21,310 you need to select which of the 7 00:00:21,310 --> 00:00:23,007 two routers you're using, 8 00:00:23,075 --> 00:00:25,533 because many things work differently 9 00:00:25,533 --> 00:00:26,762 depending on that. 10 00:00:26,830 --> 00:00:29,061 The App Router is new, 11 00:00:29,061 --> 00:00:34,748 it was made stable in version 13.4, in May 2023. 12 00:00:34,748 --> 00:00:37,891 So, in this video I'll give you a quick overview 13 00:00:37,891 --> 00:00:40,824 of the differences between the two routers, 14 00:00:40,824 --> 00:00:42,834 and what this means for you 15 00:00:42,834 --> 00:00:44,848 in terms of which sections 16 00:00:44,848 --> 00:00:46,707 of this course to watch. 17 00:00:46,785 --> 00:00:49,105 First of all, the two routers are 18 00:00:49,105 --> 00:00:51,355 named after the folder they use. 19 00:00:51,425 --> 00:00:52,960 With the App Router, 20 00:00:52,960 --> 00:00:54,939 inside your project you have 21 00:00:54,939 --> 00:00:56,636 a directory called "app" 22 00:00:56,707 --> 00:01:00,127 where you keep all your pages, and other routes. 23 00:01:00,127 --> 00:01:02,175 While with the Pages Router 24 00:01:02,175 --> 00:01:04,357 you keep them in a folder called 25 00:01:04,357 --> 00:01:05,789 (guess what) "pages". 26 00:01:05,858 --> 00:01:09,181 As I mentioned, the App Router is the new one, 27 00:01:09,181 --> 00:01:12,893 only declared stable in May 2023. 28 00:01:12,893 --> 00:01:15,510 While the Pages Router is what 29 00:01:15,510 --> 00:01:17,429 Next.js had been using 30 00:01:17,516 --> 00:01:21,844 ever since the framework was created back in 2016. 31 00:01:21,844 --> 00:01:25,149 The App Router is now the recommended way 32 00:01:25,149 --> 00:01:27,193 to create new applications. 33 00:01:27,193 --> 00:01:30,741 However, the Pages Router is still supported, 34 00:01:30,741 --> 00:01:33,345 and will continue to be maintained 35 00:01:33,345 --> 00:01:37,179 for "multiple major versions moving forward." 36 00:01:37,179 --> 00:01:39,407 (To quote the official announcement.) 37 00:01:39,407 --> 00:01:41,235 There are lots and lots of 38 00:01:41,235 --> 00:01:42,992 existing Next.js projects 39 00:01:43,062 --> 00:01:45,031 that were created before the 40 00:01:45,031 --> 00:01:46,718 new router even existed, 41 00:01:46,789 --> 00:01:49,618 including some very popular websites. 42 00:01:49,618 --> 00:01:52,953 The new App Router does have some advantages, 43 00:01:52,953 --> 00:01:55,978 which is in fact why the Next.js team 44 00:01:55,978 --> 00:01:58,013 decided to create a different 45 00:01:58,013 --> 00:01:59,837 way to build applications. 46 00:01:59,907 --> 00:02:03,067 It's based on React Server Components, 47 00:02:03,067 --> 00:02:05,433 that are rendered only on the server 48 00:02:05,433 --> 00:02:07,545 without sending any JavaScript 49 00:02:07,545 --> 00:02:08,954 code to the browser. 50 00:02:09,024 --> 00:02:11,358 It also supports Nested Layouts, 51 00:02:11,358 --> 00:02:13,109 and a few other features 52 00:02:13,182 --> 00:02:16,302 that are not available in the Pages Router. 53 00:02:16,302 --> 00:02:18,873 Now, this course covers both the 54 00:02:18,873 --> 00:02:21,284 old and the new functionality. 55 00:02:21,364 --> 00:02:24,512 You'll find a number of sections, after this one, 56 00:02:24,512 --> 00:02:27,010 explaining how to build a project 57 00:02:27,010 --> 00:02:28,600 using the App Router. 58 00:02:28,676 --> 00:02:30,743 It's covered first, since it's 59 00:02:30,743 --> 00:02:32,741 now the recommended approach. 60 00:02:32,810 --> 00:02:36,263 But after that you'll also find other sections 61 00:02:36,263 --> 00:02:39,697 with examples based on the Pages Router. 62 00:02:39,697 --> 00:02:42,613 For clarity, each section is prefixed 63 00:02:42,613 --> 00:02:44,898 with either "app" or "pages". 64 00:02:44,977 --> 00:02:47,443 So, what does this mean for you? 65 00:02:47,443 --> 00:02:48,887 What should you learn: 66 00:02:48,887 --> 00:02:52,398 the App Router, the Pages Router, or both? 67 00:02:52,398 --> 00:02:55,617 Most people should learn the App Router, 68 00:02:55,617 --> 00:02:57,512 because, as we've seen, it's 69 00:02:57,512 --> 00:02:59,069 now the recommended way 70 00:02:59,137 --> 00:03:01,696 to build new Next.js apps. 71 00:03:01,696 --> 00:03:04,551 Even if you have an existing application, 72 00:03:04,551 --> 00:03:06,684 you may want to start migrating 73 00:03:06,684 --> 00:03:08,129 it to the new router. 74 00:03:08,198 --> 00:03:09,660 So, at this point, 75 00:03:09,660 --> 00:03:11,899 I think you should only learn the 76 00:03:11,899 --> 00:03:13,799 Pages Router if you have to, 77 00:03:13,867 --> 00:03:16,798 meaning if you know you'll be working on a project 78 00:03:16,798 --> 00:03:18,700 that was written before the 79 00:03:18,700 --> 00:03:20,531 new router was introduced. 80 00:03:20,601 --> 00:03:23,884 But there are cases where that may well be useful. 81 00:03:23,884 --> 00:03:27,000 For example, if you just joined a new company 82 00:03:27,000 --> 00:03:29,281 that has an existing application 83 00:03:29,281 --> 00:03:31,135 based on the Pages Router. 84 00:03:31,206 --> 00:03:33,509 As we've seen, it's still supported, 85 00:03:33,509 --> 00:03:35,962 and will be for quite some time. 86 00:03:35,962 --> 00:03:38,563 So, in terms of the course content, 87 00:03:38,563 --> 00:03:40,389 if you're like most people, 88 00:03:40,389 --> 00:03:43,933 you can watch only the sections on the App Router, 89 00:03:43,933 --> 00:03:46,056 and simply skip the rest. 90 00:03:46,056 --> 00:03:49,287 If you do need to work with the Pages Router, 91 00:03:49,287 --> 00:03:51,629 you should know that the two parts 92 00:03:51,629 --> 00:03:53,694 of the course are independent. 93 00:03:53,763 --> 00:03:55,593 You don't have to watch them 94 00:03:55,593 --> 00:03:57,423 in the order they're listed. 95 00:03:57,488 --> 00:04:00,688 If you want to learn the Pages Router first, 96 00:04:00,688 --> 00:04:02,102 because that's what you'll 97 00:04:02,102 --> 00:04:03,407 be working on initially, 98 00:04:03,462 --> 00:04:05,646 you can start from that part. 99 00:04:05,646 --> 00:04:07,855 But again, in all other cases 100 00:04:07,855 --> 00:04:10,086 you can watch only the first part, 101 00:04:10,086 --> 00:04:11,267 on the App Router.