So for the all events page
the question is what we wanna to do there?
And I would say that we probably still want
to statically generate this page.
So that we wanna fetch all the data in advance
with get static props.
Therefore, just us before on this page
I'll export my async function,
get static props
and then in there we wanna get all the events
and expose them full props
to this all events page component.
Now we do of course have
this get all events function in API util.
So we can utilize that
and import get all events from not from dummy data,
but from helpers API util
and then go down there
and get access to all events by awaiting
the result of get all events.
And then we return an object with a props key
where I have my events which hold my events
which I fetched here,
simple like that.
And now, since we exposed
that full props We should expect props here.
And now you use the events from the props.
So here I'll set events equal to prop start events
or alternatively we use object destructuring
which is what I will do here.
Now, we still need to use router hook here
because here we're not using it to fetch some id
or dynamic path segment value
but instead we're using it for programmatic navigation
which I still wanna enable here.
So that stays the way it is.
Now we can consider revalidating
this page from time to time
to make sure that we pick up new events.
I think that makes a lot of sense
so we should add revalidate here
and then maybe set this to 60 seconds
so that every minute
if a new request is coming in,
we regenerate this page.
Now with that
if I reload this again works just fine
now, it's pregenerated though
which is why in the page source
we have all that event data.
So that also works.
Now,last but not least let's work
on the slug on this slug page
on this catch all page.
That could be a bit more tricky
because here we're catching
multiple dynamic segments, multiple parameters.