Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,285 --> 00:00:03,118
[Maximilian Schwarzmuller] And that is it
2
00:00:03,118 --> 00:00:05,400
for this course section.
3
00:00:05,400 --> 00:00:09,150
We've now had a detailed look at file based routing
4
00:00:09,150 --> 00:00:13,300
and how we set up pages and how we navigate between pages
5
00:00:13,300 --> 00:00:15,870
with Next.js.
6
00:00:15,870 --> 00:00:20,240
We had a look at the pages directory and that the files
7
00:00:20,240 --> 00:00:22,790
and folders in there have a special meaning.
8
00:00:22,790 --> 00:00:26,560
Index JS is always treated as a route page
9
00:00:26,560 --> 00:00:28,190
for the given folder.
10
00:00:28,190 --> 00:00:31,380
So either the overall route page, if it's an index
11
00:00:31,380 --> 00:00:36,380
JS file in pages or in portfolio or other sub folders,
12
00:00:36,780 --> 00:00:41,780
Index JS would be loaded for /portfolio/ nothing.
13
00:00:42,160 --> 00:00:45,730
We also can have other file names to, for example,
14
00:00:45,730 --> 00:00:50,730
load/portfolio/list, and then load this list page component.
15
00:00:51,810 --> 00:00:54,390
And we can also have dynamic segments
16
00:00:54,390 --> 00:00:59,390
by enclosing placeholder identifiers in square brackets
17
00:00:59,800 --> 00:01:02,360
and then loading different kinds of data
18
00:01:02,360 --> 00:01:06,070
for different concrete values we might be getting.
19
00:01:06,070 --> 00:01:08,930
And we get access to the concrete value entered
20
00:01:08,930 --> 00:01:13,010
for a POV segment, through the use router hook,
21
00:01:13,010 --> 00:01:13,873
as you learned.
22
00:01:14,880 --> 00:01:17,970
Now, we can also have nested dynamic segments
23
00:01:17,970 --> 00:01:20,270
as we did with clients.
24
00:01:20,270 --> 00:01:25,130
And we can also have such catch-all files here
25
00:01:25,130 --> 00:01:28,000
by having square brackets and then three dots
26
00:01:28,000 --> 00:01:31,370
in front of any identifier of our choice.
27
00:01:31,370 --> 00:01:34,940
And that allows us to catch multiple dynamic segments
28
00:01:34,940 --> 00:01:36,440
in one go.
29
00:01:36,440 --> 00:01:38,990
And all these are very powerful features
30
00:01:38,990 --> 00:01:42,540
for loading pages in exactly the way you need.
31
00:01:42,540 --> 00:01:45,140
Now for navigating around we want to use the link
32
00:01:45,140 --> 00:01:48,040
component provided by Next.js
33
00:01:48,040 --> 00:01:50,730
or, if we need to navigate programmatically,
34
00:01:50,730 --> 00:01:53,230
we can do that through that router object
35
00:01:53,230 --> 00:01:57,660
which we get through use router or in class-based components
36
00:01:57,660 --> 00:02:00,823
through to with router, higher order component.
37
00:02:01,810 --> 00:02:05,050
And therefore, we now know what file-based routing is
38
00:02:05,050 --> 00:02:06,410
and how it works.
39
00:02:06,410 --> 00:02:09,880
But is that now better than the code-based approach
40
00:02:09,880 --> 00:02:12,990
we know from standard react projects
41
00:02:12,990 --> 00:02:16,000
that do not use Next.js
42
00:02:16,000 --> 00:02:18,830
Ultimately that is, of course, up to you to decide
43
00:02:18,830 --> 00:02:21,330
but I want to give you my perspective on that
44
00:02:21,330 --> 00:02:24,123
and a small comparison I came up with.
45
00:02:25,120 --> 00:02:28,050
When we compare file-based routing, which we get
46
00:02:28,050 --> 00:02:31,440
with Next.js to this standard code-based routing
47
00:02:31,440 --> 00:02:34,910
we have in standard react apps with react router,
48
00:02:34,910 --> 00:02:37,910
then in the case of file-based routing,
49
00:02:37,910 --> 00:02:42,420
we have no extra boiler plate code that needs to be written.
50
00:02:42,420 --> 00:02:46,830
So this kind of route configuration, which we need to write
51
00:02:46,830 --> 00:02:50,030
in our react components when using react router,
52
00:02:50,030 --> 00:02:53,220
that is not required with Next.js
53
00:02:53,220 --> 00:02:55,890
and the file-based routing system.
54
00:02:55,890 --> 00:02:59,420
Instead of writing this boiler plate code,
55
00:02:59,420 --> 00:03:01,980
we simply create component files,
56
00:03:01,980 --> 00:03:04,230
which we would need to do anyways,
57
00:03:04,230 --> 00:03:09,010
and we just store them in a structure that replicates
58
00:03:09,010 --> 00:03:12,800
the path we want to have in our URL in the end.
59
00:03:12,800 --> 00:03:17,090
And that in my opinion is a very natural way of, well,
60
00:03:17,090 --> 00:03:19,290
setting up all our page components
61
00:03:19,290 --> 00:03:21,880
and of storing our page components.
62
00:03:21,880 --> 00:03:25,010
So therefore, we do something we need to do anyways,
63
00:03:25,010 --> 00:03:28,730
and we save the other part of creating extra code,
64
00:03:28,730 --> 00:03:31,900
just to tell react which components
65
00:03:31,900 --> 00:03:34,190
should be loaded for which path.
66
00:03:34,190 --> 00:03:37,630
We combined that into one step instead.
67
00:03:37,630 --> 00:03:41,320
Therefore, in my opinion, that's a very intuitive system
68
00:03:41,320 --> 00:03:44,890
of creating components and of storing components
69
00:03:44,890 --> 00:03:46,750
and of setting up routing, therefore.
70
00:03:46,750 --> 00:03:48,750
We don't need to do anything for that.
71
00:03:48,750 --> 00:03:51,510
We get the routing for free, if you want to call it
72
00:03:51,510 --> 00:03:52,730
like that.
73
00:03:52,730 --> 00:03:56,090
So with file-based routing the file and folder structure
74
00:03:56,090 --> 00:03:59,720
we have is everything that influences our routes.
75
00:03:59,720 --> 00:04:03,240
And we, therefore, fully control the POVs we support
76
00:04:03,240 --> 00:04:06,610
in our application, through our folder structure
77
00:04:06,610 --> 00:04:08,900
in that pages folder.
78
00:04:08,900 --> 00:04:11,680
Now for navigating around, we use a link component
79
00:04:11,680 --> 00:04:14,220
and we can also navigate imperatively,
80
00:04:14,220 --> 00:04:16,303
so there's nothing special about that.
81
00:04:17,200 --> 00:04:19,670
Now for a code-based routing, we do have
82
00:04:19,670 --> 00:04:22,720
that extra boiler plate set up in code.
83
00:04:22,720 --> 00:04:25,760
Though, of course, you could argue that by doing that,
84
00:04:25,760 --> 00:04:28,440
you have some code where you can see
85
00:04:28,440 --> 00:04:30,340
which routes are supported.
86
00:04:30,340 --> 00:04:32,940
You don't need to look at the file system
87
00:04:32,940 --> 00:04:35,290
though I would argue that looking
88
00:04:35,290 --> 00:04:38,220
at the file system wouldn't be too difficult,
89
00:04:38,220 --> 00:04:40,080
but of course, ultimately that's of course,
90
00:04:40,080 --> 00:04:41,910
up to you to judge.
91
00:04:41,910 --> 00:04:44,050
Now, it is definitely straightforward,
92
00:04:44,050 --> 00:04:47,210
don't get me wrong, but it includes new components
93
00:04:47,210 --> 00:04:48,890
and concepts, which you need to learn,
94
00:04:48,890 --> 00:04:51,560
like that switch component, and that route component
95
00:04:51,560 --> 00:04:54,210
and how to order your routes and so on.
96
00:04:54,210 --> 00:04:56,600
So that can be annoying.
97
00:04:56,600 --> 00:04:58,610
Now a potential advantage, of course,
98
00:04:58,610 --> 00:05:00,520
is that the file and folders set up,
99
00:05:00,520 --> 00:05:02,270
does not matter at all.
100
00:05:02,270 --> 00:05:05,042
In my opinion, having the folder structure
101
00:05:05,042 --> 00:05:08,380
dictate the POS is an advantage
102
00:05:08,380 --> 00:05:11,170
but you could see this as a disadvantage as well.
103
00:05:11,170 --> 00:05:14,210
And with code-based routing you can store your component
104
00:05:14,210 --> 00:05:15,630
files wherever you want.
105
00:05:15,630 --> 00:05:20,190
They won't have any influence on your routes or your POS.
106
00:05:20,190 --> 00:05:23,940
Now navigation works pretty much as it does with Next.js.
107
00:05:23,940 --> 00:05:25,410
You have a link component
108
00:05:25,410 --> 00:05:27,850
and you can also navigate imperatively there.
109
00:05:27,850 --> 00:05:30,030
So no differences there.
110
00:05:30,030 --> 00:05:31,890
Therefore, overall, in my opinion,
111
00:05:31,890 --> 00:05:34,170
file-based routing is more intuitive
112
00:05:34,170 --> 00:05:36,790
and is easier to set up, but it is, of course,
113
00:05:36,790 --> 00:05:38,300
up to you to judge.
114
00:05:38,300 --> 00:05:43,300
Either way, it is how Next.js thinks about pages and routes.
115
00:05:43,700 --> 00:05:46,330
And therefore, when working with Next.js
116
00:05:46,330 --> 00:05:49,203
you want to embrace that file-based approach.
9320
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.