So let's now implement
those pages, those routes together.
And for this, of course, we go to this pages folder
and in there we can add a new file.
A new file for our route page, for our home page,
so to say, the index.js file.
This will then, hold the component
that should be loaded, if we visit local host,
or whatever our domain is /nothing.
And therefore, in here, I'll add the HomePage function.
So, a functional component, which I simply name HomePage.
And, of course, we also wanna export this as a default.
We need to do that for Next.js to find that component.
And then, in there, we return the JSX code
that belongs to this component.
And, for the moment, I'll just return a div here
with a h1 tag, where I say The Home Page.
But in this course section,
unlike in the last course section,
we are also going to add more output
and more logic to our application.
So, we'll not stick to such dummy output.
But, for the moment, we will,
and we will continue adding the other routes.
Now, we also need a route for all events
and then, for that slug.
So, for consuming all dynamic segments
and for a single dynamic segment for a single event.
Hence, we can add an events.js file for our events page,
which lists all events or, alternatively,
instead of adding that file
we add an events folder in the pages folder.
And, in that folder, we then add an index.js file
and that's the exact equivalent to adding an events.js file.
And I will go for this approach also
because we'll need that folder later
to set up nested routes for a single event, for example,
because, keep in mind that, for a single event
for that event detail page I want
to have /events/some dynamic segment.
So, for that nested route, like for all nested routes,
we will need this sub folder, this events sub folder.
Otherwise, you won't be able to set up such a route.
Hence, we'll need that events folder anyways,
and, therefore, we can already create it
for the All Events page as well.
So, in there, we add another functional component
and I'll name it AllEventsPage.
Of course, those names are up to you though.
You can name your page components however you want.
But I'll go with this name and then return.
Another div here where I say All Events.
Again, that's just some dummy content.
We'll replace that with actual output and some logic later.
Now, two more routes, two more pages to go.
And the first one will be the page for a single event.
So, when we selected an event for displaying
all the detail information for this event.
Now, we wanna select that event dynamically by ID.
And, therefore, the page should have
a dynamic segment in its URL, so in it's path.
And you'll learn how that works.
We set up a file with square brackets in the file name
and then between the square brackets,
any identifier of our choice.
For example, Id, or simply eventId, whatever you want.
And I'll go for eventId written like this with a capital I
so that I can then later extract that actual event ID
from the router, from the query property,
as you learned it, by that key, so by using that key.
And, hence, in this square bracket eventId file
we add the EventDetailPage and we, of course,
also export that page, the EventDetail page,
and then here, for the moment,
I'll also adjust return a div, where I say Event Detail.
Now, the last page, the last route I wanna add,
therefore is this slug route, so which consumes
all segments, even if that would be multiple segments
after, in this case, events
because I'll create it in the events sub folder.
And, for this, the syntax also is to use square brackets,
but then we also add three dots,
like the spread operator in JavaScript,
or the rest parameters, syntax from JavaScript,
and then any identifier of our choice, for example, slug.
But, again, that's just something
you will see quite a lot, slug.
But you can, of course, use any identifier you want.
Now, you might think that this maybe clashes
with the event ID, but as long as we enter more
than one dynamic parameter after /events, it won't.
And that's exactly how we're going to use that.
If we just have /events/something,
so just one segment after /events,
then the slug will not kick in.
Instead, this eventId route will
then handle such a request, or such a URL in the end,
as you will see throughout this section.
So, therefore, here in this slug file
I'll name this FilteredEventsPage
because here I wanna show a list of filtered events.
And then, we can export this here as well.
And, of course, in the component all the returns
some dummy content here, Filtered Events, like this.
And I did spend a lot of time explaining this,
but these are, of course, some key features of Next.js,
so I want to make sure that we're all
on the same page regarding them.
Now, with all of that, we can start
the development server with npm run dev,
and this will now start it up.
And we can now open the browser
and visit local host 3000, and we see the Home Page.
Now, if you visit local host 3000/events
we see the All Events page,
if I enter /events/ let's say e1, as a dummy event ID,
I see the Event Detail page.
And if we try out this slug concept,
and we try to filter for events that take place in 2021
and then May by adding the segments /2021/05
after events, I see the Filtered Events page.
Of course, it will be our job throughout this section
to make sure that on that Filtered Events page
we then extract the actual segment values
from the URL and then find appropriate events.
But that's exactly part of what we build
throughout this section.
And therefore, with that, we now got
the basic setup we need.
Now, we can gradually start filling that with life.