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.