All language subtitles for 003 Setting Up The Main Pages_Downloadly.ir_en

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.