1
00:00:00,000 --> 00:00:03,000
At the moment in this application here,

2
00:00:03,000 --> 00:00:06,000
whenever I pick one of my years here,

3
00:00:06,000 --> 00:00:09,000
I see the articles that belong to the year,

4
00:00:09,000 --> 00:00:12,000
but of course my navigation here,

5
00:00:12,000 --> 00:00:16,000
these years disappear and I also can't dive in deeper

6
00:00:16,000 --> 00:00:19,000
and, for example, pick a month

7
00:00:19,000 --> 00:00:21,000
for which I want to view the news.

8
00:00:22,000 --> 00:00:24,000
Now, we could try to solve that

9
00:00:24,000 --> 00:00:28,000
by adding some kind of layout here, some nested layout,

10
00:00:28,000 --> 00:00:31,000
that belongs to this parallel route,

11
00:00:31,000 --> 00:00:33,000
but I'll actually solve it by using

12
00:00:33,000 --> 00:00:37,000
yet another feature NextJS offers.

13
00:00:37,000 --> 00:00:39,000
I'll fix this problem

14
00:00:39,000 --> 00:00:41,000
by turning this dynamic route here

15
00:00:41,000 --> 00:00:46,000
from a standard dynamic route into a catch all route.

16
00:00:47,000 --> 00:00:48,000
Now we can do that

17
00:00:48,000 --> 00:00:51,000
by actually using two square brackets

18
00:00:51,000 --> 00:00:54,000
instead of just one pair of square brackets

19
00:00:54,000 --> 00:00:59,000
and by adding three dots here in front of some identifier

20
00:00:59,000 --> 00:00:59,000
of your choice,

21
00:00:59,000 --> 00:01:02,000
and here I'll rename that identifier to filter.

22
00:01:03,000 --> 00:01:06,000
Now that might look a bit weird,

23
00:01:06,000 --> 00:01:10,000
but what this will actually do is it will make sure

24
00:01:10,000 --> 00:01:12,000
that this page.js file

25
00:01:12,000 --> 00:01:15,000
inside of that strangely named folder

26
00:01:15,000 --> 00:01:20,000
will be activated for any path segments after archive

27
00:01:21,000 --> 00:01:22,000
in this case.

28
00:01:22,000 --> 00:01:25,000
No matter how many segments we have there,

29
00:01:25,000 --> 00:01:28,000
and no matter how they're named.

30
00:01:28,000 --> 00:01:30,000
Inside of this page.js file,

31
00:01:30,000 --> 00:01:34,000
this params value there for also changes

32
00:01:34,000 --> 00:01:37,000
or this property here changes.

33
00:01:37,000 --> 00:01:40,000
We no longer have a year property here

34
00:01:40,000 --> 00:01:43,000
because I renamed this to filter.

35
00:01:43,000 --> 00:01:46,000
So even though we have these three dots in front of it,

36
00:01:46,000 --> 00:01:50,000
we can actually still access the actual value

37
00:01:50,000 --> 00:01:52,000
that will be encoded in the URL,

38
00:01:52,000 --> 00:01:55,000
but the name is now filter because I changed the name.

39
00:01:56,000 --> 00:02:01,000
However, filter now also isn't a single value anymore.

40
00:02:01,000 --> 00:02:04,000
Instead it's a catch all route

41
00:02:04,000 --> 00:02:09,000
and it catches all path segments after archive,

42
00:02:09,000 --> 00:02:12,000
which could be no segments at all if we just visited

43
00:02:12,000 --> 00:02:17,000
/archive and then nothing after that,

44
00:02:17,000 --> 00:02:22,000
but it could be one segment if we visited /archive/2024.

45
00:02:22,000 --> 00:02:27,000
Or two segments if we visited /archive/2024/three

46
00:02:29,000 --> 00:02:33,000
to show the news for the month March and so on.

47
00:02:33,000 --> 00:02:36,000
So filter will give us an array

48
00:02:36,000 --> 00:02:40,000
of all the matched segments

49
00:02:40,000 --> 00:02:44,000
and therefore I'll rename my constant here to filter.

50
00:02:44,000 --> 00:02:46,000
And to understand how it works,

51
00:02:46,000 --> 00:02:49,000
I will console.log(filter) here

52
00:02:50,000 --> 00:02:53,000
and I will temporarily comment out this part here

53
00:02:53,000 --> 00:02:55,000
because it won't work right now,

