1 00:00:02,000 --> 00:00:04,000 Now the question is how do we get started 2 00:00:04,000 --> 00:00:05,000 with this project though? 3 00:00:05,000 --> 00:00:07,000 And there are different ways 4 00:00:07,000 --> 00:00:10,000 it's of course, up to you, which approach you prefer, 5 00:00:10,000 --> 00:00:14,000 but I personally like to get started with my pages 6 00:00:14,000 --> 00:00:17,000 that gives the project a general structure, 7 00:00:17,000 --> 00:00:19,000 and I can then plan my other components 8 00:00:19,000 --> 00:00:21,000 around those pages which we need. 9 00:00:21,000 --> 00:00:26,000 So I'll start in this pages folder and here for this block, 10 00:00:26,000 --> 00:00:27,000 we need a couple of pages. 11 00:00:27,000 --> 00:00:29,000 We need the starting page, 12 00:00:29,000 --> 00:00:32,000 which shows the featured blog posts 13 00:00:32,000 --> 00:00:34,000 and our little welcome screen. 14 00:00:34,000 --> 00:00:36,000 We need the contact page, 15 00:00:36,000 --> 00:00:40,000 which shows that form users can fill out. 16 00:00:40,000 --> 00:00:44,000 We need the page for all the blog posts 17 00:00:44,000 --> 00:00:48,000 and we need the individual blog post page. 18 00:00:48,000 --> 00:00:50,000 And therefore in the pages folder, 19 00:00:50,000 --> 00:00:52,000 I'll start with the starting page 20 00:00:52,000 --> 00:00:56,000 by adding an index.js file in the pages folder. 21 00:00:56,000 --> 00:01:01,000 Now in there, we can create our homepage component function 22 00:01:01,000 --> 00:01:05,000 and export that as a default here, like this. 23 00:01:05,000 --> 00:01:07,000 And I'll copy that basic code 24 00:01:07,000 --> 00:01:10,000 because I'll create functions in the same way 25 00:01:10,000 --> 00:01:12,000 in the other pages. 26 00:01:12,000 --> 00:01:16,000 And for example, in the contact page, we also need that 27 00:01:16,000 --> 00:01:19,000 and hence we can add a contact.js file 28 00:01:19,000 --> 00:01:21,000 here in the pages folder. 29 00:01:21,000 --> 00:01:23,000 Now you'll learnt that the alternative 30 00:01:23,000 --> 00:01:25,000 would be to add a contact folder 31 00:01:25,000 --> 00:01:28,000 with the index.js file in there. 32 00:01:28,000 --> 00:01:30,000 It's up to you, which approach you prefer. 33 00:01:30,000 --> 00:01:33,000 I will go for the context for the contact.js file 34 00:01:33,000 --> 00:01:37,000 and just add my component in there, 35 00:01:37,000 --> 00:01:40,000 the contact page, like this. 36 00:01:42,000 --> 00:01:45,000 Then we also have our posts specific pages. 37 00:01:45,000 --> 00:01:47,000 And for that I'll create a sub folder 38 00:01:47,000 --> 00:01:50,000 because there I'll also need a nested route 39 00:01:50,000 --> 00:01:53,000 with a dynamic segment. 40 00:01:53,000 --> 00:01:55,000 However, I'll start with a different page, 41 00:01:55,000 --> 00:01:58,000 a different route, and that's the all posts page 42 00:01:58,000 --> 00:02:00,000 for this we could add a posts folder 43 00:02:00,000 --> 00:02:03,000 and then an index.js file in there. 44 00:02:03,000 --> 00:02:08,000 And that page will then be loaded for requests targeting 45 00:02:08,000 --> 00:02:12,000 our domain slash posts slash nothing. 46 00:02:12,000 --> 00:02:17,000 So here we have the all posts page, like this. 47 00:02:20,000 --> 00:02:23,000 Then we have the page for a single post. 48 00:02:23,000 --> 00:02:25,000 So when we click on a post, 49 00:02:25,000 --> 00:02:28,000 the page that shows that single post 50 00:02:28,000 --> 00:02:30,000 and that page is dynamic. 51 00:02:30,000 --> 00:02:33,000 It should have a dynamic parameter in the URL, 52 00:02:34,000 --> 00:02:39,000 which identifies that post, something like the post ID. 53 00:02:39,000 --> 00:02:42,000 And therefore we could add id.js file 54 00:02:42,000 --> 00:02:44,000 with id in square brackets 55 00:02:44,000 --> 00:02:48,000 because you'll learnt that this sets up a dynamic page 56 00:02:48,000 --> 00:02:52,000 in next.js which is loaded for different requests 57 00:02:52,000 --> 00:02:55,000 with different IDs in the URL. 58 00:02:55,000 --> 00:02:58,000 And we can then extract the concrete value 59 00:02:58,000 --> 00:03:00,000 that was provided for a given request 60 00:03:00,000 --> 00:03:03,000 from inside that page. 61 00:03:03,000 --> 00:03:07,000 That would work, but I don't wanna work with an ID here. 62 00:03:07,000 --> 00:03:09,000 Now, of course the identifier name here 63 00:03:09,000 --> 00:03:10,000 is totally up to you, 64 00:03:10,000 --> 00:03:13,000 but you should name it such that it reflects 65 00:03:13,000 --> 00:03:17,000 which kind of value you'll extract. 66 00:03:17,000 --> 00:03:21,000 And I don't want an ID here because if we had an ID, 67 00:03:21,000 --> 00:03:22,000 if we do that for a second, 68 00:03:22,000 --> 00:03:25,000 then we would load a single post 69 00:03:25,000 --> 00:03:30,000 for something like slash post slash p1, p2, p3 and so on. 70 00:03:31,000 --> 00:03:34,000 If p1, p2, p3 are our IDs. 71 00:03:34,000 --> 00:03:36,000 And whilst this would work, 72 00:03:36,000 --> 00:03:39,000 it's not very human readable 73 00:03:39,000 --> 00:03:41,000 and also not search engine friendly. 74 00:03:42,000 --> 00:03:45,000 It would be better to have URLs 75 00:03:45,000 --> 00:03:50,000 like /posts/getting-started-with-nextjs. 76 00:03:51,000 --> 00:03:54,000 If our URL would look something like this. 77 00:03:54,000 --> 00:03:58,000 Now, this thing here, is called a slug. 78 00:03:58,000 --> 00:04:00,000 That's what we typically call a slug. 79 00:04:00,000 --> 00:04:02,000 It's also a unique identifier, 80 00:04:02,000 --> 00:04:05,000 we could call it a unique ID therefore 81 00:04:05,000 --> 00:04:07,000 but it is called a slug 82 00:04:07,000 --> 00:04:09,000 and it's basically a human readable sentence 83 00:04:09,000 --> 00:04:12,000 without white space, without special characters. 84 00:04:12,000 --> 00:04:16,000 Simply with words separated by dashes. 85 00:04:16,000 --> 00:04:21,000 And hence here, I want to extract such a slug from my URL 86 00:04:23,000 --> 00:04:27,000 and I expect that I do get these slug identifiers 87 00:04:27,000 --> 00:04:32,000 for the individual posts to have these human readable 88 00:04:32,000 --> 00:04:37,000 and search engine friendly URLs in the end. 89 00:04:37,000 --> 00:04:41,000 That is then the single post page 90 00:04:41,000 --> 00:04:44,000 or the post detailed page. 91 00:04:44,000 --> 00:04:45,000 However you wanna call it. 92 00:04:47,000 --> 00:04:52,000 Now, these are the four main pages which this project needs. 93 00:04:52,000 --> 00:04:56,000 Of course, definitely feel free to add more pages. 94 00:04:56,000 --> 00:04:59,000 It's also your project after all, 95 00:04:59,000 --> 00:05:01,000 and you can enhance it however you want, 96 00:05:01,000 --> 00:05:04,000 but these are the four pages 97 00:05:04,000 --> 00:05:08,000 with which I wanna get started in this project here.