Now that was a lot of talking
about getStaticProps and getServerSideProps.
But these are two key concepts,
two key functions built into next JS,
which you need all the time.
As you'll see in my full course, for example
when we work on that full block project,
we use those functions everywhere.
They are super important.
And hence, let's also use them
for the MeetupDetail page now.
For the new Meetup page, as explained earlier
we don't need them because here we don't need any data
and therefore there is no need to add getStaticProps.
It's really only there to fetch data
for the pre-generated page
if that page needs any data
and therefore we don't need it here
but on the MeetupDetail page of course.
We do have data that is needed
for the moment hard-coded data, but that will change.
And hence, here on MeetupDetails,
we also want to use getStaticProps or getServerSideProps.
Now, which one is better?
It depends on how often your data changes
and if you need access to the request object.
And here it's probably fair to assume
that the meetupData does not change very often.
Indeed this app doesn't even have a feature
for changing the meetupData.
We can only add Meetups
but even if it would have a change feature,
it would probably not be the case
that a Meetup changes multiple times every second.
And therefore, for to MeetupDetails
I would argue that again,
getStaticProps is better than getServerSideProps.
So here we export getStaticProps
and we can turn it into an async function
if we want to use async await.
And then here we could fetch the data for a single meetup.
And then we can of course return as object with the props.
And here we could have our meetupData prop
or however you want to name it,
which could again be a nested object
where we then have this data here,
so where we have that image.
So we have image set to the string
where we have ID if we needed, M1.
Where we have the title,
First Meetup here.
Where we have the address and that's this address
and where we then also have the description here,
this description.
That could be the props data
which we send to this component function.
But here we'll actually have a slight problem.
Keep in mind that this is a dynamic page.
So when we reach out to an API to fetch the data
for a single meetup,
we need a way of identifying that meetup.
We need its ID for example.
Now the ID thankfully is encoded into URL.
And therefore, we did learn
that we can use stead use router hook to get access
to this router object and then use the query property there.
That's what we did earlier in this course.
But the problem with that is
that the use router hook can only be used
in the component function, not in geStaticProps.
That's not a function where you can use react hooks.
So we can't get to the meetup ID
from the URL with help of use router in here.
But we also don't need to.
Because you might remember this context parameter,
which I mentioned.
I showed it to you on getServerSideProps,
but I mentioned that it also actually exists
on getStaticProps.
Now, when we accept it on getStaticProps,
context will not hold request and response,
but it will, for example, have a parans key.
So there will be context.parans,
and that will be an object where our identifiers
between the square brackets will be properties
and the values will be the actual values
encoded in the URL.
So our meetup ID, for example, could be accessed
with context.parans.meetupid.
Meetup ID because that's the identifier I have
between the square brackets.
And that would then be the concrete meetup ID
for which we're displaying this meetup.
I can console log this here inside of getStaticProps
so that we can see that this really works.
And then it's this meetup ID, which we could set as ID here
if we want to expose it to the component function.
With that if we saved this
and visit the detailed page of a single meetup,
we get an error though, getStaticProps is required.
Now, what's this error about?