54
00:02:55,000 --> 00:02:59,000
and I'll instead return just some dummy paragraph

55
00:02:59,000 --> 00:03:00,000
so that we return something.

56
00:03:02,000 --> 00:03:04,000
Now with those changes made,

57
00:03:04,000 --> 00:03:07,000
you should actually get an error here in the terminal

58
00:03:07,000 --> 00:03:09,000
where you ran your development server,

59
00:03:09,000 --> 00:03:11,000
or at least you should get one,

60
00:03:11,000 --> 00:03:14,000
if you stop it and you try to restart it.

61
00:03:14,000 --> 00:03:18,000
You should get an error that you cannot define a route

62
00:03:18,000 --> 00:03:23,000
with the same specificity as a optional catch all route.

63
00:03:24,000 --> 00:03:25,000
Now what this means in the end

64
00:03:25,000 --> 00:03:30,000
is just that now we have two conflicting page.js files.

65
00:03:31,000 --> 00:03:33,000
Because I just mentioned this part here

66
00:03:33,000 --> 00:03:37,000
and therefore this page will catch all the segments,

67
00:03:37,000 --> 00:03:40,000
all the path segments, after archive.

68
00:03:42,000 --> 00:03:47,000
But we try to load this page.js if we visit /archive,

69
00:03:47,000 --> 00:03:50,000
but we now also try to load this page.js file.

70
00:03:50,000 --> 00:03:52,000
And that won't work,

71
00:03:52,000 --> 00:03:57,000
therefore, I will actually grab this header here

72
00:03:57,000 --> 00:04:00,000
and cut that from this page.js file,

73
00:04:00,000 --> 00:04:04,000
which is directly in at archive and get rid of it here

74
00:04:06,000 --> 00:04:09,000
and instead go to my nested page.js file,

75
00:04:09,000 --> 00:04:11,000
which is in that filter folder

76
00:04:11,000 --> 00:04:14,000
and output that there, this header.

77
00:04:15,000 --> 00:04:19,000
Of course, I still need to get my links here

78
00:04:20,000 --> 00:04:23,000
and therefore I'll still call getavailableNewsYears.

79
00:04:25,000 --> 00:04:26,000
Just as before.

80
00:04:26,000 --> 00:04:28,000
That does not change.

81
00:04:29,000 --> 00:04:31,000
And we also still must make sure

82
00:04:31,000 --> 00:04:35,000
that this link component from next link is imported.

83
00:04:37,000 --> 00:04:40,000
But with that, we now have just one page.js file

84
00:04:40,000 --> 00:04:42,000
in this parallel route,

85
00:04:42,000 --> 00:04:45,000
and it's that one file that will now be loaded

86
00:04:45,000 --> 00:04:48,000
no matter which path segments

87
00:04:48,000 --> 00:04:52,000
or how many path segments we have after /archive.

88
00:04:53,000 --> 00:04:55,000
With that change made,

89
00:04:55,000 --> 00:05:00,000
if you now save this and you restart the development server,

90
00:05:00,000 --> 00:05:04,000
it should now restart without an error again,

91
00:05:04,000 --> 00:05:06,000
and if you reload /archive,

92
00:05:06,000 --> 00:05:08,000
you should again see that list,

93
00:05:08,000 --> 00:05:13,000
but you should now also see some log here,

94
00:05:13,000 --> 00:05:17,000
which at the moment says undefined in the terminal

95
00:05:17,000 --> 00:05:19,000
where you started the development server,

96
00:05:19,000 --> 00:05:22,000
and that log is coming from this line here.

97
00:05:23,000 --> 00:05:26,000
Now it should say something else than undefined

98
00:05:26,000 --> 00:05:28,000
if you visit 2024.

99
00:05:28,000 --> 00:05:31,000
Then you should actually get an array here,

100
00:05:31,000 --> 00:05:34,000
which includes the string 2024.

101
00:05:34,000 --> 00:05:38,000
Because I mentioned this filter property here

102
00:05:38,000 --> 00:05:43,000
will now hold an array of all the matched path segments.

103
00:05:43,000 --> 00:05:46,000
And that's also why the page itself didn't change now

104
00:05:46,000 --> 00:05:48,000
because it's now always the same page

105
00:05:48,000 --> 00:05:51,000
we're showing for all these different segments.

106
00:05:51,000 --> 00:05:54,000
But of course we can now use that data,

107
00:05:54,000 --> 00:05:59,000
that filter array data, to update what we see on the page.