1 00:00:02,070 --> 00:00:05,260 So now that we know what NextJS is, 2 00:00:05,260 --> 00:00:08,430 and now that we at least have a first idea 3 00:00:08,430 --> 00:00:12,320 of why we might wanna use NextJS, 4 00:00:12,320 --> 00:00:14,000 let's get started with it 5 00:00:14,000 --> 00:00:17,240 and let's create a first NextJS project. 6 00:00:17,240 --> 00:00:20,430 For this, we just need to run one simple command 7 00:00:20,430 --> 00:00:22,980 in the end, this command here, 8 00:00:22,980 --> 00:00:24,470 but to run this command, 9 00:00:24,470 --> 00:00:27,380 we need to have Node.js installed. 10 00:00:27,380 --> 00:00:30,430 Now we're not going to write any Node.js code, 11 00:00:30,430 --> 00:00:32,180 at least not right now. 12 00:00:32,180 --> 00:00:34,810 We will write some basic code later 13 00:00:34,810 --> 00:00:36,410 but we'll not write it right now. 14 00:00:36,410 --> 00:00:41,230 But Node.js ships together with the Node Package Manager 15 00:00:41,230 --> 00:00:42,640 which is a extra tool 16 00:00:42,640 --> 00:00:46,810 which is the defacto standard tool for installing 17 00:00:46,810 --> 00:00:50,800 and managing libraries in JavaScript projects. 18 00:00:50,800 --> 00:00:54,720 And we will use that tool to create the next project. 19 00:00:54,720 --> 00:00:58,490 And that created next project under the hood, 20 00:00:58,490 --> 00:01:01,722 Will also need node.js to execute. 21 00:01:01,722 --> 00:01:03,950 For example, for that built-in 22 00:01:03,950 --> 00:01:08,490 server-side rendering that uses Node.js under the hood. 23 00:01:08,490 --> 00:01:12,150 And for all those reasons, we need to install Node.js 24 00:01:12,150 --> 00:01:15,520 and for that, you can simply visit nodejs.org 25 00:01:15,520 --> 00:01:16,580 and from that page, 26 00:01:16,580 --> 00:01:20,280 you can install the latest version of Node.js, 27 00:01:20,280 --> 00:01:23,240 Whatever that version is when you're viewing that. 28 00:01:23,240 --> 00:01:25,400 Just install the latest version, 29 00:01:25,400 --> 00:01:28,470 simply click on there and download Node.js. 30 00:01:28,470 --> 00:01:31,680 It is available for all major operating systems 31 00:01:31,680 --> 00:01:33,860 and then walk through that installer, 32 00:01:33,860 --> 00:01:36,200 once that download finished. 33 00:01:36,200 --> 00:01:38,600 Now, once you have Node.js installed, 34 00:01:38,600 --> 00:01:41,260 you are ready to run this command 35 00:01:41,260 --> 00:01:42,880 and therefore we can now go 36 00:01:42,880 --> 00:01:47,060 to the terminal to your regular command prompt 37 00:01:47,060 --> 00:01:49,770 which is built into your operating system. 38 00:01:49,770 --> 00:01:53,250 And there you can cd and navigate 39 00:01:53,250 --> 00:01:57,460 into the folder where you want to create your next project. 40 00:01:57,460 --> 00:01:59,880 And then simply run this command, 41 00:01:59,880 --> 00:02:04,620 npx create-next-app. 42 00:02:04,620 --> 00:02:06,750 Run this command by hitting enter 43 00:02:06,750 --> 00:02:09,620 and this will now create a new next project 44 00:02:09,620 --> 00:02:13,920 in that folder where you ran that command. 45 00:02:13,920 --> 00:02:16,510 Now you might be prompted to confirm 46 00:02:16,510 --> 00:02:19,510 that you're installing extra packages 47 00:02:19,510 --> 00:02:21,690 and hence I will confirm this here. 48 00:02:21,690 --> 00:02:24,050 And now it is, will temporarily install 49 00:02:24,050 --> 00:02:25,760 the create-next-app tool, 50 00:02:25,760 --> 00:02:28,640 and then start creating that project. 51 00:02:28,640 --> 00:02:30,020 Now for this, we first of all 52 00:02:30,020 --> 00:02:32,290 need to give this project a name 53 00:02:32,290 --> 00:02:35,200 and I'll just use NextJS-course here 54 00:02:35,200 --> 00:02:36,790 as a name but you can of course, 55 00:02:36,790 --> 00:02:38,690 pick any name you want. 56 00:02:38,690 --> 00:02:41,920 Hit enter and now this project will be created here 57 00:02:41,920 --> 00:02:44,770 and it will set up a base folder 58 00:02:44,770 --> 00:02:48,550 for that project and install all the core dependencies 59 00:02:48,550 --> 00:02:49,933 this project will need. 60 00:02:50,890 --> 00:02:54,180 Now, once it's done, you can run the commands 61 00:02:54,180 --> 00:02:56,310 shown here to start your development server 62 00:02:56,310 --> 00:02:59,290 but I will not yet do that here. 63 00:02:59,290 --> 00:03:03,930 Instead, I now opened this project in visual studio code 64 00:03:03,930 --> 00:03:08,330 the IDE, the editor I'm going to use in this course. 65 00:03:08,330 --> 00:03:11,340 Now you don't have to use visuals to do code. 66 00:03:11,340 --> 00:03:14,370 It is a great IDE for web development though, 67 00:03:14,370 --> 00:03:17,020 it's completely free and it's amazing, 68 00:03:17,020 --> 00:03:18,560 but you can use whatever 69 00:03:18,560 --> 00:03:21,570 your favorite web development IDE is. 70 00:03:21,570 --> 00:03:25,220 If you do want to use the same editor as I do here though, 71 00:03:25,220 --> 00:03:28,237 you can visit code.visualstudio.com. 72 00:03:28,237 --> 00:03:31,580 And from there you can download visual studio code. 73 00:03:31,580 --> 00:03:34,730 It is available for all major operating systems, 74 00:03:34,730 --> 00:03:37,720 simply download the installer and walk through it. 75 00:03:37,720 --> 00:03:40,560 And once you have downloaded and installed it, 76 00:03:40,560 --> 00:03:44,740 you can open that NextJS-course folder, 77 00:03:44,740 --> 00:03:48,600 which we created with the command here in the terminal 78 00:03:48,600 --> 00:03:51,250 with visual studio code. 79 00:03:51,250 --> 00:03:52,880 Now here, I'm using the dark theme. 80 00:03:52,880 --> 00:03:55,790 You can change this under preference as color theme. 81 00:03:55,790 --> 00:03:59,080 Here I am using the dark plus theme, 82 00:03:59,080 --> 00:04:01,500 and I also adjusted the appearance. 83 00:04:01,500 --> 00:04:03,640 You can do that under view appearance 84 00:04:03,640 --> 00:04:05,410 and somebody's adjusted as you want. 85 00:04:05,410 --> 00:04:08,690 And for example, show or hide the status bar, 86 00:04:08,690 --> 00:04:11,720 I'm hiding it but that is something you can configure 87 00:04:11,720 --> 00:04:13,460 however you want. 88 00:04:13,460 --> 00:04:15,140 Now regarding extensions, 89 00:04:15,140 --> 00:04:17,880 that's a great feature of visual studio code. 90 00:04:17,880 --> 00:04:20,040 You can install extension there 91 00:04:20,040 --> 00:04:22,800 and the only extension that I'm using here, 92 00:04:22,800 --> 00:04:24,890 and that I recommend that you install, 93 00:04:24,890 --> 00:04:26,264 is the Prettier extension. 94 00:04:26,264 --> 00:04:30,660 You can simply search for Prettier here 95 00:04:30,660 --> 00:04:32,300 and that's extension that will help you 96 00:04:32,300 --> 00:04:33,830 with code formatting. 97 00:04:33,830 --> 00:04:36,610 So with automatically transforming your code 98 00:04:36,610 --> 00:04:41,010 to look cleaner and to be more formatted and structured. 99 00:04:41,010 --> 00:04:43,080 Once you installed that extension, 100 00:04:43,080 --> 00:04:44,330 you just need to make sure 101 00:04:44,330 --> 00:04:47,310 that you go to your keyboard shortcuts 102 00:04:47,310 --> 00:04:51,400 and there search for format document 103 00:04:51,400 --> 00:04:54,270 and make sure that you have that shortcuts set up 104 00:04:54,270 --> 00:04:55,490 because that's a shortcut 105 00:04:55,490 --> 00:04:57,600 which I will press all the time 106 00:04:57,600 --> 00:05:01,300 which will then auto-format my code and use Prettier. 107 00:05:01,300 --> 00:05:03,920 And to make sure that I do use Prettier, 108 00:05:03,920 --> 00:05:08,550 under preferences settings in your user or work space, 109 00:05:08,550 --> 00:05:10,840 so project specific settings, 110 00:05:10,840 --> 00:05:13,070 you can also search for format 111 00:05:13,070 --> 00:05:15,660 and make sure that under default formatter, 112 00:05:15,660 --> 00:05:18,840 or you do pick Prettier here, 113 00:05:18,840 --> 00:05:19,733 here it is. 114 00:05:21,390 --> 00:05:22,730 So with that all set up, 115 00:05:22,730 --> 00:05:25,480 you will have the same set up as ideal 116 00:05:25,480 --> 00:05:28,260 and that is the set-up I will use in this course. 117 00:05:28,260 --> 00:05:29,930 That is the set-up we will use 118 00:05:29,930 --> 00:05:31,600 throughout all the lectures 119 00:05:31,600 --> 00:05:34,120 and this is the setup which we'll now use 120 00:05:34,120 --> 00:05:37,763 to dig a bit deeper into this project we just created.