So to make this intercepted page
a bit more useful,
I will actually get rid of this h2 element,
and instead, my idea now is to either show this here,
in this intercepted page as a modal,
or to show it as a regular full screen page,
depending on how we got to this page.
Therefore, I'll start by adding some markup here
to the intercepted route page.js file.
I'll bring back that fragment.
And then in there I wanna have a div
with a className of "modal-backdrop",
which will render a backdrop behind the modal
and then wrap the main content into a dialog
on which I'll add a className of "modal".
And I'll then add the open prop here.
With that done, if we save that,
you'll see that if you reload,
you still have that full screen page.
But if you get there by clicking,
it's shown as such a modal dialog instead.
However, it's not really shown as an overlay
to the rest of the page.
As you can see, if you take a close look
at the part behind the modal,
there's nothing there because it's still a page
that takes up all the available space
in its surrounding layout.
Therefore, to make it an overlay
over the page we're coming from,
we can use a shared layout
and this parallel routing feature you learned about earlier.
So here in our case, we can set up a layout.js file
next to the page.js file
that shows the details for a selected news article,
and name that function here,
NewsDetailLayout or something like this.
And then there we'll get the children prop,
which will hold the content of the currently active page.
So here all then I'll put a fragment
and inside of that fragment output my children prop value.
But now I wanna set up parallel routing here
with two routes that are shown in parallel,
where one route is the standard news item detail page,
and the other route is this modal overlay,
which is not always shown of course, but sometimes.
Therefore, we could add two sibling folders here.
One may be named @modal,
and then next to it one other
which we could name @default or details or whatever.
And then we could move that page.js file here,
which shows us the details about an article
into this details folder.
But since I always wanna show
that there actually is something else you can do
when working with parallel routes,
instead of moving it into a separate parallel route folder,
this page.js file, which is placed next to the layout
that will output the parallel routes,
will be made available through the default children prop.
So we can use that as an alternative
instead of creating a dedicated parallel route sub folder.
But I will create such a parallel route sub folder
for the intercepted route.
So that goes into the @modal folder.
Now this path description
in the intercepting route folder name does not change.
It does not change to two dots,
even though we did now move it into some sub folder
because those parallel route folders are ignored
because this path you describe here
is actually not a path in your folder system,
but instead in the URL path that will be rendered
because of your folder structure.
And these parallel route folders
like @modal, or earlier @archive, and @latest
don't add anything to the URL.
They're just there to organize the files
in a certain way NextJS expects.
But since it's the URL path,
that must be taken care of
in the intercepting route folder name,
we don't have to change that name
if we move it into such a parallel route folder.
Can be a bit confusing,
but is something specific to this exact use case here.
So now the intercepting route
is in that modal parallel route folder.
And the advantage of this setup
is now that in the parent layout.js file,
which sits above that @modal folder,
we now don't just get the children prop,
but also that modal prop,
modal because I chose modal as an identifier here.
And, therefore, we can now output that
maybe here above the children content.
So therefore now we have that modal page content,
which is output on the screen,
and then that page content, the detailed page content here,
which is made available through children.
Now, the only problem we'll have
is that this modal parallel route
actually only outputs something
if we intercept this nested image path,
then we want open that modal.
But if we are just on /news
and then slash some slug,
we actually don't output anything
from that modal parallel route.
And for that reason, if you reload
and you go to that detail page,
you'll get an error here.
And therefore what you should do
to make this pattern work
is a default JS file
or a page.js file,
doesn't matter here, inside of @modal,
but outside of the intercepted route there.
And then here, simply export a component function
that could be named ModalDefaultPage,
and there simply return null
so that no visible content will be rendered
for this parallel route
when you are on the details page of a news article.
But that we at least return something
so that NextJS knows that it doesn't have to render anything
instead of simply seeing
that you don't have any component at all for that path,
which would not be good.
And therefore, now with all those changes made,
if you go back to such a details page
of one of these articles,
and you click on this image,
it's now opened as such an overlay,
and you can see
that the other content is still there in the background.
And it's still there
because we have a parallel route set up now.
The Detail page route content,
which we see in the background here,
is shown on the same page as that modal route content,
which in this case shows this image here.
And that's how you can combine
this intercepting route feature
with the parallel route feature
to build such a modal,
which is shown on top of some other content
that belongs to some other route.
Obviously not something you'll need all the time,
but definitely something you might need
from time to time in your NextJS applications.
And now you know how you could build this.