1 00:00:00,000 --> 00:00:03,000 So now that we know that NextJS 2 00:00:03,000 --> 00:00:06,000 is pretty awesome and gives us a couple of advantages, 3 00:00:06,000 --> 00:00:08,000 it's time to get our hands dirty 4 00:00:08,000 --> 00:00:10,000 and create a new Next project. 5 00:00:10,000 --> 00:00:13,000 And for that, you can visit the official website, 6 00:00:13,000 --> 00:00:17,000 nextjs.org, and on there you'll find this command 7 00:00:17,000 --> 00:00:22,000 that can be executed to create new Next projects. 8 00:00:22,000 --> 00:00:26,000 Though I will say right away that attached to this lecture 9 00:00:26,000 --> 00:00:29,000 and to many other lectures throughout this course, 10 00:00:29,000 --> 00:00:31,000 I provide a starting snapshot 11 00:00:31,000 --> 00:00:34,000 that actually uses CodeSandbox, 12 00:00:34,000 --> 00:00:37,000 so that you can follow along with this course 13 00:00:37,000 --> 00:00:42,000 and learn NextJS without installing anything on your system, 14 00:00:43,000 --> 00:00:45,000 because maybe you're in an environment 15 00:00:45,000 --> 00:00:48,000 where you can't install software on your system 16 00:00:48,000 --> 00:00:50,000 or you simply don't want to. 17 00:00:50,000 --> 00:00:51,000 Well, in that case, you don't have to. 18 00:00:51,000 --> 00:00:56,000 You can simply use that CodeSandbox starting snapshot. 19 00:00:56,000 --> 00:00:58,000 Now, if you wanna set up a NextJS project 20 00:00:58,000 --> 00:01:02,000 locally on your system, that's the command to run. 21 00:01:02,000 --> 00:01:05,000 And since that command, just like NextJS itself, 22 00:01:05,000 --> 00:01:07,000 will use Node.js under the hood, 23 00:01:07,000 --> 00:01:11,000 you should therefore install that on your system. 24 00:01:11,000 --> 00:01:14,000 So, download and install Node.js, 25 00:01:14,000 --> 00:01:16,000 for example, this LTS version. 26 00:01:17,000 --> 00:01:20,000 Now with that installed, you can copy that command 27 00:01:21,000 --> 00:01:24,000 and then run it in your default terminal or command prompt. 28 00:01:24,000 --> 00:01:27,000 Just make sure that before running it, 29 00:01:27,000 --> 00:01:28,000 you navigate into a folder 30 00:01:28,000 --> 00:01:31,000 where you wanna create your new Next project. 31 00:01:33,000 --> 00:01:34,000 You can then hit Enter, 32 00:01:34,000 --> 00:01:37,000 and you'll then be asked a couple of questions, 33 00:01:37,000 --> 00:01:39,000 like for example, what the name of this project should be, 34 00:01:39,000 --> 00:01:43,000 and here I'll simply pick first-app. 35 00:01:44,000 --> 00:01:46,000 Now, with that chosen, 36 00:01:46,000 --> 00:01:49,000 you'll then be asked a couple of other questions. 37 00:01:49,000 --> 00:01:51,000 Like for example, whether you want to use TypeScript or not. 38 00:01:51,000 --> 00:01:54,000 And whilst TypeScript is amazing 39 00:01:54,000 --> 00:01:57,000 and I can only recommend Learning TypeScript, 40 00:01:57,000 --> 00:01:59,000 I'll not use it for this course, since of course, 41 00:01:59,000 --> 00:02:03,000 not all students know TypeScript or want to use TypeScript. 42 00:02:03,000 --> 00:02:07,000 Now, I will choose yes for ESLint, but no for Tailwind. 43 00:02:07,000 --> 00:02:10,000 Tailwind is an amazing CSS library 44 00:02:10,000 --> 00:02:14,000 that allows us to style NextJS applications with ease, 45 00:02:14,000 --> 00:02:15,000 but when using it, 46 00:02:15,000 --> 00:02:19,000 we also have to add a bunch of CSS classes to our JSX code. 47 00:02:19,000 --> 00:02:21,000 And I don't wanna waste your time, 48 00:02:21,000 --> 00:02:24,000 that's why I'm not using it here in this course, 49 00:02:24,000 --> 00:02:27,000 though I will take a look at different styling options 50 00:02:27,000 --> 00:02:30,000 you have in NextJS projects a little bit later. 51 00:02:31,000 --> 00:02:34,000 Now, you could then go for a different folder structure, 52 00:02:34,000 --> 00:02:37,000 but I'll choose No here as well. 53 00:02:37,000 --> 00:02:40,000 And then we got an important question, 54 00:02:40,000 --> 00:02:43,000 whether you want to use the App Router or not. 55 00:02:43,000 --> 00:02:47,000 And this simply refers to two different ways 56 00:02:47,000 --> 00:02:50,000 of building NextJS applications, 57 00:02:50,000 --> 00:02:53,000 two different approaches you can use. 58 00:02:53,000 --> 00:02:56,000 That's why in the official documentation, 59 00:02:56,000 --> 00:02:57,000 you are also able to choose 60 00:02:57,000 --> 00:03:00,000 between these two different approaches. 61 00:03:00,000 --> 00:03:03,000 Now, I'll get back to the differences later. 62 00:03:03,000 --> 00:03:05,000 In this course, I cover both, 63 00:03:05,000 --> 00:03:08,000 but here we'll choose the recommended option, 64 00:03:08,000 --> 00:03:09,000 which is to use the App Router. 65 00:03:11,000 --> 00:03:13,000 Then you could change this setting, 66 00:03:13,000 --> 00:03:15,000 but I'll stick to No here. 67 00:03:15,000 --> 00:03:18,000 And with that, finally, the project is being created. 68 00:03:19,000 --> 00:03:23,000 Now, once the creation finished, you can navigate 69 00:03:23,000 --> 00:03:27,000 into that newly created NextJS project folder 70 00:03:27,000 --> 00:03:30,000 and run npm run dev to start a development server 71 00:03:30,000 --> 00:03:34,000 that allows you to review your NextJS website. 72 00:03:34,000 --> 00:03:36,000 On CodeSandbox, you don't have to do that, 73 00:03:36,000 --> 00:03:38,000 there, this server is automatically running 74 00:03:38,000 --> 00:03:41,000 and you should already be seeing the preview. 75 00:03:41,000 --> 00:03:43,000 Now, for a new NextJS project, 76 00:03:43,000 --> 00:03:44,000 if you visit this address 77 00:03:44,000 --> 00:03:46,000 that's showing up in the terminal here, 78 00:03:46,000 --> 00:03:50,000 you will likely see a page that looks something like this, 79 00:03:50,000 --> 00:03:53,000 though on CodeSandbox, you are seeing a different page, 80 00:03:53,000 --> 00:03:55,000 because I actually prepared 81 00:03:55,000 --> 00:03:59,000 a slightly edited starting project, 82 00:03:59,000 --> 00:04:01,000 which we can use as a starting point for this section 83 00:04:01,000 --> 00:04:03,000 and this overall course. 84 00:04:03,000 --> 00:04:06,000 And you'll find this edited starting project 85 00:04:06,000 --> 00:04:08,000 attached to this lecture. (graphic crunching) 86 00:04:08,000 --> 00:04:11,000 I overwrote the content of the app folder, 87 00:04:11,000 --> 00:04:12,000 the public folder, 88 00:04:12,000 --> 00:04:15,000 and the content of this eslintrc.json file, 89 00:04:15,000 --> 00:04:19,000 and then you should see this page on the screen. 90 00:04:19,000 --> 00:04:23,000 And that's now our first NextJS app up and running.