1
00:00:03,000 --> 00:00:06,866
We added a new About page to our blog website.

2
00:00:06,866 --> 00:00:09,026
But, if we go to the Home page,

3
00:00:09,826 --> 00:00:12,248
there's actually no way for the user

4
00:00:12,248 --> 00:00:14,266
to navigate to the About page.

5
00:00:14,333 --> 00:00:17,544
So let's go and add a link to our HomePage.

6
00:00:17,544 --> 00:00:19,507
In fact we could have a header,

7
00:00:19,507 --> 00:00:21,280
that wraps a navigation bar.

8
00:00:21,344 --> 00:00:24,139
Now, in a React component we need

9
00:00:24,139 --> 00:00:26,341
a single JSX root element,

10
00:00:26,426 --> 00:00:29,783
so I'm wrapping everything inside a "fragment", which

11
00:00:29,783 --> 00:00:31,430
is this special empty tag.

12
00:00:31,493 --> 00:00:34,736
Inside the "header" we can have a "nav" element,

13
00:00:35,533 --> 00:00:37,760
which in turn contains a list.

14
00:00:37,760 --> 00:00:40,264
And then we can have a list item for

15
00:00:40,264 --> 00:00:42,559
every link in our navigation bar.

16
00:00:42,629 --> 00:00:45,914
Let's start by using a regular "a" tag,

17
00:00:45,914 --> 00:00:47,598
linking to "/about",

18
00:00:47,682 --> 00:00:49,722
and with "About" as the text.

19
00:00:50,702 --> 00:00:53,969
So we have a very basic navigation bar.

20
00:00:53,969 --> 00:00:57,129
We'll add some styles later to make it look nicer,

21
00:00:57,129 --> 00:00:59,182
but we can click the new link, and

22
00:00:59,182 --> 00:01:01,114
this takes us to the About page.

23
00:01:01,174 --> 00:01:03,260
Of course we can also go back using

24
00:01:03,260 --> 00:01:04,691
the browser back button.

25
00:01:04,750 --> 00:01:07,924
That's basic web functionality, but let's look

26
00:01:07,924 --> 00:01:10,615
in more detail at the network requests.

27
00:01:10,684 --> 00:01:13,698
And I'm only interested in documents, that

28
00:01:13,698 --> 00:01:14,702
is HTML files.

29
00:01:14,774 --> 00:01:18,193
Now, when we first load the home page, the browser

30
00:01:18,193 --> 00:01:20,586
will make a request to "localhost".

31
00:01:20,654 --> 00:01:23,040
And this really means the root path,

32
00:01:23,040 --> 00:01:24,564
that is the index page.

33
00:01:24,630 --> 00:01:26,894
When we click the "About" link,

34
00:01:26,894 --> 00:01:29,710
the browser requests the "about" page.

35
00:01:29,710 --> 00:01:35,679
And note that it replaced the entire document: it unloaded the home page,

36
00:01:35,679 --> 00:01:37,804
and loaded the about page.

37
00:01:37,886 --> 00:01:40,204
If we click the back button, the same

38
00:01:40,204 --> 00:01:42,021
thing will happen in reverse.

39
00:01:42,084 --> 00:01:45,599
The browser discarded the about page, and requested

40
00:01:45,599 --> 00:01:48,081
the home page from the server again.

41
00:01:48,150 --> 00:01:51,746
This is how traditional websites work, where

42
00:01:51,746 --> 00:01:54,524
each page is a separate HTML file.

43
00:01:54,606 --> 00:01:57,558
But it's different from a React Single Page

44
00:01:57,558 --> 00:02:00,098
Application, where all the navigation

45
00:02:00,098 --> 00:02:01,952
is done on the client side.

46
00:02:02,089 --> 00:02:05,735
Client-side navigation is actually faster, because

47
00:02:05,735 --> 00:02:09,163
it doesn't load a completely separate HTML file

48
00:02:09,163 --> 00:02:11,278
from the server every time we

49
00:02:11,278 --> 00:02:13,393
navigate to a different page.

50
00:02:13,612 --> 00:02:17,139
So does this mean that by using Next.js we're

51
00:02:17,139 --> 00:02:20,509
losing one of the advantages of React apps?

52
00:02:20,588 --> 00:02:23,539
Of course not. We can use client-side

