1 00:00:02,000 --> 00:00:05,000 So, what is NextJS? 2 00:00:05,000 --> 00:00:10,000 And why could learning NextJS be a good idea? 3 00:00:10,000 --> 00:00:13,000 And why could NextJS in general, 4 00:00:13,000 --> 00:00:17,000 be helpful to us as a React developer? 5 00:00:17,000 --> 00:00:22,000 If we visit nextjs.org, the official NextJS website, 6 00:00:22,000 --> 00:00:27,000 we learn that NextJS is the react framework for production. 7 00:00:28,000 --> 00:00:30,000 Okay, so that sounds like a good argument. 8 00:00:30,000 --> 00:00:32,000 We all want to build production apps, right? 9 00:00:32,000 --> 00:00:37,000 So NextJS is certainly helpful then, but wait a second. 10 00:00:37,000 --> 00:00:39,000 What exactly does this mean? 11 00:00:39,000 --> 00:00:44,000 So NextJS calls itself a React framework for production 12 00:00:44,000 --> 00:00:46,000 and that name makes a lot of sense 13 00:00:46,000 --> 00:00:50,000 because NextJS offers a lot of features that make building 14 00:00:50,000 --> 00:00:54,000 large scale production ready, React apps easier. 15 00:00:54,000 --> 00:00:58,000 But I personally also like to call NextJS 16 00:00:59,000 --> 00:01:02,000 a full stack framework for ReactJS. 17 00:01:02,000 --> 00:01:04,000 And it's the full stack part 18 00:01:04,000 --> 00:01:06,000 which I want to highlight here. 19 00:01:06,000 --> 00:01:07,000 But I will come back to that. 20 00:01:07,000 --> 00:01:11,000 Let's first of all, focus on the framework part. 21 00:01:11,000 --> 00:01:16,000 Isn't ReactJS itself, already a framework or a library? 22 00:01:16,000 --> 00:01:18,000 Well, indeed it is. 23 00:01:18,000 --> 00:01:20,000 React is labeled a JavaScript library 24 00:01:20,000 --> 00:01:23,000 for building user interfaces. 25 00:01:23,000 --> 00:01:26,000 And that means that it's a third party package 26 00:01:26,000 --> 00:01:28,000 which you can add to your front end projects. 27 00:01:28,000 --> 00:01:32,000 So it's all about client side Java script code in the end. 28 00:01:32,000 --> 00:01:34,000 And you can use React there 29 00:01:34,000 --> 00:01:37,000 to build interactive user interfaces. 30 00:01:37,000 --> 00:01:38,000 And it's a library that makes building 31 00:01:38,000 --> 00:01:42,000 complex user interfaces way easier 32 00:01:42,000 --> 00:01:45,000 than it would be with just JavaScript. 33 00:01:45,000 --> 00:01:47,000 I got separate courses and videos on React 34 00:01:47,000 --> 00:01:50,000 where I explain why React is awesome. 35 00:01:50,000 --> 00:01:52,000 So I'll not focus on this here. 36 00:01:52,000 --> 00:01:54,000 So React already is such a library 37 00:01:54,000 --> 00:01:57,000 and it's called a library because in its core, 38 00:01:57,000 --> 00:02:01,000 it's really only focusing on that user interface part, 39 00:02:01,000 --> 00:02:03,000 on components, state props. 40 00:02:03,000 --> 00:02:06,000 If you want to build large scale React projects, 41 00:02:06,000 --> 00:02:11,000 you typically also need to add extra libraries for routing, 42 00:02:11,000 --> 00:02:15,000 maybe libraries that help you with authentication 43 00:02:15,000 --> 00:02:16,000 and things like that. 44 00:02:16,000 --> 00:02:19,000 Now NextJS is labeled a framework 45 00:02:19,000 --> 00:02:22,000 and a framework that builds up on React. 46 00:02:22,000 --> 00:02:25,000 Now the difference between a framework and a library 47 00:02:25,000 --> 00:02:28,000 in the end is that a framework is bigger. 48 00:02:28,000 --> 00:02:30,000 It has more features than a library. 49 00:02:30,000 --> 00:02:34,000 It's focusing on more things instead of just a single thing. 50 00:02:34,000 --> 00:02:36,000 And it's also giving you clear rules, 51 00:02:36,000 --> 00:02:40,000 a clear guidance on how you should write your code, 52 00:02:40,000 --> 00:02:42,000 how you should structure your files and so on. 53 00:02:42,000 --> 00:02:46,000 And all these are things which NextJS does 54 00:02:46,000 --> 00:02:49,000 as you're going to learn from this course. 55 00:02:49,000 --> 00:02:50,000 But it's also a framework 56 00:02:50,000 --> 00:02:54,000 building up on another library already on React 57 00:02:54,000 --> 00:02:56,000 because it enhances React, you could say. 58 00:02:56,000 --> 00:03:00,000 It makes building large scale React apps easier. 59 00:03:00,000 --> 00:03:02,000 And that's the part where we're back 60 00:03:02,000 --> 00:03:05,000 on this for production part here. 61 00:03:05,000 --> 00:03:08,000 NextJS has the goal to make the life easier 62 00:03:08,000 --> 00:03:11,000 for you as a React developer. 63 00:03:11,000 --> 00:03:12,000 And it builds up on React, 64 00:03:12,000 --> 00:03:16,000 it enhances React by adding many core features 65 00:03:16,000 --> 00:03:21,000 which you have to add to React apps on your own otherwise. 66 00:03:21,000 --> 00:03:24,000 Things like routing, but also many other things. 67 00:03:24,000 --> 00:03:27,000 And I'll come back to that in just a second. 68 00:03:27,000 --> 00:03:30,000 And we're going to dive into the key features 69 00:03:30,000 --> 00:03:32,000 added by NextJS. 70 00:03:32,000 --> 00:03:37,000 But NextJS simply adds a lot of features to your React app. 71 00:03:37,000 --> 00:03:39,000 They then are there out of the box 72 00:03:39,000 --> 00:03:42,000 once you start using NextJS and it definitely ensures 73 00:03:42,000 --> 00:03:46,000 that you don't have to reinvent the wheel as often. 74 00:03:46,000 --> 00:03:50,000 You don't have to add as many third party libraries 75 00:03:50,000 --> 00:03:54,000 to solve common problems, which you need in bigger apps, 76 00:03:54,000 --> 00:03:56,000 in which you typically need to solve 77 00:03:56,000 --> 00:03:59,000 when building real production React apps. 78 00:03:59,000 --> 00:04:03,000 And that's why NextJS is called a framework 79 00:04:03,000 --> 00:04:05,000 because it has a lot of features, clear rules. 80 00:04:05,000 --> 00:04:07,000 Why it's a framework for React; 81 00:04:07,000 --> 00:04:09,000 because it builds up on React. 82 00:04:09,000 --> 00:04:12,000 It enhances React, it uses React. 83 00:04:12,000 --> 00:04:13,000 You still write React code. 84 00:04:13,000 --> 00:04:16,000 You still build React components, 85 00:04:16,000 --> 00:04:18,000 but it's a framework for production 86 00:04:18,000 --> 00:04:21,000 because it adds all those missing features 87 00:04:21,000 --> 00:04:24,000 which you typically do need to add to React apps 88 00:04:24,000 --> 00:04:26,000 to really prepare them for production 89 00:04:26,000 --> 00:04:29,000 and to solve common problems. 90 00:04:29,000 --> 00:04:31,000 And with that, let's now take a closer look 91 00:04:31,000 --> 00:04:34,000 at the actual features added by NextJS 92 00:04:34,000 --> 00:04:38,000 so that we understand where it helps us exactly 93 00:04:38,000 --> 00:04:43,000 and why using it is a great idea and makes our life easier.