1
00:00:01,000 --> 00:00:03,000
So to make this intercepted page

2
00:00:03,000 --> 00:00:05,000
a bit more useful,

3
00:00:05,000 --> 00:00:08,000
I will actually get rid of this h2 element,

4
00:00:08,000 --> 00:00:12,000
and instead, my idea now is to either show this here,

5
00:00:12,000 --> 00:00:15,000
in this intercepted page as a modal,

6
00:00:15,000 --> 00:00:18,000
or to show it as a regular full screen page,

7
00:00:18,000 --> 00:00:21,000
depending on how we got to this page.

8
00:00:21,000 --> 00:00:23,000
Therefore, I'll start by adding some markup here

9
00:00:23,000 --> 00:00:27,000
to the intercepted route page.js file.

10
00:00:27,000 --> 00:00:29,000
I'll bring back that fragment.

11
00:00:29,000 --> 00:00:32,000
And then in there I wanna have a div

12
00:00:32,000 --> 00:00:36,000
with a className of "modal-backdrop",

13
00:00:37,000 --> 00:00:39,000
which will render a backdrop behind the modal

14
00:00:39,000 --> 00:00:43,000
and then wrap the main content into a dialog

15
00:00:44,000 --> 00:00:47,000
on which I'll add a className of "modal".

16
00:00:48,000 --> 00:00:50,000
And I'll then add the open prop here.

17
00:00:51,000 --> 00:00:54,000
With that done, if we save that,

18
00:00:54,000 --> 00:00:55,000
you'll see that if you reload,

19
00:00:55,000 --> 00:00:58,000
you still have that full screen page.

20
00:00:58,000 --> 00:01:00,000
But if you get there by clicking,

21
00:01:00,000 --> 00:01:03,000
it's shown as such a modal dialog instead.

22
00:01:04,000 --> 00:01:07,000
However, it's not really shown as an overlay

23
00:01:07,000 --> 00:01:09,000
to the rest of the page.

24
00:01:09,000 --> 00:01:11,000
As you can see, if you take a close look

25
00:01:11,000 --> 00:01:13,000
at the part behind the modal,

26
00:01:13,000 --> 00:01:18,000
there's nothing there because it's still a page

27
00:01:18,000 --> 00:01:20,000
that takes up all the available space

28
00:01:20,000 --> 00:01:22,000
in its surrounding layout.

29
00:01:22,000 --> 00:01:24,000
Therefore, to make it an overlay

30
00:01:24,000 --> 00:01:28,000
over the page we're coming from,

31
00:01:28,000 --> 00:01:30,000
we can use a shared layout

32
00:01:30,000 --> 00:01:34,000
and this parallel routing feature you learned about earlier.

33
00:01:35,000 --> 00:01:40,000
So here in our case, we can set up a layout.js file

34
00:01:40,000 --> 00:01:42,000
next to the page.js file

35
00:01:42,000 --> 00:01:46,000
that shows the details for a selected news article,

36
00:01:47,000 --> 00:01:50,000
and name that function here,

37
00:01:50,000 --> 00:01:54,000
NewsDetailLayout or something like this.

38
00:01:55,000 --> 00:01:58,000
And then there we'll get the children prop,

39
00:01:58,000 --> 00:02:02,000
which will hold the content of the currently active page.

40
00:02:02,000 --> 00:02:05,000
So here all then I'll put a fragment

41
00:02:05,000 --> 00:02:09,000
and inside of that fragment output my children prop value.

42
00:02:10,000 --> 00:02:14,000
But now I wanna set up parallel routing here

43
00:02:14,000 --> 00:02:17,000
with two routes that are shown in parallel,

44
00:02:17,000 --> 00:02:21,000
where one route is the standard news item detail page,

45
00:02:21,000 --> 00:02:24,000
and the other route is this modal overlay,

46
00:02:24,000 --> 00:02:27,000
which is not always shown of course, but sometimes.

47
00:02:28,000 --> 00:02:32,000
Therefore, we could add two sibling folders here.

48
00:02:32,000 --> 00:02:35,000
One may be named @modal,

49
00:02:35,000 --> 00:02:37,000
and then next to it one other