53
00:02:23,539 --> 00:02:26,092
navigation even in Next.js apps.

54
00:02:26,172 --> 00:02:29,106
All we need to do is use a component

55
00:02:29,106 --> 00:02:31,877
provided by Next.js called "Link",

56
00:02:31,958 --> 00:02:35,172
that we can import from the "next/link" module.

57
00:02:35,758 --> 00:02:38,516
The way this works is that we simply use

58
00:02:38,516 --> 00:02:40,929
Link instead of the anchor element.

59
00:02:40,998 --> 00:02:43,489
It takes the same "href" attribute.

60
00:02:43,489 --> 00:02:45,232
Let's save this file, and see

61
00:02:45,232 --> 00:02:46,855
what difference this makes.

62
00:02:48,209 --> 00:02:50,420
Let's reload the Home page again.

63
00:02:50,420 --> 00:02:52,835
And of course the browser requested

64
00:02:52,835 --> 00:02:55,044
the HTML file for the root path.

65
00:02:55,113 --> 00:02:58,124
But if we go and click the "About" link now,

66
00:02:58,124 --> 00:03:01,697
note how the browser didn't make any new request.

67
00:03:01,697 --> 00:03:04,156
There's still only "localhost", so it

68
00:03:04,156 --> 00:03:06,284
didn't request the "about" page.

69
00:03:06,350 --> 00:03:08,747
That's because the Next Router is

70
00:03:08,747 --> 00:03:11,144
now doing client side navigation.

71
00:03:11,217 --> 00:03:14,456
It already pre-loaded everything required to

72
00:03:14,456 --> 00:03:16,738
display the AboutPage component

73
00:03:16,738 --> 00:03:18,872
when we loaded the Home page.

74
00:03:19,020 --> 00:03:22,161
So it didn't have to make any additional requests,

75
00:03:22,161 --> 00:03:24,110
which means that the navigation

76
00:03:24,110 --> 00:03:25,680
was a lot faster as well.

77
00:03:25,806 --> 00:03:28,756
The same happens if we click the back button:

78
00:03:28,756 --> 00:03:31,854
the Next Router simply replaces the top React

79
00:03:31,854 --> 00:03:35,435
component on the existing page, instead of reloading

80
00:03:35,435 --> 00:03:37,844
the whole document from the server.

81
00:03:37,982 --> 00:03:40,883
So by using Next.js we can basically

82
00:03:40,883 --> 00:03:43,219
have the best of both worlds.

83
00:03:43,300 --> 00:03:46,536
We get very quick client side navigation,

84
00:03:46,536 --> 00:03:49,221
just like a Single Page React app,

85
00:03:49,300 --> 00:03:53,555
but we can also go directly to the "/about" URL and

86
00:03:53,555 --> 00:03:57,309
get a pre-rendered HTML page from the server,

87
00:03:57,393 --> 00:04:00,793
like a traditional multi-page web application.

88
00:04:00,793 --> 00:04:03,897
All we need to do to take advantage of these

89
00:04:03,897 --> 00:04:06,861
features is to use the Next Link component

90
00:04:06,861 --> 00:04:09,118
for all our internal page links.

91
00:04:09,260 --> 00:04:12,024
Now, I want to quickly mention that the

92
00:04:12,024 --> 00:04:14,575
Link component has changed recently.

93
00:04:14,646 --> 00:04:20,278
Until Next.js 12 you had to write an "a" element inside each Link,

94
00:04:20,278 --> 00:04:21,132
like this.

95
00:04:21,216 --> 00:04:24,206
You will see this syntax used in some of the videos

96
00:04:24,206 --> 00:04:26,491
in the rest of the course, because they

97
00:04:26,491 --> 00:04:28,366
were recorded before the change.

98
00:04:28,484 --> 00:04:30,990
But since Next.js 13 the "a'

99
00:04:30,990 --> 00:04:33,407
tag is no longer necessary,

100
00:04:33,497 --> 00:04:36,174
and in fact you'll get an error if you do this.

101
00:04:36,174 --> 00:04:40,790
So please just leave out any "a" tags inside Links in your own code,

102
00:04:40,790 --> 00:04:42,826
and everything will work fine.

103
00:04:42,894 --> 00:04:45,577
The Link component is now effectively

104
00:04:45,577 --> 00:04:48,115
a replacement for the "a" element.2