1 00:00:02,000 --> 00:00:03,000 Now to dive in, 2 00:00:03,000 --> 00:00:06,000 I want to start with a couple of pages here. 3 00:00:06,000 --> 00:00:09,000 And for this year, I also got my terminal open. 4 00:00:09,000 --> 00:00:13,000 First of all, we need to install all dependencies though 5 00:00:13,000 --> 00:00:18,000 with npm install and then we can use npm run dev. 6 00:00:18,000 --> 00:00:20,000 And then we'll start the development server, 7 00:00:20,000 --> 00:00:23,000 but of course at the moment I got no pages. 8 00:00:23,000 --> 00:00:25,000 And hence we should add some pages. 9 00:00:25,000 --> 00:00:28,000 And for this demo application for this project 10 00:00:28,000 --> 00:00:32,000 which we're building here, we will need three pages. 11 00:00:32,000 --> 00:00:37,000 A starting page, which shows a list of all meetups. 12 00:00:37,000 --> 00:00:38,000 Then the new meet up page, 13 00:00:38,000 --> 00:00:42,000 which allows us to add a new meetup. 14 00:00:42,000 --> 00:00:44,000 And then the meetup detail page 15 00:00:44,000 --> 00:00:49,000 which allows us to show the details for a selected meetup. 16 00:00:49,000 --> 00:00:51,000 And hence here in the pages folder, 17 00:00:51,000 --> 00:00:55,000 I'll start with the starting page with index.js 18 00:00:55,000 --> 00:00:57,000 directly in the pages folder, 19 00:00:57,000 --> 00:01:01,000 because you learned that index is this special file name 20 00:01:01,000 --> 00:01:04,000 which will be loaded for just slash nothing 21 00:01:04,000 --> 00:01:06,000 in the given sub-folder. 22 00:01:06,000 --> 00:01:08,000 And here we're not in a sub-folder at all, 23 00:01:08,000 --> 00:01:13,000 so index.js will be loaded for our-domain.com slash nothing. 24 00:01:14,000 --> 00:01:15,000 But then we got more pages. 25 00:01:15,000 --> 00:01:19,000 For example, a page for adding a new meetup. 26 00:01:19,000 --> 00:01:22,000 And hence we could add a new meetup.js file 27 00:01:22,000 --> 00:01:27,000 which then would be loaded for our domain slash new meetup. 28 00:01:28,000 --> 00:01:30,000 And you did learn over the last minutes 29 00:01:30,000 --> 00:01:33,000 that we also have an alternative here. 30 00:01:33,000 --> 00:01:35,000 We could also create a new meetup folder 31 00:01:35,000 --> 00:01:38,000 instead of the file, move the file in there, 32 00:01:38,000 --> 00:01:41,000 and then rename it to index.js. 33 00:01:41,000 --> 00:01:45,000 And that would then be loaded in exactly the same way. 34 00:01:45,000 --> 00:01:47,000 It's up to you which approach you prefer, 35 00:01:47,000 --> 00:01:52,000 you need that sub-folder approach if you need nested routes, 36 00:01:52,000 --> 00:01:55,000 but we will not have any nested routes here, 37 00:01:55,000 --> 00:01:58,000 so in this case, it's really up to you. 38 00:01:58,000 --> 00:02:01,000 And I will go for this sub-folder approach here. 39 00:02:01,000 --> 00:02:03,000 But again, it's your choice. 40 00:02:03,000 --> 00:02:06,000 And then we also need this detail page 41 00:02:06,000 --> 00:02:09,000 which we load if a specific meetup was clicked, 42 00:02:09,000 --> 00:02:12,000 and we want to view the details of that meetup. 43 00:02:12,000 --> 00:02:15,000 And for this, we need a dynamic page 44 00:02:15,000 --> 00:02:17,000 because of course we'll have multiple meetups 45 00:02:17,000 --> 00:02:22,000 with different IDs and DID should be part of the URL, 46 00:02:22,000 --> 00:02:25,000 and then when we load the page we want to use that ID 47 00:02:25,000 --> 00:02:29,000 to fetch and to display the appropriate data. 48 00:02:29,000 --> 00:02:31,000 And we also learned how this worked. 49 00:02:31,000 --> 00:02:35,000 We can create a dynamic page with square brackets 50 00:02:35,000 --> 00:02:36,000 and then dot JS, 51 00:02:36,000 --> 00:02:40,000 and then simply use any identifier name of our choice 52 00:02:40,000 --> 00:02:42,000 between the square brackets. 53 00:02:42,000 --> 00:02:45,000 For example, meetup ID. 54 00:02:45,000 --> 00:02:48,000 And here we could also use the sub-folder approach. 55 00:02:48,000 --> 00:02:52,000 It also is available for dynamic pages. 56 00:02:52,000 --> 00:02:55,000 We could also create a folder named meetup ID 57 00:02:55,000 --> 00:02:56,000 between square brackets, 58 00:02:56,000 --> 00:03:01,000 and move that file in there and then it index.js. 59 00:03:01,000 --> 00:03:02,000 And that also works. 60 00:03:02,000 --> 00:03:04,000 That's something we haven't seen before, 61 00:03:04,000 --> 00:03:06,000 and that's why I'm showing it to you here 62 00:03:06,000 --> 00:03:10,000 because it is always important to be aware of the fact 63 00:03:10,000 --> 00:03:14,000 that you can also have dynamic folder names here, 64 00:03:14,000 --> 00:03:17,000 and then create dynamic nested pages if you need them. 65 00:03:17,000 --> 00:03:22,000 Or, like in this case, one single dynamic page. 66 00:03:22,000 --> 00:03:25,000 And the width that we got the page structure we want 67 00:03:25,000 --> 00:03:27,000 with those three pages. 68 00:03:27,000 --> 00:03:31,000 And hence we can now get started working on those pages. 69 00:03:31,000 --> 00:03:34,000 We can fill those components with some live, 70 00:03:34,000 --> 00:03:37,000 and then also step-by-step at data fetching 71 00:03:37,000 --> 00:03:40,000 and learn how NextJS helps us with that.