50
00:02:37,000 --> 00:02:41,000
which we could name @default or details or whatever.

51
00:02:41,000 --> 00:02:45,000
And then we could move that page.js file here,

52
00:02:45,000 --> 00:02:47,000
which shows us the details about an article

53
00:02:47,000 --> 00:02:50,000
into this details folder.

54
00:02:52,000 --> 00:02:53,000
But since I always wanna show

55
00:02:53,000 --> 00:02:56,000
that there actually is something else you can do

56
00:02:56,000 --> 00:02:58,000
when working with parallel routes,

57
00:02:58,000 --> 00:03:02,000
instead of moving it into a separate parallel route folder,

58
00:03:02,000 --> 00:03:06,000
this page.js file, which is placed next to the layout

59
00:03:06,000 --> 00:03:08,000
that will output the parallel routes,

60
00:03:08,000 --> 00:03:12,000
will be made available through the default children prop.

61
00:03:12,000 --> 00:03:14,000
So we can use that as an alternative

62
00:03:14,000 --> 00:03:18,000
instead of creating a dedicated parallel route sub folder.

63
00:03:19,000 --> 00:03:22,000
But I will create such a parallel route sub folder

64
00:03:22,000 --> 00:03:24,000
for the intercepted route.

65
00:03:24,000 --> 00:03:27,000
So that goes into the @modal folder.

66
00:03:29,000 --> 00:03:33,000
Now this path description

67
00:03:33,000 --> 00:03:38,000
in the intercepting route folder name does not change.

68
00:03:38,000 --> 00:03:40,000
It does not change to two dots,

69
00:03:40,000 --> 00:03:43,000
even though we did now move it into some sub folder

70
00:03:43,000 --> 00:03:48,000
because those parallel route folders are ignored

71
00:03:48,000 --> 00:03:51,000
because this path you describe here

72
00:03:51,000 --> 00:03:55,000
is actually not a path in your folder system,

73
00:03:55,000 --> 00:03:59,000
but instead in the URL path that will be rendered

74
00:03:59,000 --> 00:04:02,000
because of your folder structure.

75
00:04:02,000 --> 00:04:04,000
And these parallel route folders

76
00:04:04,000 --> 00:04:09,000
like @modal, or earlier @archive, and @latest

77
00:04:09,000 --> 00:04:12,000
don't add anything to the URL.

78
00:04:12,000 --> 00:04:15,000
They're just there to organize the files

79
00:04:15,000 --> 00:04:18,000
in a certain way NextJS expects.

80
00:04:18,000 --> 00:04:20,000
But since it's the URL path,

81
00:04:20,000 --> 00:04:22,000
that must be taken care of

82
00:04:22,000 --> 00:04:25,000
in the intercepting route folder name,

83
00:04:25,000 --> 00:04:27,000
we don't have to change that name

84
00:04:27,000 --> 00:04:30,000
if we move it into such a parallel route folder.

85
00:04:30,000 --> 00:04:32,000
Can be a bit confusing,

86
00:04:32,000 --> 00:04:36,000
but is something specific to this exact use case here.

87
00:04:37,000 --> 00:04:38,000
So now the intercepting route

88
00:04:38,000 --> 00:04:42,000
is in that modal parallel route folder.

89
00:04:42,000 --> 00:04:44,000
And the advantage of this setup

90
00:04:44,000 --> 00:04:47,000
is now that in the parent layout.js file,

91
00:04:47,000 --> 00:04:51,000
which sits above that @modal folder,

92
00:04:51,000 --> 00:04:53,000
we now don't just get the children prop,

93
00:04:53,000 --> 00:04:55,000
but also that modal prop,

94
00:04:55,000 --> 00:05:00,000
modal because I chose modal as an identifier here.

95
00:05:01,000 --> 00:05:04,000
And, therefore, we can now output that

96
00:05:04,000 --> 00:05:06,000
maybe here above the children content.

97
00:05:08,000 --> 00:05:11,000
So therefore now we have that modal page content,

98
00:05:11,000 --> 00:05:12,000
which is output on the screen,

99
00:05:12,000 --> 00:05:16,000
and then that page content, the detailed page content here,

