1
00:00:02,000 --> 00:00:04,000
So now we know about this concept

2
00:00:04,000 --> 00:00:07,000
of using files in the pages folder

3
00:00:07,000 --> 00:00:08,000
for creating routes,

4
00:00:08,000 --> 00:00:11,000
which then load these different components

5
00:00:11,000 --> 00:00:13,000
that live in these files

6
00:00:13,000 --> 00:00:17,000
and we also see that this server-side pre-rendering works

7
00:00:17,000 --> 00:00:19,000
out of the box.

8
00:00:19,000 --> 00:00:20,000
Now, let's dig a bit deeper

9
00:00:20,000 --> 00:00:23,000
into that file-based routing system though.

10
00:00:23,000 --> 00:00:27,000
For example, there is an important alternative

11
00:00:27,000 --> 00:00:28,000
you should be aware of

12
00:00:28,000 --> 00:00:32,000
when it comes to organizing your files and folders.

13
00:00:32,000 --> 00:00:33,000
We've got this index.js file

14
00:00:33,000 --> 00:00:37,000
and that loads the root page or slash nothing

15
00:00:37,000 --> 00:00:42,000
because it's the index.js file directly in the pages folder.

16
00:00:42,000 --> 00:00:44,000
Now, for the news page, /news,

17
00:00:44,000 --> 00:00:46,000
we've got the news.js file.

18
00:00:46,000 --> 00:00:49,000
We always have an alternative

19
00:00:49,000 --> 00:00:51,000
to using such a named file name.

20
00:00:51,000 --> 00:00:55,000
So a file named differently than index.js.

21
00:00:55,000 --> 00:00:58,000
We could also create a news sub-folder

22
00:00:58,000 --> 00:01:01,000
in the pages folder, move news.js in there

23
00:01:01,000 --> 00:01:04,000
and then rename it to index.js

24
00:01:04,000 --> 00:01:07,000
using that special index.js file name again.

25
00:01:07,000 --> 00:01:10,000
Now, this page would still be loaded

26
00:01:10,000 --> 00:01:13,000
by visiting our-domain.com/news

27
00:01:13,000 --> 00:01:15,000
because we're in the news folder.

28
00:01:15,000 --> 00:01:17,000
And that's important.

29
00:01:17,000 --> 00:01:21,000
Folders, which you create in your pages folder also act

30
00:01:21,000 --> 00:01:23,000
as path segments.

31
00:01:23,000 --> 00:01:24,000
And it's totally up to you

32
00:01:24,000 --> 00:01:27,000
whether you wanna go with news.js

33
00:01:27,000 --> 00:01:32,000
in the root pages folder or index.js in the news folder.

34
00:01:32,000 --> 00:01:34,000
Now, it does matter though

35
00:01:34,000 --> 00:01:37,000
as soon as you start creating nested paths,

36
00:01:37,000 --> 00:01:38,000
and that's what I wanna do now.

37
00:01:38,000 --> 00:01:40,000
If we wanna have a path

38
00:01:40,000 --> 00:01:45,000
that is something like news.something-important

39
00:01:46,000 --> 00:01:49,000
where something-important is the identifier

40
00:01:49,000 --> 00:01:52,000
of the specific news item you wanna load,

41
00:01:52,000 --> 00:01:56,000
then you need to create a file in such a sub-folder

42
00:01:56,000 --> 00:01:59,000
because otherwise, you can't create such a nested path.

43
00:01:59,000 --> 00:02:02,000
After all, we have two segments here

44
00:02:02,000 --> 00:02:05,000
and if we just create files directly in the pages folder,

45
00:02:05,000 --> 00:02:09,000
we're limited to one segment, the file name.

46
00:02:09,000 --> 00:02:13,000
So therefore, if we want to have such a nested path,

47
00:02:13,000 --> 00:02:14,000
so more than one segment,

48
00:02:14,000 --> 00:02:16,000
we need to create a sub-folder

49
00:02:16,000 --> 00:02:18,000
and then we can also create the root page

50
00:02:18,000 --> 00:02:21,000
for that path with index.js

51
00:02:21,000 --> 00:02:26,000
and then create the something-important.js file

52
00:02:26,000 --> 00:02:30,000
as a sibling file to index.js.

53
00:02:30,000 --> 00:02:33,000
So now we have two different pages

54
00:02:33,000 --> 00:02:36,000
that start with /news,

55
00:02:36,000 --> 00:02:39,000
/news/ nothing loads the component in the index.js file,

56
00:02:39,000 --> 00:02:43,000
/news/something-important

57
00:02:43,000 --> 00:02:46,000
will load the component we create in here.

58
00:02:46,000 --> 00:02:49,000
Now, of course, here again we could alternatively also

59
00:02:49,000 --> 00:02:51,000
create another nested sub-folder,

60
00:02:51,000 --> 00:02:54,000
something-important with the index.js file in there.

61
00:02:54,000 --> 00:02:56,000
That would again be the alternative

62
00:02:56,000 --> 00:03:00,000
to using such a named file name in the news folder.

63
00:03:00,000 --> 00:03:02,000
But I hope you get the idea by now.

64
00:03:02,000 --> 00:03:05,000
Now, with that, I could copy this code

65
00:03:05,000 --> 00:03:07,000
from index.js in the news folder

66
00:03:07,000 --> 00:03:11,000
and bring it into the something-important page here

67
00:03:11,000 --> 00:03:14,000
and then name this DetailPage maybe

68
00:03:14,000 --> 00:03:17,000
because that should be the page holding the details

69
00:03:17,000 --> 00:03:19,000
for a specific news item

70
00:03:19,000 --> 00:03:21,000
and this page would now be loaded

71
00:03:21,000 --> 00:03:24,000
for /news/something-important.

72
00:03:25,000 --> 00:03:27,000
And hence, if we save everything

73
00:03:27,000 --> 00:03:31,000
and we visit /news, we see The News page,

74
00:03:31,000 --> 00:03:35,000
and if I visit /news/something-important,

75
00:03:35,000 --> 00:03:38,000
then we see The Detail Page.

76
00:03:38,000 --> 00:03:40,000
So that's how this works.

77
00:03:40,000 --> 00:03:43,000
But there is still another important concept

78
00:03:43,000 --> 00:03:45,000
which we have't touched on yet.