Now the starting page is working.
What about the event detail page here?
This page currently still fetches it's data
from the dummy-data file.
It's this eventId this dynamic page here.
And of course here
we now also want to get our concrete event
the individual event for which we wanna display data
we wanna get that from our firebase backend.
Now for this, first of all, we can go to dummy-data
and copy the getEventById function
and add this to the api-utiljs file.
Export it there but turn it into an async function
and instead of DUMMY_EVENTS here
we again wanna use AllEvents.
So just as in getfeaturedevents,
I'll get access to all events await this
and then find my single event on the,
well, overall events which I got here.
Now that's step one.
Step two is to use that in the dynamic event ID page.
And again, the question is
how do we wanna fetch the data?
Now we could fetch it on the client side
but that wouldn't make more sense here
than it does on the homepage.
It's still unlikely that it changes a lot.
And this page for an individual event is even more important
when it comes to search engines than the starting page.
After all it's the single event page
that has all the details for an event.
So this should absolutely be crawlable.
We definitely wanna have some data on this page
right from the start.
So therefore here,
I definitely also want to pre-render this page with data.
Again, the question is static generation
with get static props
or server-side rendering with get service props.
And as often the answer probably is get static props.
Because this again is not really a page
where we need users specific data
which changes all the time or anything like that.
So, pre-generating, it sounds good to me.
So in this event, ID page here in this page file
we therefore also wanna export the async
getStaticProps function again.
Here however, we'll need the context
because we'll need to know
for which specific event Id we wanna load the event data.
So we can get the event ID from context
and they are the params and then their event Id
because this here is the identifier
I encoded in the file name.
This gives us access to the event Id.
Once we have the event Id,
we wanna fetch these single event
and therefore I remove the import of getEventById
from dummy-data
and instead import getEventsById from going up one level
and another level helpers/api-util.
So from this api-util file,
which sends requests to Firebase.
And now we wanna use this in getStaticProps
to get that single event.
For this we await getEventById
because that's an async function returning a promise
and we still pass the event Id to that function.
And then here in the end we'll get that event
for which we're looking.
Now, once we get to that,
we can return our object as we always do with the props key
and then there, my props object will have an event
or selected event key totally up to you
which holds that single event, which was identified here.
So now inside of my component function
we can now work with that selected event prop.
So we should accept props here,
and then my event here,
which I use throughout this component
is actually props.selected event.
Now, in this component function
we now no longer need to use the router,
they useRouter hook because we no longer need access
to the event Id in there
because data fetching doesn't happen
inside of this component function anymore.
So the concrete event Id doesn't matter to us here,
and if it would,
we could get it from this selected event prop
because that holds the entire event, which we identified.
So we no longer need useRouter here
and we can therefore get rid of the import of course.
Now with that, it wouldn't work though.
And do you remember why?
Because this is a dynamic page
and there is an infinite amount of possible pages
that could be generated.
Next.js doesn't know which event Ids it should pre generate.
And as a developer,
we typically also don't know that in advance.
If we have a dynamic page
maybe with user generated content,
then as a developer, we also can't anticipate
which Ids we'll eventually have.
That's why we need another function here.
We need to also export another async function,
the getStaticPaths function.
This function will tell Next.js for which parameter values.
So for which event Ids, it should pre-render this page
and for which Ids, it shoould therefore call
getStaticProps and this component function.
For this in getStaticPaths, we have to return an object,
an object with a paths key
which holds an array full of objects
where we specify our param values.
So the first page which we wanna generate for example,
should have a value for the event Id param of e1
that's something we could add here.
And now this single page for the event with e1 as an Id,
would be pre-generated.
But as I just said,
we typically don't know all Ids in advance.
So that's typically not what we wanna do.
Instead, we wanna fetch the event Ids here
dynamically as well, and derive this pops array dynamically.
So for this, what we can do
is we can go to api-util and use, getAllEvents,
to get all events,
then extract their Ids
and derive the to be generated paths from that.
So for this, I'll go back here to event Id
and from the helpers/api-util file,
I will also import getAllEvents.
And now here in getStaticPaths,
I will have all my events here by a waiting, getAllEvents
and then all construct my paths array
by taking my events and mapping this array of events
into an array of objects
where every object has a params key
which holds another object
where I then set the event Id to events.Id event.
Event is the single event
for which we're going through that events array here.
So now paths is exactly the kind of array we need
and hence I'll set paths: paths here.
With that if we save this all,
if we reload this events page for event e2,
we get an error regarding the fallback key.
And you might remember that we need to add this fallback key
to let Next.js know
if there are more possible event Id values
which we did not pre generate here.
So which it should then maybe generate dynamically
on the fly, or if we did specify all possible paths here.
Now here, I did specify all paths
so we can set fall back to false
letting Next.js know
that if we try to load this page for an unknown Id,
it should show the 404 page.
And with that, if we set this and reload again,
now it correctly loads the page for e2
and that works for the April event as well.
Now, if I try e5, which is an invalid Id,
I get the 404 page instead, which also makes sense.
So with that we're also handling this dynamic page
successfully here.
Before we now also dive into the slug page
and this index page here for all events,
before we do that, let's pause for a second
and think about the two pages we worked on.
Index.js here on the root level of the pages folder
and dynamic event Id page.
Maybe there's something we can optimize
or where we could at least consider optimizations.