1
00:00:02,000 --> 00:00:04,000
Now we can add more and more pages

2
00:00:04,000 --> 00:00:06,000
by adding more and more files here.

3
00:00:06,000 --> 00:00:11,000
But at some point you might want to structure your pages

4
00:00:11,000 --> 00:00:13,000
in a different way, or you need some deeply

5
00:00:13,000 --> 00:00:17,000
nested path consisting of multiple segments.

6
00:00:17,000 --> 00:00:22,000
In such cases, you can add folders to the pages folder.

7
00:00:22,000 --> 00:00:26,000
For example, here, we could add the word

8
00:00:28,000 --> 00:00:30,000
folio folder

9
00:00:30,000 --> 00:00:35,000
and in that folder inside of the portfolio folder,

10
00:00:35,000 --> 00:00:38,000
add an index JS file.

11
00:00:38,000 --> 00:00:39,000
So again, this special name

12
00:00:39,000 --> 00:00:42,000
but now nested in the portfolio.

13
00:00:42,000 --> 00:00:46,000
Now in there, we can again create a function

14
00:00:46,000 --> 00:00:48,000
the portfolio of page function.

15
00:00:48,000 --> 00:00:51,000
And of course that's just another react component

16
00:00:51,000 --> 00:00:52,000
which we're adding.

17
00:00:52,000 --> 00:00:54,000
And here we could add

18
00:00:55,000 --> 00:01:00,000
the word folio page as the content

19
00:01:01,000 --> 00:01:06,000
and then export this default portfolio page like this.

20
00:01:07,000 --> 00:01:09,000
If we do that and save everything,

21
00:01:09,000 --> 00:01:14,000
we can also visit slash portfolio here,

22
00:01:14,000 --> 00:01:16,000
and we see The Portfolio Page.

23
00:01:17,000 --> 00:01:20,000
Therefore, this is an equivalent

24
00:01:20,000 --> 00:01:23,000
to creating a file named portfolio JS

25
00:01:23,000 --> 00:01:25,000
one level above that folder.

26
00:01:25,000 --> 00:01:27,000
So instead of about JS,

27
00:01:27,000 --> 00:01:30,000
we could have created an about folder,

28
00:01:30,000 --> 00:01:32,000
and in that about folder

29
00:01:32,000 --> 00:01:35,000
we could have added an index.js file,

30
00:01:35,000 --> 00:01:38,000
and then we could also have our About Page component

31
00:01:38,000 --> 00:01:41,000
in this index.js file in the about folder

32
00:01:41,000 --> 00:01:45,000
instead of having the about JS file here.

33
00:01:45,000 --> 00:01:47,000
So now I deleted this about JS file

34
00:01:47,000 --> 00:01:52,000
and if we save everything we can still visit slash about.

35
00:01:52,000 --> 00:01:55,000
So that is a perfect replacement.

36
00:01:55,000 --> 00:01:56,000
That is an alternative.

37
00:01:56,000 --> 00:01:58,000
And it's up to you what you prefer.

38
00:01:59,000 --> 00:02:02,000
If you want to have sub folders to structure that

39
00:02:02,000 --> 00:02:04,000
or if you want to have files with that name.

40
00:02:04,000 --> 00:02:07,000
Now Sub folders don't just exist

41
00:02:07,000 --> 00:02:11,000
so that we have an alternative to a file named about though.

42
00:02:11,000 --> 00:02:15,000
Instead we need them if we want to create POS

43
00:02:15,000 --> 00:02:16,000
that consists of multiple segments,

44
00:02:16,000 --> 00:02:20,000
of for example, in portfolio

45
00:02:20,000 --> 00:02:25,000
if we want to have let's say a list JS file

46
00:02:25,000 --> 00:02:30,000
so that we can have a URL off slash portfolio slash list,

47
00:02:31,000 --> 00:02:34,000
then there is no way around having a sub folder

48
00:02:34,000 --> 00:02:38,000
because in there we can now create our List Page,

49
00:02:38,000 --> 00:02:43,000
and return our JSX code here, The List Page.

50
00:02:43,000 --> 00:02:48,000
And of course, just as before then export this List Page.

51
00:02:49,000 --> 00:02:51,000
But now with that,

52
00:02:51,000 --> 00:02:56,000
we can visit slash port folios slash list.

53
00:02:56,000 --> 00:03:00,000
And we see that, but there wouldn't have been another way

54
00:03:00,000 --> 00:03:04,000
of getting this to work without that portfolio folder,

55
00:03:04,000 --> 00:03:06,000
we could not create this nest the path.

56
00:03:06,000 --> 00:03:08,000
So that is a use case

57
00:03:08,000 --> 00:03:11,000
where we then definitely need nested folders.

58
00:03:11,000 --> 00:03:13,000
And of course in general,

59
00:03:13,000 --> 00:03:16,000
having some kind of structure in the pages folder

60
00:03:16,000 --> 00:03:18,000
and working with sub folders

61
00:03:18,000 --> 00:03:22,000
for grouping files together isn't a bad idea in general,

62
00:03:22,000 --> 00:03:24,000
because of course that allows you

63
00:03:24,000 --> 00:03:27,000
to keep your files more organized,

64
00:03:27,000 --> 00:03:28,000
especially if you're working on websites

65
00:03:28,000 --> 00:03:31,000
with dozens or hundreds of pages.