1
00:00:02,000 --> 00:00:03,000
[Maximilian Schwarzmuller] And that is it

2
00:00:03,000 --> 00:00:05,000
for this course section.

3
00:00:05,000 --> 00:00:09,000
We've now had a detailed look at file based routing

4
00:00:09,000 --> 00:00:13,000
and how we set up pages and how we navigate between pages

5
00:00:13,000 --> 00:00:15,000
with Next.js.

6
00:00:15,000 --> 00:00:20,000
We had a look at the pages directory and that the files

7
00:00:20,000 --> 00:00:22,000
and folders in there have a special meaning.

8
00:00:22,000 --> 00:00:26,000
Index JS is always treated as a route page

9
00:00:26,000 --> 00:00:28,000
for the given folder.

10
00:00:28,000 --> 00:00:31,000
So either the overall route page, if it's an index

11
00:00:31,000 --> 00:00:36,000
JS file in pages or in portfolio or other sub folders,

12
00:00:36,000 --> 00:00:41,000
Index JS would be loaded for /portfolio/ nothing.

13
00:00:42,000 --> 00:00:45,000
We also can have other file names to, for example,

14
00:00:45,000 --> 00:00:50,000
load/portfolio/list, and then load this list page component.

15
00:00:51,000 --> 00:00:54,000
And we can also have dynamic segments

16
00:00:54,000 --> 00:00:59,000
by enclosing placeholder identifiers in square brackets

17
00:00:59,000 --> 00:01:02,000
and then loading different kinds of data

18
00:01:02,000 --> 00:01:06,000
for different concrete values we might be getting.

19
00:01:06,000 --> 00:01:08,000
And we get access to the concrete value entered

20
00:01:08,000 --> 00:01:13,000
for a POV segment, through the use router hook,

21
00:01:13,000 --> 00:01:13,000
as you learned.

22
00:01:14,000 --> 00:01:17,000
Now, we can also have nested dynamic segments

23
00:01:17,000 --> 00:01:20,000
as we did with clients.

24
00:01:20,000 --> 00:01:25,000
And we can also have such catch-all files here

25
00:01:25,000 --> 00:01:28,000
by having square brackets and then three dots

26
00:01:28,000 --> 00:01:31,000
in front of any identifier of our choice.

27
00:01:31,000 --> 00:01:34,000
And that allows us to catch multiple dynamic segments

28
00:01:34,000 --> 00:01:36,000
in one go.

29
00:01:36,000 --> 00:01:38,000
And all these are very powerful features

30
00:01:38,000 --> 00:01:42,000
for loading pages in exactly the way you need.

31
00:01:42,000 --> 00:01:45,000
Now for navigating around we want to use the link

32
00:01:45,000 --> 00:01:48,000
component provided by Next.js

33
00:01:48,000 --> 00:01:50,000
or, if we need to navigate programmatically,

34
00:01:50,000 --> 00:01:53,000
we can do that through that router object

35
00:01:53,000 --> 00:01:57,000
which we get through use router or in class-based components

36
00:01:57,000 --> 00:02:00,000
through to with router, higher order component.

37
00:02:01,000 --> 00:02:05,000
And therefore, we now know what file-based routing is

38
00:02:05,000 --> 00:02:06,000
and how it works.

39
00:02:06,000 --> 00:02:09,000
But is that now better than the code-based approach

40
00:02:09,000 --> 00:02:12,000
we know from standard react projects

41
00:02:12,000 --> 00:02:16,000
that do not use Next.js

42
00:02:16,000 --> 00:02:18,000
Ultimately that is, of course, up to you to decide

43
00:02:18,000 --> 00:02:21,000
but I want to give you my perspective on that

44
00:02:21,000 --> 00:02:24,000
and a small comparison I came up with.

45
00:02:25,000 --> 00:02:28,000
When we compare file-based routing, which we get

46
00:02:28,000 --> 00:02:31,000
with Next.js to this standard code-based routing

47
00:02:31,000 --> 00:02:34,000
we have in standard react apps with react router,

48
00:02:34,000 --> 00:02:37,000
then in the case of file-based routing,

49
00:02:37,000 --> 00:02:42,000
we have no extra boiler plate code that needs to be written.

50
00:02:42,000 --> 00:02:46,000
So this kind of route configuration, which we need to write

51
00:02:46,000 --> 00:02:50,000
in our react components when using react router,

52
00:02:50,000 --> 00:02:53,000
that is not required with Next.js

53
00:02:53,000 --> 00:02:55,000
and the file-based routing system.

54
00:02:55,000 --> 00:02:59,000
Instead of writing this boiler plate code,

55
00:02:59,000 --> 00:03:01,000
we simply create component files,

56
00:03:01,000 --> 00:03:04,000
which we would need to do anyways,

57
00:03:04,000 --> 00:03:09,000
and we just store them in a structure that replicates

58
00:03:09,000 --> 00:03:12,000
the path we want to have in our URL in the end.

