Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:06,326
Now that we understand how pages are rendered,
2
00:00:06,326 --> 00:00:08,522
we can talk about navigation.
3
00:00:08,522 --> 00:00:10,467
I'm running the dev server in
4
00:00:10,467 --> 00:00:12,077
the background as usual.
5
00:00:12,144 --> 00:00:15,277
So, we have a few pages in our application.
6
00:00:15,277 --> 00:00:19,016
About, all the reviews, and the HomePage.
7
00:00:19,016 --> 00:00:21,328
Now, we want to put some links
8
00:00:21,328 --> 00:00:23,254
so our users can navigate
9
00:00:23,331 --> 00:00:27,059
from the HomePage for example to some other page.
10
00:00:27,059 --> 00:00:29,971
We could add a navigation bar to the header,
11
00:00:29,971 --> 00:00:31,163
in the RootLayout.
12
00:00:31,229 --> 00:00:34,119
This way it will apply to all the pages.
13
00:00:34,119 --> 00:00:36,915
So let's add a "nav" element here,
14
00:00:36,915 --> 00:00:39,149
containing an "unordered list".
15
00:00:39,149 --> 00:00:42,493
And then we'll put a "list item" for each link.
16
00:00:42,493 --> 00:00:44,953
In HTML we can use the "anchor"
17
00:00:44,953 --> 00:00:46,699
tag to display a link.
18
00:00:46,779 --> 00:00:50,397
We need to pass a URL as the "href",
19
00:00:50,397 --> 00:00:53,810
and then the text to display, like "Home".
20
00:00:53,810 --> 00:00:55,763
Let's add a few more links.
21
00:00:55,930 --> 00:00:58,162
We want our users to be able to
22
00:00:58,162 --> 00:01:00,250
navigate to the Reviews page.
23
00:01:00,510 --> 00:01:03,010
And then we can repeat the same process,
24
00:01:03,110 --> 00:01:05,628
this time for the About page.
25
00:01:05,628 --> 00:01:09,237
So we'll show links for all our top-level routes.
26
00:01:09,237 --> 00:01:11,316
You can see the result in the browser.
27
00:01:11,316 --> 00:01:13,483
If we click the "Reviews" link,
28
00:01:13,483 --> 00:01:15,301
it opens the Reviews page.
29
00:01:15,371 --> 00:01:19,114
And if we click About, of course we see that page.
30
00:01:19,114 --> 00:01:21,415
It seems to work just fine.
31
00:01:21,415 --> 00:01:23,444
We could make this navigation
32
00:01:23,444 --> 00:01:25,193
bar look nicer obviously,
33
00:01:25,263 --> 00:01:28,487
but we'll worry about styling in another section.
34
00:01:28,487 --> 00:01:31,986
Right now let's see in more details what happens
35
00:01:31,986 --> 00:01:34,861
when we navigate from one page to another.
36
00:01:34,861 --> 00:01:37,074
Let's start from the Home page.
37
00:01:37,074 --> 00:01:39,645
As we know, the browser makes a request
38
00:01:39,645 --> 00:01:43,353
to load the HTML document for that page.
39
00:01:43,353 --> 00:01:45,312
Now, when we click "Reviews",
40
00:01:45,312 --> 00:01:48,209
the browser unloads the Home page,
41
00:01:48,209 --> 00:01:49,954
and make another request,
42
00:01:49,954 --> 00:01:54,026
fetching the full HTML for the Reviews page.
43
00:01:54,026 --> 00:01:57,283
The same will happen if we go to the About page.
44
00:01:57,283 --> 00:02:00,960
Every time the browser replaces the entire page
45
00:02:00,960 --> 00:02:03,420
with another full HTML document
46
00:02:03,420 --> 00:02:05,245
loaded from the server.
47
00:02:05,324 --> 00:02:08,674
This is how traditional websites work.
48
00:02:08,674 --> 00:02:10,715
This approach is also called
49
00:02:10,715 --> 00:02:12,537
a Multi-Page Application,
50
00:02:12,609 --> 00:02:14,792
in the sense that each path
51
00:02:14,792 --> 00:02:16,651
loads a different page.
52
00:02:16,732 --> 00:02:20,275
It's the opposite of a Single Page Application,
53
00:02:20,275 --> 00:02:23,055
where the browser loads a single page,
54
00:02:23,055 --> 00:02:25,550
and then, to navigate to another route,
55
00:02:25,550 --> 00:02:28,971
we use JavaScript, with a framework like React,
56
00:02:28,971 --> 00:02:31,204
to replace one component with
57
00:02:31,204 --> 00:02:33,437
another but in the same page.
58
00:02:33,514 --> 00:02:37,256
That approach is called client-side navigation,
59
00:02:37,256 --> 00:02:40,211
and it's also supported by Next.js.
60
00:02:40,211 --> 00:02:42,697
What we need to do to use that feature
61
00:02:42,697 --> 00:02:45,457
is import the "Link" component
62
00:02:45,457 --> 00:02:47,892
from the "next/link" module.
63
00:02:47,892 --> 00:02:50,269
And then simply replace all the
64
00:02:50,269 --> 00:02:52,262
"anchor" tags with "Link".
65
00:02:52,339 --> 00:02:55,378
Let me see if I can change all of them in one go,
66
00:02:55,378 --> 00:02:58,226
using "multiple cursors" in the editor.
67
00:02:58,226 --> 00:03:02,390
The "Link" component also accepts an "href" prop.
68
00:03:02,390 --> 00:03:05,833
If we save, our links look the same as before.
69
00:03:05,833 --> 00:03:08,568
And if we click on them, they still work fine.
70
00:03:08,568 --> 00:03:10,617
But navigating to each page
71
00:03:10,617 --> 00:03:12,589
seems a little faster now.
72
00:03:12,665 --> 00:03:14,610
Let's see what this means in
73
00:03:14,610 --> 00:03:16,416
terms of network requests.
74
00:03:16,486 --> 00:03:18,749
I'll restart from the Home page.
75
00:03:18,749 --> 00:03:21,728
When we open the first page of our application
76
00:03:21,728 --> 00:03:24,330
the browser still makes a request
77
00:03:24,330 --> 00:03:26,065
to load the full HTML.
78
00:03:26,144 --> 00:03:27,982
Nothing different so far.
79
00:03:28,084 --> 00:03:29,898
But let's clear the requests,
80
00:03:29,898 --> 00:03:31,555
and see what happens when we
81
00:03:31,555 --> 00:03:33,034
navigate to another page.
82
00:03:33,093 --> 00:03:35,951
As I simply move the mouse over a link,
83
00:03:35,951 --> 00:03:38,873
for some reason the browser makes a new request.
84
00:03:38,873 --> 00:03:41,036
It will be the same if I hover
85
00:03:41,036 --> 00:03:42,551
over the other links,
86
00:03:42,623 --> 00:03:45,208
it makes a request for each one of them.
87
00:03:45,208 --> 00:03:47,393
This is called "prefetching",
88
00:03:47,393 --> 00:03:50,491
and we'll talk more about this in the next video.
89
00:03:50,491 --> 00:03:53,472
Because it works differently in production,
90
00:03:53,472 --> 00:03:54,789
rather than in dev.
91
00:03:54,858 --> 00:03:57,314
But for now let me point out that
92
00:03:57,314 --> 00:04:01,241
these requests are not loading an HTML document.
93
00:04:01,241 --> 00:04:03,689
They only fetch some data used
94
00:04:03,689 --> 00:04:05,893
by React Server Components.
95
00:04:05,974 --> 00:04:08,338
Anyway, as I said, I'll fully explain
96
00:04:08,338 --> 00:04:09,807
this in the next video.
97
00:04:09,871 --> 00:04:13,107
For now, let's just ignore these requests.
98
00:04:13,107 --> 00:04:15,033
The important thing is that, if
99
00:04:15,033 --> 00:04:16,709
we actually click on a link
100
00:04:16,772 --> 00:04:18,498
we see the new page content
101
00:04:18,498 --> 00:04:20,031
pretty much immediately,
102
00:04:20,095 --> 00:04:23,583
and yet the browser didn't make any new requests.
103
00:04:23,583 --> 00:04:25,853
That's because our app is now
104
00:04:25,853 --> 00:04:28,122
using client-side navigation.
105
00:04:28,201 --> 00:04:29,658
When we click on a link,
106
00:04:29,658 --> 00:04:32,117
the Next.js router simply replaces
107
00:04:32,117 --> 00:04:34,576
some elements on the existing page
108
00:04:34,648 --> 00:04:37,004
without loading a separate HTML
109
00:04:37,004 --> 00:04:38,904
document from the server.
110
00:04:38,980 --> 00:04:41,885
So, as a user we still see different
111
00:04:41,885 --> 00:04:43,499
content on the page,
112
00:04:43,579 --> 00:04:46,203
but it's displayed instantly, without
113
00:04:46,203 --> 00:04:48,827
having to wait for a server response.
114
00:04:48,897 --> 00:04:51,815
In this sense, a Next.js app behaves
115
00:04:51,815 --> 00:04:54,328
like a Single Page Application.
116
00:04:54,409 --> 00:04:56,832
But it is also slightly different
117
00:04:56,832 --> 00:04:58,961
from a traditional React SPA,
118
00:04:59,035 --> 00:05:01,822
in that, with Next.js, we can always
119
00:05:01,822 --> 00:05:03,989
open a specific URL directly
120
00:05:04,067 --> 00:05:06,670
and this will return a full document,
121
00:05:06,670 --> 00:05:10,320
with the prerendered HTML for that page.
122
00:05:10,320 --> 00:05:12,685
After it has loaded the first page,
123
00:05:12,685 --> 00:05:16,208
it will however use client-side navigation.
124
00:05:16,208 --> 00:05:18,570
And, by the way, this is why our
125
00:05:18,570 --> 00:05:20,858
app loads some JavaScript files
126
00:05:20,932 --> 00:05:23,366
even though all our HTML pages
127
00:05:23,366 --> 00:05:25,800
are prerendered by the server.
128
00:05:25,881 --> 00:05:28,708
The Next.js Router uses JavaScript
129
00:05:28,708 --> 00:05:31,536
to perform client-side navigation.
130
00:05:31,619 --> 00:05:33,911
But, if we prefetch these links,
131
00:05:33,911 --> 00:05:35,559
and clear the requests,
132
00:05:35,631 --> 00:05:39,045
we can now navigate from the initial About page,
133
00:05:39,045 --> 00:05:41,361
to the other routes in our application
134
00:05:41,361 --> 00:05:43,249
without any additional request.
135
00:05:43,310 --> 00:05:47,364
So, we can start from any URL on our website
136
00:05:47,364 --> 00:05:50,284
and, like a Multi-Page Application,
137
00:05:50,284 --> 00:05:52,870
we'll get a full HTML document,
138
00:05:52,954 --> 00:05:56,032
with all the advantages of prerendering.
139
00:05:56,032 --> 00:05:58,171
But then, if we click on any link,
140
00:05:58,171 --> 00:06:01,584
it will use the faster client-side navigation,
141
00:06:01,584 --> 00:06:04,203
like a Single-Page Application.
142
00:06:04,203 --> 00:06:06,635
So with Next.js we basically
143
00:06:06,635 --> 00:06:09,067
get the best of both worlds.
144
00:06:09,153 --> 00:06:11,259
All we need to do is use the
145
00:06:11,259 --> 00:06:13,289
Link component in our code,
146
00:06:13,364 --> 00:06:17,008
instead of the standard HTML anchor element,
147
00:06:17,008 --> 00:06:19,886
and Next.js will take care of the rest.
10793
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.