1 00:00:02,000 --> 00:00:05,000 So now that we got started with NextJS 2 00:00:05,000 --> 00:00:08,000 and we at least have a first basic understanding 3 00:00:08,000 --> 00:00:11,000 of why we might want to use it, 4 00:00:11,000 --> 00:00:15,000 it's time to create our first NextJS project. 5 00:00:15,000 --> 00:00:16,000 Now for that, 6 00:00:16,000 --> 00:00:21,000 you can run the command you find here on NextJS.org. 7 00:00:21,000 --> 00:00:24,000 Though for this command to succeed, 8 00:00:24,000 --> 00:00:28,000 you need to have NodeJS installed on your system. 9 00:00:28,000 --> 00:00:32,000 We're not going to write too much NodeJS code, 10 00:00:32,000 --> 00:00:36,000 though we will use some NodeJS later in the course. 11 00:00:36,000 --> 00:00:40,000 But NextJS needs NodeJS under the hood. 12 00:00:40,000 --> 00:00:43,000 And this command here, which we wanna run, 13 00:00:43,000 --> 00:00:46,000 also needs NodeJS to be installed because under the hood, 14 00:00:46,000 --> 00:00:50,000 this command will use the Node Package Manager 15 00:00:50,000 --> 00:00:54,000 for installing dependencies like the NextJS framework. 16 00:00:54,000 --> 00:00:58,000 Therefore, from nodejs.org, you should download the latest, 17 00:00:58,000 --> 00:01:02,000 or the latest LTS version, doesn't really matter. 18 00:01:02,000 --> 00:01:04,000 And install NodeJS on your system. 19 00:01:04,000 --> 00:01:07,000 It is available for all operating systems. 20 00:01:07,000 --> 00:01:09,000 Simply download it from this page, 21 00:01:09,000 --> 00:01:11,000 walk through the installer. 22 00:01:11,000 --> 00:01:13,000 And once you have NodeJS installed, 23 00:01:13,000 --> 00:01:16,000 you can run this command here. 24 00:01:16,000 --> 00:01:18,000 So for that, copy this command. 25 00:01:18,000 --> 00:01:20,000 And then in your terminal, 26 00:01:20,000 --> 00:01:23,000 your default system command prompt, 27 00:01:23,000 --> 00:01:26,000 navigate into the folder with the CD command 28 00:01:26,000 --> 00:01:29,000 where you want to create your NextJS project. 29 00:01:29,000 --> 00:01:31,000 And once you are in that folder, 30 00:01:31,000 --> 00:01:33,000 you can execute this command. 31 00:01:35,000 --> 00:01:37,000 Now when you execute this command, 32 00:01:37,000 --> 00:01:39,000 you might be asked to confirm 33 00:01:39,000 --> 00:01:41,000 that you wan to install some dependencies, 34 00:01:41,000 --> 00:01:44,000 and then thereafter, as a first step, 35 00:01:44,000 --> 00:01:47,000 you will be asked which name you want to assign 36 00:01:47,000 --> 00:01:48,000 to your project. 37 00:01:48,000 --> 00:01:51,000 And here I'll simply pick nextjs-course. 38 00:01:51,000 --> 00:01:54,000 Though the name of course is up to you. 39 00:01:54,000 --> 00:01:56,000 Now after you confirmed this name, 40 00:01:56,000 --> 00:01:59,000 you will be asked a couple of other questions as well. 41 00:01:59,000 --> 00:02:00,000 For example, 42 00:02:00,000 --> 00:02:03,000 whether you want to use TypeScript for this project. 43 00:02:03,000 --> 00:02:07,000 And here I'll choose no so that everyone can follow along 44 00:02:07,000 --> 00:02:08,000 with this course. 45 00:02:08,000 --> 00:02:11,000 Because whilst you can use NextJS with TypeScript, 46 00:02:11,000 --> 00:02:13,000 it's of course not a must-do. 47 00:02:13,000 --> 00:02:15,000 And I want to make sure that everyone can get the most 48 00:02:15,000 --> 00:02:16,000 out of this course, 49 00:02:16,000 --> 00:02:19,000 no matter if you do know TypeScript or not. 50 00:02:19,000 --> 00:02:21,000 Hence, I'll choose no here. 51 00:02:21,000 --> 00:02:24,000 I'll also choose no for ESLint 52 00:02:24,000 --> 00:02:27,000 and for a Tailwind CSS, which we could use for a styling. 53 00:02:27,000 --> 00:02:30,000 But I will provide some finished CSS code 54 00:02:30,000 --> 00:02:33,000 to you as part of this course. 55 00:02:33,000 --> 00:02:36,000 I will also choose no for this source directory. 56 00:02:36,000 --> 00:02:39,000 This option would simply change the structure 57 00:02:39,000 --> 00:02:43,000 of the created project folder, and I don't want that. 58 00:02:43,000 --> 00:02:45,000 And then here for the App Router, 59 00:02:45,000 --> 00:02:48,000 I'll actually also choose no, 60 00:02:48,000 --> 00:02:51,000 even though it says that it's recommended to use it. 61 00:02:51,000 --> 00:02:54,000 But I'll get back to this in the next lecture 62 00:02:54,000 --> 00:02:57,000 and explain why I won't use the App Router just yet, 63 00:02:57,000 --> 00:03:00,000 and why this of course might change in the future. 64 00:03:00,000 --> 00:03:03,000 But for the moment, you should choose no here. 65 00:03:03,000 --> 00:03:06,000 And you can also choose no for the follow-up question. 66 00:03:06,000 --> 00:03:09,000 And then after going through all these questions, 67 00:03:09,000 --> 00:03:14,000 finally the NextJS project will be created for you. 68 00:03:14,000 --> 00:03:16,000 And with that process completed, 69 00:03:16,000 --> 00:03:18,000 you will now have a new folder in that folder 70 00:03:18,000 --> 00:03:21,000 into which you navigate it here in your terminal 71 00:03:21,000 --> 00:03:23,000 that carries this name. 72 00:03:23,000 --> 00:03:26,000 Now you could now navigate 73 00:03:26,000 --> 00:03:28,000 into this folder with the CD command 74 00:03:28,000 --> 00:03:31,000 and then run the development server by running npm run dev. 75 00:03:31,000 --> 00:03:34,000 But I will not yet do that here. 76 00:03:34,000 --> 00:03:39,000 Instead, I now opened this project in Visual Studio Code, 77 00:03:39,000 --> 00:03:43,000 the IDE, the editor I'm going to use in this course. 78 00:03:43,000 --> 00:03:46,000 Now you don't have to use Visual Studio Code. 79 00:03:46,000 --> 00:03:49,000 It is a great IDE for web development though. 80 00:03:49,000 --> 00:03:52,000 It's completely free and it's amazing. 81 00:03:52,000 --> 00:03:53,000 But you can use whatever 82 00:03:53,000 --> 00:03:56,000 your favorite web development IDE is. 83 00:03:56,000 --> 00:04:00,000 If you do want to use the same editor as I do here though, 84 00:04:00,000 --> 00:04:03,000 you can visit code.visualstudio.com, 85 00:04:03,000 --> 00:04:06,000 and from there you can download Visual Studio Code. 86 00:04:06,000 --> 00:04:09,000 It is available for all major operating systems. 87 00:04:09,000 --> 00:04:12,000 Simply download the installer and walk through it. 88 00:04:12,000 --> 00:04:15,000 And once you have downloaded and installed it, 89 00:04:15,000 --> 00:04:19,000 you can open that NextJS course folder 90 00:04:19,000 --> 00:04:22,000 which we created with the command here 91 00:04:22,000 --> 00:04:25,000 in the terminal with Visual Studio Code. 92 00:04:26,000 --> 00:04:27,000 Now here I'm using the dark theme. 93 00:04:27,000 --> 00:04:30,000 You can change this under preference, this color theme. 94 00:04:30,000 --> 00:04:34,000 Here I am using the Dark+ theme 95 00:04:34,000 --> 00:04:36,000 and I also adjusted the appearance. 96 00:04:36,000 --> 00:04:38,000 You can do that under View, Appearance, 97 00:04:38,000 --> 00:04:40,000 and simply adjust it as you want. 98 00:04:40,000 --> 00:04:43,000 And for example, show or hide the status bar. 99 00:04:43,000 --> 00:04:45,000 I'm hiding it, 100 00:04:45,000 --> 00:04:48,000 but that is something you can configure however you want. 101 00:04:48,000 --> 00:04:50,000 Now regarding extensions, 102 00:04:50,000 --> 00:04:52,000 that's a great feature of Visual Studio Code. 103 00:04:52,000 --> 00:04:55,000 You can install extensions there. 104 00:04:55,000 --> 00:04:57,000 And the only extension that I'm using here 105 00:04:57,000 --> 00:05:00,000 and that I recommend that you install 106 00:05:00,000 --> 00:05:01,000 is the Prettier extension. 107 00:05:01,000 --> 00:05:05,000 You can simply search for Prettier here, 108 00:05:05,000 --> 00:05:07,000 and that's an extension that will help you 109 00:05:07,000 --> 00:05:08,000 with code formatting. 110 00:05:08,000 --> 00:05:12,000 So it's automatically transforming your code to look cleaner 111 00:05:12,000 --> 00:05:16,000 and to be more formatted and structured. 112 00:05:16,000 --> 00:05:18,000 Once you installed that extension, 113 00:05:18,000 --> 00:05:19,000 you just need to make sure 114 00:05:19,000 --> 00:05:22,000 that you go to your keyboard shortcuts 115 00:05:22,000 --> 00:05:26,000 and there, search for Format Document, 116 00:05:26,000 --> 00:05:29,000 and make sure that you have that shortcut set up 117 00:05:29,000 --> 00:05:32,000 because that's a shortcut which I will press all the time 118 00:05:32,000 --> 00:05:36,000 which will then auto-format my code and use Prettier. 119 00:05:36,000 --> 00:05:39,000 And to make sure that I do use Prettier, 120 00:05:39,000 --> 00:05:41,000 under Preferences, Settings, 121 00:05:41,000 --> 00:05:45,000 in your user or workspace, so project-specific settings. 122 00:05:45,000 --> 00:05:49,000 You can also search for format and make sure 123 00:05:49,000 --> 00:05:53,000 that under default formatter, you do pick Prettier here. 124 00:05:53,000 --> 00:05:54,000 Here it is. 125 00:05:56,000 --> 00:05:57,000 So with that all set up, 126 00:05:57,000 --> 00:06:00,000 you will have the same setup as I do, 127 00:06:00,000 --> 00:06:03,000 and that is the setup I will use in this course. 128 00:06:03,000 --> 00:06:06,000 That is the setup we will use throughout all the lectures. 129 00:06:06,000 --> 00:06:10,000 And it is the setup which we'll now use to dig a bit deeper 130 00:06:10,000 --> 00:06:12,000 into this project we just created.