Original subtitles

Now to dive in,

I want to start with a couple of pages here.

And for this year, I also got my terminal open.

First of all, we need to install all dependencies though

with npm install and then we can use npm run dev.

And then we'll start the development server,

but of course at the moment I got no pages.

And hence we should add some pages.

And for this demo application for this project

which we're building here, we will need three pages.

A starting page, which shows a list of all meetups.

Then the new meet up page,

which allows us to add a new meetup.

And then the meetup detail page

which allows us to show the details for a selected meetup.

And hence here in the pages folder,

I'll start with the starting page with index.js

directly in the pages folder,

because you learned that index is this special file name

which will be loaded for just slash nothing

in the given sub-folder.

And here we're not in a sub-folder at all,

so index.js will be loaded for our-domain.com slash nothing.

But then we got more pages.

For example, a page for adding a new meetup.

And hence we could add a new meetup.js file

which then would be loaded for our domain slash new meetup.

And you did learn over the last minutes

that we also have an alternative here.

We could also create a new meetup folder

instead of the file, move the file in there,

and then rename it to index.js.

And that would then be loaded in exactly the same way.

It's up to you which approach you prefer,

you need that sub-folder approach if you need nested routes,

but we will not have any nested routes here,

so in this case, it's really up to you.

And I will go for this sub-folder approach here.

But again, it's your choice.

And then we also need this detail page

which we load if a specific meetup was clicked,

and we want to view the details of that meetup.

And for this, we need a dynamic page

because of course we'll have multiple meetups

with different IDs and DID should be part of the URL,

and then when we load the page we want to use that ID

to fetch and to display the appropriate data.

And we also learned how this worked.

We can create a dynamic page with square brackets

and then dot JS,

and then simply use any identifier name of our choice

between the square brackets.

For example, meetup ID.

And here we could also use the sub-folder approach.

It also is available for dynamic pages.

We could also create a folder named meetup ID

between square brackets,

and move that file in there and then it index.js.

And that also works.

That's something we haven't seen before,

and that's why I'm showing it to you here

because it is always important to be aware of the fact

that you can also have dynamic folder names here,

and then create dynamic nested pages if you need them.

Or, like in this case, one single dynamic page.

And the width that we got the page structure we want

with those three pages.

And hence we can now get started working on those pages.

We can fill those components with some live,

and then also step-by-step at data fetching

and learn how NextJS helps us with that.