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.