So now that we revisited
this important concept of Server and Client Components,
which is really important to understand,
it's not too tricky to use, actually, as you saw,
but it's important to be aware
of these two different kinds of components.
Now that we did that,
we can dive back into routing-related features
and explore another special kind of route you can set up
when working with NextJS.
And the kind of route I wanna explore next
is a so-called interceptor route.
Now, how does that work?
Well, let's say here in our news slug,
we actually wanna make that image
that belongs to a news item clickable.
So that we show it on a separate screen, a separate page
that shows us that image as a full-screen image, let's say.
To achieve this, we can, of course,
add a new nested path here
inside of that dynamic slug folder.
And we could name it image.
Obviously, the name is up to you.
And in there we can add a page.js file,
and then export our component function,
which I'll name ImagePage.
Now in there, I then wanna output that image.
And to do that, I'll add a div with a className
of fullscreen-image.
And then in that div, I wanna output the image.
And of course, now we need to find out which image
for which article should be shown here,
and therefore, I'll actually accept this params property,
or I'll extract that params property
from the incoming props,
which will give me access to that select,
because nested routes inside of some dynamic route
also will have access to that dynamic route parameter,
so to this slug parameter, in this case.
So this nested image page can extract this news item slug
by simply accessing params.slug,
just as we did it directly on the dynamic route page itself.
Therefore, of course, we can also copy the logic from there,
including this not found check to get a specific news item
like this, and not found must be imported
from next/navigation in order to be available.
And we can then use the news item to output the actual image
so we can construct the source of the image dynamically.
It's stored in the images/news folder in the public folder,
and then the image name is stored in that news item.
There we'll have a image property.
And of course, DUMMY_NEWS also must be imported
in order to be available in that file.
So these imports must be added.
With that, we have this image path
and the alt text can, again, be newsItem.title,
for example, like this.
And of course, newsItem slug
is what I should use here in this check.
Okay, so with that, we're then outputting that image.
Now in order to get to this page,
we can go to the dynamic news detail page here,
so the page.js filed directly in the slug folder,
and then wrap this image here with a link.
So we can use the link component,
which is imported from next/link,
and wrap that around the image like this
and set the path of that link
equal to /news/newsItem.slug/image.
That's the path that will get us to this page.js file.
Because that's inside of the news folder,
then this dynamic slug folder and then the image folder.
So the path is slash, news, slash, the slug, slash, image.
If we save that and we are on a news item,
we should therefore be able to click that image
and we should see it like this.
So that seems to work,
but of course, this is now nothing new.
I mean, the only new thing here
is that we have a nested path inside of a dynamic path
and yeah, that is nice to know
and something you will definitely need from time to time.
But that's not this intercepting route feature
I mentioned before.
Instead, that's what we'll explore next.