So now we also execute server-side code
in getStaticProps and I can't emphasize enough
that this is a standard way of doing it.
This code will not end up in the client-side bundle.
Your credentials will not be exposed,
the bundle will not be bloated.
This code will execute when this page is pre-generated.
Now, for the MeetupDetail page,
we also want to fetch data from the database now
for a specific meetup that was selected
but also for determining which paths should be generated.
So which meetup IDs should be supported
because after all,
we do only have a limited list of meetups
with specific IDs here.
So we wanna pre-generate all the paths
for all those IDs which we have here.
And therefore, we will again need
to connect to MongoDB.
So for this, from index.js,
I will again copy this connection code
and again, you could refactor therefore
if you wanted to avoid duplication.
And I will import MongoClient here
from mongodb like this
in the meetupId index.js file
and then here we can start with getStaticPaths.
In there, I wanna connect to my database
and get access to the meetupsCollection
and then now here I wanna get all the meetup data.
So for this, I get my meetups
by again awaiting meetupsCollection.find.
Find gives me access to all the meetups.
Now, actually here I'm only interested in the IDs
and therefore we can tweak find
and pass an empty object as a first argument.
Here we could define our filter criteria
if we wanna not find all documents
but filter for certain field values.
But I do wanna find all here.
Hence we use a empty object,
which means give me all the objects.
I have no filter criteria
but then we can pass a second argument
where we can define which fields should be extracted
for every document.
And by default, all the fields will be returned.
So all the field values, title, image and so on
but if we're only interested in the ID,
we can also add _id here
and set this to one,
which means only include the ID
but no other field values.
And with that, we're only fetching the IDs.
So we fetch the document objects
but they each will only contain the ID, nothing else.
Now again, we should call toArray here
to convert this to a JavaScript array of objects.
And now we got our meetups here
and now we can generate the paths dynamically.
Instead of hard coding this array,
we can use meetups here
and then map every meetup item,
which is a document with an id
into an object, because paths should be an array of objects,
where every object has this params key
just as we have it down there.
And then we have a nested object in there
where we define our meetupId values.
And the values for meetupId should now be our IDs here.
So here we can then access meetup,
so this parameter, which map gives us automatically,
._id.toString, like that.
And now get rid of this array here.
With that, we're generating our array of paths dynamically.
And as a result, if I now save this,
if we reload the starting page,
if we click on Show Details,
we're taken to the page for this specific object,
for this specific meetup.
And you'll see this cryptic ID here,
which is this autogenerated ID MongoDB generated for us.
So that's working.
But we're not yet fetching the data dynamically here.
I wanna do that as well.
For this, first of all,
I'll close the connection here.
It isn't a bad idea to do that once we're done
and then I'll copy this code
from getStaticPaths and add it here
after we got the meetupId instead of logging the ID.
I'll again connect and get access to the collection.
Again, we could outsource this into a function
if we wanted to.
And then here, I want to get access to a single meetup,
not to all the meetups, just a single meetup.
So I want to get access to my selectedMeetup here
and we do this by using the meetupsCollection
and then using the the findOne method.
findOne finds one single document.
And to findOne, we need to pass an object
where we define how to filter,
how to search for that document.
On this object, you can pass your field names,
like title, image, address or description as keys
and then the values for which you wanna search as values.
So we could pass title: A First Meetup as a key-value pair
into this object here
to find this first meetup where the title is A First Meetup.
Now, here we don't wanna search by title
but instead by ID.
So I wanna make sure that _id,
the automatically added and generated ID field,
has a value of meetupId, so this meetupId,
which we extract from the params up there.
This then finds us this single meetup.
This returns a promise because it's an asynchronous task
and hence we should await this
and make sure that we added async in front of the function.
Oops, and with that we got the selectedMeetup eventually.
And now it's the selectedMeetup,
which I return here as meetupData, like this.
And then if we do that and save everything,
if I reload this meetup here,
it should load successfully
and it should display all the data.
Now, at the moment, the data I'm showing here, however,
is still hard coded in the JSX code
and now it's finally time to use our props data here.
So the actual fetch data in the JSX code as well.
For this, we're exposing the meetupData prop
to the component and hence, here we should accept props
and use that data here.
So that for image, I'm passing in props.image
and for the title, we pass in props.title and so on.
Same for the address.
That's props.address.
And for description, it's props.description.
And actually not props dot but props.meetupData dot
because we have that meetupData prop,
this prop which holds the meetup item, the meetup object.
So we need to drill into that meetupData object first
before we can access image, title, address and description.
Now, once we did all of that,
there's one other thing we need to do though,
which I just noticed.
Here for findOne, I'm looking for an id,
which is equal to the id I'm getting out
of my URL but that, of course, will be a string.
Keep in mind that in MongoDB actually,
our IDs are these strange object ID things.
To ensure that we can correctly look for a specific ID,
we need to convert it from string
to such a object ID thing
and for this, from MongoDB,
you should import ObjectId like this
with a lowercase D at the end.
And wrap your string with that.
So down here, wrap ObjectId around meetupId
and this will convert this string
into such a ObjectId object.
And once that is done,
we also wanna go to selectedMeetup
and make sure that there we convert this id,
this _id field back to a string
because otherwise, we'll get that serialization error
we saw before.
So for this, I'll set meetupData actually to an object
where I do add an id field,
which is equal to selectedMeetup._id.toString
and where I then add all the other data,
like selectedMeetup.title,
then the address, which is selectedMeetup.address.
Then the image, which is selectedMeetup.image
and then also last but not least,
the description, which is selectedMeetup.description.
And with all that done, if we now save this,
if you reload a single meetup page,
you see the data for that single meetup.
And that works for all the meetups now.
And now these meetup detail pages
are pre-rendered on the server dynamically
with our code being active
and with our code establishing that database connection
and fetching the data from there.