So for filling those pages with life,
I will start with that starting page.
So with index.js in the pages folder
with this index.js file.
In there, we can add our component
for example, the homepage component.
And of course also exports that,
that's always important.
And then we wanna return the JSX code
that defines this component,
and that therefore defines what should show up on the page.
And here, what should show up in the end
is our meetup list component.
And that's a component that wants a meetups prop here
which holds a list of meetups,
which we then map into a list of JSX elements.
Where every meetup needs to have an ID,
an image, a title, and an address.
And hence, when we use meetup lists in our page component
we need to make sure that we do provide
that meetups prop to it.
It's also worth noting that meetup list
like meetup item and so on,
is a regular React component.
It is however stored in a components' folder,
not in a pages folder.
Now that folder name is up to you.
The only reserved name in the end
is the page's folder name.
You can name your other folders however you want.
I named it components though,
because I do store React components in there.
But the important difference to the page components is
that those components stored in there
will not be loaded as pages automatically.
Instead, we can simply use them
in the JSX code of other components,
including page components.
So we can include the meetup list component
on our main page here, on the homepage.
Simply by going to that homepage component
and importing meetup lists there
from going up one level components,
meetups, meetup list.
So I import this component from this file
and then we can use it here.
And hence here we can, for example,
output meetup lists like this
and then set this meetups prop
which this component expects.
And for the moment we can then construct
some dummy meetups here,
later we'll be able to create
and store our own meetups in a database.
For the moment let's use some dummy meetups.
And that actually should be an array,
an array of meetup items where every item has an ID,
for example M1 for the first meetup,
where every meetup then has a title like a first meetup,
where every meetup then has an image.
And for this here, I'm using an image from Wikipedia
which is not taken by me
but which instead was taken by Tomas Wolf
to whom I therefore wanna give due credits.
So this image is taken by him.
And I'll just grab that image here,
grab the URL to that image
because we're not going to implement file upload here
and use that here as an image URL.
Now, every meetup should then also have an address
because that's another piece of data
which we extract in the meetup list component here.
So we wanna have that address field here as well.
And I'll set this to some address 5,
12345, Some City.
And we can also add a description
even though we don't need that yet, but I will add it here.
A description with, "this is our first meetup."
And now we can of course replicate this.
So duplicate this meetup
and give the second one an idea of M2
and then name it as second meetup,
and this is a second meetup.
And maybe change the address
and use a different image as well if you want to.
I'll stick to the same one.
And then we can pass this dummy meetups array
into this meetups prop of the meetup list component.
And that's all standard React.
There's nothing NextJS specific about that.
The only NextJS specific part here
is that we're in a special component
which is special because it's in such a page file.
Other than that, it's a regular React component.
And if we now save that,
if we save this and restart our development server here
because it crashed, because I had no page content initially.
If we visit local host 3000
we should see this on the screen.
This is not the finished look, but this shows that it works
and that our first page has loaded successfully.
And we're using another React component in that page,
a component which is not a page component,
that is also worth pointing out.
And with that, we got this page in place.
Let's now also work on that new meetup page
and let's make sure we render some content here as well.