59
00:03:12,000 --> 00:03:17,000
And that in my opinion is a very natural way of, well,

60
00:03:17,000 --> 00:03:19,000
setting up all our page components

61
00:03:19,000 --> 00:03:21,000
and of storing our page components.

62
00:03:21,000 --> 00:03:25,000
So therefore, we do something we need to do anyways,

63
00:03:25,000 --> 00:03:28,000
and we save the other part of creating extra code,

64
00:03:28,000 --> 00:03:31,000
just to tell react which components

65
00:03:31,000 --> 00:03:34,000
should be loaded for which path.

66
00:03:34,000 --> 00:03:37,000
We combined that into one step instead.

67
00:03:37,000 --> 00:03:41,000
Therefore, in my opinion, that's a very intuitive system

68
00:03:41,000 --> 00:03:44,000
of creating components and of storing components

69
00:03:44,000 --> 00:03:46,000
and of setting up routing, therefore.

70
00:03:46,000 --> 00:03:48,000
We don't need to do anything for that.

71
00:03:48,000 --> 00:03:51,000
We get the routing for free, if you want to call it

72
00:03:51,000 --> 00:03:52,000
like that.

73
00:03:52,000 --> 00:03:56,000
So with file-based routing the file and folder structure

74
00:03:56,000 --> 00:03:59,000
we have is everything that influences our routes.

75
00:03:59,000 --> 00:04:03,000
And we, therefore, fully control the POVs we support

76
00:04:03,000 --> 00:04:06,000
in our application, through our folder structure

77
00:04:06,000 --> 00:04:08,000
in that pages folder.

78
00:04:08,000 --> 00:04:11,000
Now for navigating around, we use a link component

79
00:04:11,000 --> 00:04:14,000
and we can also navigate imperatively,

80
00:04:14,000 --> 00:04:16,000
so there's nothing special about that.

81
00:04:17,000 --> 00:04:19,000
Now for a code-based routing, we do have

82
00:04:19,000 --> 00:04:22,000
that extra boiler plate set up in code.

83
00:04:22,000 --> 00:04:25,000
Though, of course, you could argue that by doing that,

84
00:04:25,000 --> 00:04:28,000
you have some code where you can see

85
00:04:28,000 --> 00:04:30,000
which routes are supported.

86
00:04:30,000 --> 00:04:32,000
You don't need to look at the file system

87
00:04:32,000 --> 00:04:35,000
though I would argue that looking

88
00:04:35,000 --> 00:04:38,000
at the file system wouldn't be too difficult,

89
00:04:38,000 --> 00:04:40,000
but of course, ultimately that's of course,

90
00:04:40,000 --> 00:04:41,000
up to you to judge.

91
00:04:41,000 --> 00:04:44,000
Now, it is definitely straightforward,

92
00:04:44,000 --> 00:04:47,000
don't get me wrong, but it includes new components

93
00:04:47,000 --> 00:04:48,000
and concepts, which you need to learn,

94
00:04:48,000 --> 00:04:51,000
like that switch component, and that route component

95
00:04:51,000 --> 00:04:54,000
and how to order your routes and so on.

96
00:04:54,000 --> 00:04:56,000
So that can be annoying.

97
00:04:56,000 --> 00:04:58,000
Now a potential advantage, of course,

98
00:04:58,000 --> 00:05:00,000
is that the file and folders set up,

99
00:05:00,000 --> 00:05:02,000
does not matter at all.

100
00:05:02,000 --> 00:05:05,000
In my opinion, having the folder structure

101
00:05:05,000 --> 00:05:08,000
dictate the POS is an advantage

102
00:05:08,000 --> 00:05:11,000
but you could see this as a disadvantage as well.

103
00:05:11,000 --> 00:05:14,000
And with code-based routing you can store your component

104
00:05:14,000 --> 00:05:15,000
files wherever you want.

105
00:05:15,000 --> 00:05:20,000
They won't have any influence on your routes or your POS.

106
00:05:20,000 --> 00:05:23,000
Now navigation works pretty much as it does with Next.js.

107
00:05:23,000 --> 00:05:25,000
You have a link component

108
00:05:25,000 --> 00:05:27,000
and you can also navigate imperatively there.

109
00:05:27,000 --> 00:05:30,000
So no differences there.

110
00:05:30,000 --> 00:05:31,000
Therefore, overall, in my opinion,

111
00:05:31,000 --> 00:05:34,000
file-based routing is more intuitive

112
00:05:34,000 --> 00:05:36,000
and is easier to set up, but it is, of course,

113
00:05:36,000 --> 00:05:38,000
up to you to judge.

114
00:05:38,000 --> 00:05:43,000
Either way, it is how Next.js thinks about pages and routes.

115
00:05:43,000 --> 00:05:46,000
And therefore, when working with Next.js

116
00:05:46,000 --> 00:05:49,000
you want to embrace that file-based approach.