Now, of course here, it would be nice
if we could click on this backdrop and then go back
to that detail page where we're coming from
and we can implement this feature
by adding a click listener on this modal backdrop div,
and by then triggering some code that does take us back
to the page we're coming from.
So what we want to do here is navigate programmatically,
you could say.
We wanna trigger a navigation from inside our code,
so not because the user clicked a link or
because the user manually clicked the back button,
but instead from inside our code
because the user clicked this div.
And to navigate programmatically,
NextJS gives you the special use router hook,
which must be imported from next slash navigation,
not from some other package, but from next slash navigation.
This gives you access to a router object,
which then holds various methods
for navigating around programmatically.
For example, you can call the push method
to push a new page onto the stack of pages.
You can also manually refresh the page by calling refresh,
but now it's actually this back method I'm interested in
because if you call that, the user is navigated back
to the page they're coming from,
and that's what I want
to do when the user clicks this backdrop.
Therefore, here as a value for on click,
I'll register this router back method.
I'm not executing it here,
so you should not add these parentheses.
Instead, we just point at this method
and it will therefore be executed for us
whenever a click on this div occurs.
Now, this use router hook, however,
only works inside of client components.
Therefore, we must now actually
add this use client directive to the top
of this file to make it work.
But with that, if you reload,
you of course are on the full screen details page,
but if you go there by clicking around, this modal opens up
and if you then click on the background here,
you see it closes.
But essentially that means that we are navigated back
to the path we're coming from.
You can also see how the path changes up here when I click
on the backdrop.
And that's how you can navigate around programmatically.