100
00:05:16,000 --> 00:05:19,000
which is made available through children.

101
00:05:19,000 --> 00:05:21,000
Now, the only problem we'll have

102
00:05:21,000 --> 00:05:24,000
is that this modal parallel route

103
00:05:24,000 --> 00:05:26,000
actually only outputs something

104
00:05:26,000 --> 00:05:30,000
if we intercept this nested image path,

105
00:05:30,000 --> 00:05:32,000
then we want open that modal.

106
00:05:32,000 --> 00:05:35,000
But if we are just on /news

107
00:05:35,000 --> 00:05:37,000
and then slash some slug,

108
00:05:37,000 --> 00:05:39,000
we actually don't output anything

109
00:05:39,000 --> 00:05:41,000
from that modal parallel route.

110
00:05:42,000 --> 00:05:46,000
And for that reason, if you reload

111
00:05:46,000 --> 00:05:49,000
and you go to that detail page,

112
00:05:49,000 --> 00:05:51,000
you'll get an error here.

113
00:05:51,000 --> 00:05:54,000
And therefore what you should do

114
00:05:54,000 --> 00:05:56,000
to make this pattern work

115
00:05:56,000 --> 00:06:00,000
is a default JS file

116
00:06:00,000 --> 00:06:02,000
or a page.js file,

117
00:06:02,000 --> 00:06:04,000
doesn't matter here, inside of @modal,

118
00:06:04,000 --> 00:06:07,000
but outside of the intercepted route there.

119
00:06:07,000 --> 00:06:11,000
And then here, simply export a component function

120
00:06:11,000 --> 00:06:13,000
that could be named ModalDefaultPage,

121
00:06:15,000 --> 00:06:17,000
and there simply return null

122
00:06:17,000 --> 00:06:20,000
so that no visible content will be rendered

123
00:06:20,000 --> 00:06:22,000
for this parallel route

124
00:06:22,000 --> 00:06:26,000
when you are on the details page of a news article.

125
00:06:26,000 --> 00:06:29,000
But that we at least return something

126
00:06:29,000 --> 00:06:34,000
so that NextJS knows that it doesn't have to render anything

127
00:06:34,000 --> 00:06:36,000
instead of simply seeing

128
00:06:36,000 --> 00:06:39,000
that you don't have any component at all for that path,

129
00:06:39,000 --> 00:06:40,000
which would not be good.

130
00:06:42,000 --> 00:06:45,000
And therefore, now with all those changes made,

131
00:06:45,000 --> 00:06:48,000
if you go back to such a details page

132
00:06:48,000 --> 00:06:49,000
of one of these articles,

133
00:06:49,000 --> 00:06:51,000
and you click on this image,

134
00:06:51,000 --> 00:06:54,000
it's now opened as such an overlay,

135
00:06:54,000 --> 00:06:55,000
and you can see

136
00:06:55,000 --> 00:06:58,000
that the other content is still there in the background.

137
00:06:58,000 --> 00:06:59,000
And it's still there

138
00:06:59,000 --> 00:07:02,000
because we have a parallel route set up now.

139
00:07:02,000 --> 00:07:05,000
The Detail page route content,

140
00:07:05,000 --> 00:07:06,000
which we see in the background here,

141
00:07:06,000 --> 00:07:10,000
is shown on the same page as that modal route content,

142
00:07:10,000 --> 00:07:13,000
which in this case shows this image here.

143
00:07:14,000 --> 00:07:16,000
And that's how you can combine

144
00:07:16,000 --> 00:07:19,000
this intercepting route feature

145
00:07:19,000 --> 00:07:22,000
with the parallel route feature

146
00:07:22,000 --> 00:07:23,000
to build such a modal,

147
00:07:23,000 --> 00:07:26,000
which is shown on top of some other content

148
00:07:26,000 --> 00:07:29,000
that belongs to some other route.

149
00:07:29,000 --> 00:07:32,000
Obviously not something you'll need all the time,

150
00:07:32,000 --> 00:07:34,000
but definitely something you might need

151
00:07:34,000 --> 00:07:38,000
from time to time in your NextJS applications.

152
00:07:38,000 --> 00:07:40,000
And now you know how you could build this.