1 00:00:02,090 --> 00:00:05,720 So let's start setting up a Next.js project. 2 00:00:05,720 --> 00:00:11,860 You can find all the instructions on that Github page and that is a great place to dive deeper. 3 00:00:12,200 --> 00:00:17,360 As you can see there, Next.js and the latest version at the point of time I'm recording this requires 4 00:00:17,360 --> 00:00:23,480 React 16 which under the hood introduced some breaking changes and which is the version we used throughout the 5 00:00:23,480 --> 00:00:24,770 course. 6 00:00:24,770 --> 00:00:28,010 So we're fine, we'll be using that version here too 7 00:00:28,370 --> 00:00:33,980 and now let's install Next.js, this package with this command. As you see, 8 00:00:33,980 --> 00:00:40,070 you also still installed React and React DOM. Now to run this, you need an empty project 9 00:00:40,130 --> 00:00:43,070 and here I got one loaded in my IDE already, 10 00:00:43,130 --> 00:00:47,410 the only thing I have in here is a gitignore file because I'll be using Git. Now 11 00:00:47,450 --> 00:00:53,570 first of all to be able to run npm commands, we need to put this project under control of npm. 12 00:00:53,600 --> 00:00:59,000 You do this by running npm init, then you are asked a couple of questions which you can simply answer 13 00:00:59,000 --> 00:01:00,900 with yes by just hitting enter. 14 00:01:00,980 --> 00:01:05,600 Once you went through all these questions, you get a package.json file which is used to manage the 15 00:01:05,600 --> 00:01:06,740 dependencies. 16 00:01:06,740 --> 00:01:12,890 I do talk about creating this file in a bit more detail in the module where we create our own project 17 00:01:12,890 --> 00:01:14,450 setup from scratch. 18 00:01:14,450 --> 00:01:20,660 Now we can run the command you saw on the Github page here, npm install --save with these three 19 00:01:20,660 --> 00:01:21,450 packages, 20 00:01:21,510 --> 00:01:24,200 Next, React and React DOM 21 00:01:24,380 --> 00:01:31,190 because Next.js is a library building up on React, it gives you extra features but behind the scenes 22 00:01:31,460 --> 00:01:39,170 or also from a code perspective what you're going to write, it's still all React. Once this command finished 23 00:01:39,170 --> 00:01:42,650 and all these packages are installed in their latest versions, 24 00:01:42,770 --> 00:01:46,670 we can go back to that Github repository to find more instructions. 25 00:01:46,670 --> 00:01:50,370 We should now add this scripts section to package.json, 26 00:01:50,690 --> 00:01:56,810 so let's do this. In the package.json file, we actually have a script section, we can replace it with 27 00:01:56,810 --> 00:02:06,410 the one we just grabbed from our Github file here, so scripts should be added like this. 28 00:02:06,410 --> 00:02:08,480 With that, we can start using it 29 00:02:08,480 --> 00:02:11,090 and now we have that important file system thing 30 00:02:11,150 --> 00:02:15,920 I was talking about. In Next.js, the file system is our main API, 31 00:02:15,920 --> 00:02:24,140 we don't use React router with Next.js to create routes and allow the user to visit /auth/user 32 00:02:24,140 --> 00:02:25,730 and so on, 33 00:02:25,730 --> 00:02:34,310 instead we create folders and files to reflect our URLs in the file system 34 00:02:34,310 --> 00:02:41,930 and Next.js, the package will automatically pass that and use its own internal router to handle all the 35 00:02:41,930 --> 00:02:42,910 heavy lifting. 36 00:02:42,950 --> 00:02:52,020 Now along the way, it pre-renders the content we load as pages on the server, it automatically 37 00:02:52,020 --> 00:02:58,670 code splits, so lazy loads that, all of that out of the box without us configuring anything, 38 00:02:58,700 --> 00:03:04,190 that is why Next is such a great package and could be worth a look in your next project. 39 00:03:04,220 --> 00:03:10,910 A lot of stuff is just working out of the box there at the price of having to keep a certain file structure, 40 00:03:11,570 --> 00:03:15,340 that file structure is mostly about that pages folder, 41 00:03:15,740 --> 00:03:21,740 let's create it. You create it directly in the root folder next to node modules and the other files here, 42 00:03:21,860 --> 00:03:27,470 so there you create a new folder, pages and in there you now create your Javascript files which will 43 00:03:27,470 --> 00:03:34,710 be React components which will hold and export React components and these file names 44 00:03:34,800 --> 00:03:42,320 now define the different paths you have. You can also have a sub-folder like auth there and in there, add for example 45 00:03:42,320 --> 00:03:50,360 user.js, you would reach this file at your domain/auth/user. If you name this is index.js, you 46 00:03:50,360 --> 00:03:56,240 would reach it at /auth. Let's also add an index.js file under the pages folder. 47 00:03:56,240 --> 00:04:02,060 Now we have something like example.com/ and would reach that file and /auth and would reach 48 00:04:02,060 --> 00:04:02,990 that file. 49 00:04:02,990 --> 00:04:08,120 Now let's add a component in both and typically here, you use functional components that don't manage 50 00:04:08,120 --> 00:04:13,160 state, so stateless components but you can also add class-based components with the state keyword or 51 00:04:13,160 --> 00:04:16,090 functional components with the useState hook here, 52 00:04:16,130 --> 00:04:24,380 so let's create a functional one here. I'll name this index page, the name is up to you though and you know 53 00:04:24,380 --> 00:04:28,360 that syntax here where you could receive props return something, 54 00:04:28,370 --> 00:04:32,290 now what I'll do is I'll import React from React, 55 00:04:32,300 --> 00:04:37,580 so just like you learned in this course, that doesn't change because we're still using JSX here, 56 00:04:37,580 --> 00:04:42,860 well not yet but we'll do so in a second and I export index page as a default, 57 00:04:42,860 --> 00:04:48,770 that's important you still need to export this otherwise Next.js can't do anything with that. 58 00:04:48,770 --> 00:05:01,170 So now let's simply add some code here like a div where we say h1, the main page, like this. Now I'll 59 00:05:01,180 --> 00:05:03,780 copy all that code and put it into the other index.js 60 00:05:03,770 --> 00:05:12,170 file, I'll name this auth index page and of course therefore export this constant and there I'll say 61 00:05:12,190 --> 00:05:14,770 the auth index page. 62 00:05:14,770 --> 00:05:19,820 Now let's save that and now let's execute one of the scripts we added, dev. 63 00:05:19,870 --> 00:05:27,430 Now if you run npm run dev, this will spin up a development server, building your application and server 64 00:05:27,430 --> 00:05:31,840 side rendering it, also giving you stuff like hot reloading, so 65 00:05:31,840 --> 00:05:38,350 a really nice development environment. If you now go back to the browser, you can actually load this in a new tab 66 00:05:39,310 --> 00:05:46,200 under http://localhost:3000, there you should see your page and if you now go to /auth, you'll 67 00:05:46,200 --> 00:05:48,000 see the auth index page. 68 00:05:48,100 --> 00:05:54,820 So without us setting up any routing, we can load these two different components as pages and as I said, 69 00:05:54,820 --> 00:05:57,690 these components doesn't have to be functional components, 70 00:05:57,880 --> 00:06:00,040 they could be class-based components too.