1 00:00:02,000 --> 00:00:03,000 So let's now implement 2 00:00:03,000 --> 00:00:07,000 those pages, those routes together. 3 00:00:07,000 --> 00:00:10,000 And for this, of course, we go to this pages folder 4 00:00:10,000 --> 00:00:13,000 and in there we can add a new file. 5 00:00:13,000 --> 00:00:17,000 A new file for our route page, for our home page, 6 00:00:17,000 --> 00:00:21,000 so to say, the index.js file. 7 00:00:21,000 --> 00:00:23,000 This will then, hold the component 8 00:00:23,000 --> 00:00:27,000 that should be loaded, if we visit local host, 9 00:00:27,000 --> 00:00:30,000 or whatever our domain is /nothing. 10 00:00:30,000 --> 00:00:34,000 And therefore, in here, I'll add the HomePage function. 11 00:00:34,000 --> 00:00:38,000 So, a functional component, which I simply name HomePage. 12 00:00:38,000 --> 00:00:42,000 And, of course, we also wanna export this as a default. 13 00:00:42,000 --> 00:00:47,000 We need to do that for Next.js to find that component. 14 00:00:47,000 --> 00:00:50,000 And then, in there, we return the JSX code 15 00:00:50,000 --> 00:00:51,000 that belongs to this component. 16 00:00:51,000 --> 00:00:55,000 And, for the moment, I'll just return a div here 17 00:00:55,000 --> 00:00:58,000 with a h1 tag, where I say The Home Page. 18 00:00:58,000 --> 00:01:00,000 But in this course section, 19 00:01:00,000 --> 00:01:02,000 unlike in the last course section, 20 00:01:02,000 --> 00:01:07,000 we are also going to add more output 21 00:01:07,000 --> 00:01:09,000 and more logic to our application. 22 00:01:09,000 --> 00:01:12,000 So, we'll not stick to such dummy output. 23 00:01:12,000 --> 00:01:13,000 But, for the moment, we will, 24 00:01:13,000 --> 00:01:16,000 and we will continue adding the other routes. 25 00:01:16,000 --> 00:01:19,000 Now, we also need a route for all events 26 00:01:19,000 --> 00:01:22,000 and then, for that slug. 27 00:01:22,000 --> 00:01:26,000 So, for consuming all dynamic segments 28 00:01:26,000 --> 00:01:30,000 and for a single dynamic segment for a single event. 29 00:01:31,000 --> 00:01:36,000 Hence, we can add an events.js file for our events page, 30 00:01:37,000 --> 00:01:41,000 which lists all events or, alternatively, 31 00:01:41,000 --> 00:01:43,000 instead of adding that file 32 00:01:43,000 --> 00:01:47,000 we add an events folder in the pages folder. 33 00:01:47,000 --> 00:01:52,000 And, in that folder, we then add an index.js file 34 00:01:52,000 --> 00:01:57,000 and that's the exact equivalent to adding an events.js file. 35 00:01:57,000 --> 00:02:00,000 And I will go for this approach also 36 00:02:00,000 --> 00:02:02,000 because we'll need that folder later 37 00:02:02,000 --> 00:02:07,000 to set up nested routes for a single event, for example, 38 00:02:07,000 --> 00:02:10,000 because, keep in mind that, for a single event 39 00:02:10,000 --> 00:02:13,000 for that event detail page I want 40 00:02:13,000 --> 00:02:17,000 to have /events/some dynamic segment. 41 00:02:17,000 --> 00:02:21,000 So, for that nested route, like for all nested routes, 42 00:02:21,000 --> 00:02:26,000 we will need this sub folder, this events sub folder. 43 00:02:26,000 --> 00:02:29,000 Otherwise, you won't be able to set up such a route. 44 00:02:29,000 --> 00:02:32,000 Hence, we'll need that events folder anyways, 45 00:02:33,000 --> 00:02:35,000 and, therefore, we can already create it 46 00:02:35,000 --> 00:02:38,000 for the All Events page as well. 47 00:02:38,000 --> 00:02:41,000 So, in there, we add another functional component 48 00:02:41,000 --> 00:02:43,000 and I'll name it AllEventsPage. 49 00:02:43,000 --> 00:02:46,000 Of course, those names are up to you though. 50 00:02:46,000 --> 00:02:49,000 You can name your page components however you want. 51 00:02:49,000 --> 00:02:52,000 But I'll go with this name and then return. 52 00:02:52,000 --> 00:02:56,000 Another div here where I say All Events. 53 00:02:57,000 --> 00:02:59,000 Again, that's just some dummy content. 54 00:02:59,000 --> 00:03:04,000 We'll replace that with actual output and some logic later. 55 00:03:04,000 --> 00:03:07,000 Now, two more routes, two more pages to go. 56 00:03:07,000 --> 00:03:11,000 And the first one will be the page for a single event. 57 00:03:11,000 --> 00:03:14,000 So, when we selected an event for displaying 58 00:03:14,000 --> 00:03:17,000 all the detail information for this event. 59 00:03:17,000 --> 00:03:21,000 Now, we wanna select that event dynamically by ID. 60 00:03:21,000 --> 00:03:23,000 And, therefore, the page should have 61 00:03:23,000 --> 00:03:28,000 a dynamic segment in its URL, so in it's path. 62 00:03:28,000 --> 00:03:30,000 And you'll learn how that works. 63 00:03:30,000 --> 00:03:35,000 We set up a file with square brackets in the file name 64 00:03:35,000 --> 00:03:37,000 and then between the square brackets, 65 00:03:37,000 --> 00:03:40,000 any identifier of our choice. 66 00:03:40,000 --> 00:03:45,000 For example, Id, or simply eventId, whatever you want. 67 00:03:47,000 --> 00:03:51,000 And I'll go for eventId written like this with a capital I 68 00:03:51,000 --> 00:03:56,000 so that I can then later extract that actual event ID 69 00:03:56,000 --> 00:03:58,000 from the router, from the query property, 70 00:03:58,000 --> 00:04:02,000 as you learned it, by that key, so by using that key. 71 00:04:03,000 --> 00:04:06,000 And, hence, in this square bracket eventId file 72 00:04:06,000 --> 00:04:10,000 we add the EventDetailPage and we, of course, 73 00:04:13,000 --> 00:04:17,000 also export that page, the EventDetail page, 74 00:04:17,000 --> 00:04:18,000 and then here, for the moment, 75 00:04:18,000 --> 00:04:22,000 I'll also adjust return a div, where I say Event Detail. 76 00:04:25,000 --> 00:04:28,000 Now, the last page, the last route I wanna add, 77 00:04:28,000 --> 00:04:32,000 therefore is this slug route, so which consumes 78 00:04:32,000 --> 00:04:36,000 all segments, even if that would be multiple segments 79 00:04:36,000 --> 00:04:38,000 after, in this case, events 80 00:04:38,000 --> 00:04:42,000 because I'll create it in the events sub folder. 81 00:04:42,000 --> 00:04:47,000 And, for this, the syntax also is to use square brackets, 82 00:04:47,000 --> 00:04:50,000 but then we also add three dots, 83 00:04:50,000 --> 00:04:52,000 like the spread operator in JavaScript, 84 00:04:52,000 --> 00:04:56,000 or the rest parameters, syntax from JavaScript, 85 00:04:56,000 --> 00:05:01,000 and then any identifier of our choice, for example, slug. 86 00:05:01,000 --> 00:05:03,000 But, again, that's just something 87 00:05:03,000 --> 00:05:05,000 you will see quite a lot, slug. 88 00:05:05,000 --> 00:05:08,000 But you can, of course, use any identifier you want. 89 00:05:08,000 --> 00:05:11,000 Now, you might think that this maybe clashes 90 00:05:11,000 --> 00:05:15,000 with the event ID, but as long as we enter more 91 00:05:15,000 --> 00:05:19,000 than one dynamic parameter after /events, it won't. 92 00:05:19,000 --> 00:05:22,000 And that's exactly how we're going to use that. 93 00:05:22,000 --> 00:05:25,000 If we just have /events/something, 94 00:05:25,000 --> 00:05:29,000 so just one segment after /events, 95 00:05:29,000 --> 00:05:31,000 then the slug will not kick in. 96 00:05:31,000 --> 00:05:33,000 Instead, this eventId route will 97 00:05:33,000 --> 00:05:38,000 then handle such a request, or such a URL in the end, 98 00:05:40,000 --> 00:05:43,000 as you will see throughout this section. 99 00:05:43,000 --> 00:05:46,000 So, therefore, here in this slug file 100 00:05:46,000 --> 00:05:48,000 I'll name this FilteredEventsPage 101 00:05:49,000 --> 00:05:54,000 because here I wanna show a list of filtered events. 102 00:05:54,000 --> 00:05:58,000 And then, we can export this here as well. 103 00:05:58,000 --> 00:06:01,000 And, of course, in the component all the returns 104 00:06:01,000 --> 00:06:06,000 some dummy content here, Filtered Events, like this. 105 00:06:07,000 --> 00:06:09,000 And I did spend a lot of time explaining this, 106 00:06:09,000 --> 00:06:13,000 but these are, of course, some key features of Next.js, 107 00:06:13,000 --> 00:06:15,000 so I want to make sure that we're all 108 00:06:15,000 --> 00:06:17,000 on the same page regarding them. 109 00:06:17,000 --> 00:06:20,000 Now, with all of that, we can start 110 00:06:20,000 --> 00:06:23,000 the development server with npm run dev, 111 00:06:23,000 --> 00:06:24,000 and this will now start it up. 112 00:06:24,000 --> 00:06:27,000 And we can now open the browser 113 00:06:27,000 --> 00:06:32,000 and visit local host 3000, and we see the Home Page. 114 00:06:32,000 --> 00:06:36,000 Now, if you visit local host 3000/events 115 00:06:36,000 --> 00:06:38,000 we see the All Events page, 116 00:06:38,000 --> 00:06:43,000 if I enter /events/ let's say e1, as a dummy event ID, 117 00:06:44,000 --> 00:06:47,000 I see the Event Detail page. 118 00:06:47,000 --> 00:06:49,000 And if we try out this slug concept, 119 00:06:51,000 --> 00:06:55,000 and we try to filter for events that take place in 2021 120 00:06:55,000 --> 00:07:00,000 and then May by adding the segments /2021/05 121 00:07:02,000 --> 00:07:06,000 after events, I see the Filtered Events page. 122 00:07:06,000 --> 00:07:10,000 Of course, it will be our job throughout this section 123 00:07:10,000 --> 00:07:13,000 to make sure that on that Filtered Events page 124 00:07:13,000 --> 00:07:16,000 we then extract the actual segment values 125 00:07:16,000 --> 00:07:21,000 from the URL and then find appropriate events. 126 00:07:21,000 --> 00:07:23,000 But that's exactly part of what we build 127 00:07:23,000 --> 00:07:26,000 throughout this section. 128 00:07:26,000 --> 00:07:28,000 And therefore, with that, we now got 129 00:07:28,000 --> 00:07:29,000 the basic setup we need. 130 00:07:29,000 --> 00:07:33,000 Now, we can gradually start filling that with life.