1
00:00:03,000 --> 00:00:04,925
We added a navigation link

2
00:00:04,925 --> 00:00:06,035
to our blog app

3
00:00:06,609 --> 00:00:08,723
so we can go from the Home page

4
00:00:08,723 --> 00:00:09,950
to the About page.

5
00:00:09,950 --> 00:00:11,313
But once we get here

6
00:00:11,313 --> 00:00:14,108
there are no links to navigate elsewhere.

7
00:00:14,812 --> 00:00:17,122
We probably want the navigation bar

8
00:00:17,122 --> 00:00:19,894
to be displayed on the About page as well.

9
00:00:20,460 --> 00:00:21,749
We could simply copy

10
00:00:21,749 --> 00:00:24,005
this nav block into the other page,

11
00:00:24,693 --> 00:00:26,493
but to make it more reusable

12
00:00:26,493 --> 00:00:28,807
let's put it into its own component.

13
00:00:29,371 --> 00:00:30,742
So let's create a new file,

14
00:00:31,242 --> 00:00:33,335
let's call it "NavBar.js".

15
00:00:33,835 --> 00:00:35,268
This will be a regular

16
00:00:35,268 --> 00:00:36,310
React component.

17
00:00:37,201 --> 00:00:39,177
And in its body we can return

18
00:00:39,177 --> 00:00:42,312
the same elements we copied from our HomePage.

19
00:00:42,881 --> 00:00:45,026
We also need to make sure to import

20
00:00:45,026 --> 00:00:46,129
the Link component

21
00:00:46,691 --> 00:00:48,864
and I'll use the auto-import feature

22
00:00:49,364 --> 00:00:51,759
provided by Visual Studio Code.

23
00:00:51,759 --> 00:00:53,691
So it automatically added

24
00:00:53,691 --> 00:00:56,395
the correct import line at the top.

25
00:00:57,050 --> 00:00:59,303
And finally we want to export

26
00:00:59,303 --> 00:01:01,401
this NavBar as the default.

27
00:01:01,979 --> 00:01:03,451
Ok, we can save this file.

28
00:01:03,951 --> 00:01:05,640
And now, in our HomePage

29
00:01:06,251 --> 00:01:08,838
we can import that NavBar component

30
00:01:08,838 --> 00:01:11,057
from the file we just created.

31
00:01:12,683 --> 00:01:14,004
At this point we can use it

32
00:01:14,750 --> 00:01:16,256
to replace this block of code

33
00:01:17,215 --> 00:01:18,469
with our new component.

34
00:01:19,181 --> 00:01:20,786
Let's save these changes,

35
00:01:20,786 --> 00:01:22,646
and go back to our Home page.

36
00:01:23,210 --> 00:01:24,332
It's still showing

37
00:01:24,332 --> 00:01:25,889
the About link at the top

38
00:01:26,451 --> 00:01:29,239
that we can click to go to the other page.

39
00:01:29,239 --> 00:01:31,561
So the NavBar component is working.

40
00:01:31,561 --> 00:01:34,017
But we're still not showing any links

41
00:01:34,017 --> 00:01:35,277
in this About page.

42
00:01:35,976 --> 00:01:37,748
Let's go and add the NavBar

43
00:01:37,748 --> 00:01:39,388
to the AboutPage as well.

44
00:01:40,009 --> 00:01:42,644
We can wrap everything in a fragment first,

45
00:01:42,644 --> 00:01:45,095
so we can have multiple elements inside.

46
00:01:46,175 --> 00:01:47,580
And here we can add a "header"

47
00:01:48,275 --> 00:01:50,085
with our NavBar component,

48
00:01:50,085 --> 00:01:51,616
that I'll auto-import.

49
00:01:52,641 --> 00:01:54,185
And that should be it.

50
00:01:54,185 --> 00:01:56,501
We can see the NavBar at the top.

51
00:01:56,501 --> 00:01:58,185
However the only link is

52
00:01:58,185 --> 00:01:59,940
to the About page itself,

53
00:01:59,940 --> 00:02:02,326
so that's not particularly useful.

54
00:02:03,106 --> 00:02:04,697
We want to add another link

55
00:02:04,697 --> 00:02:05,522
to our NavBar.

56
00:02:06,272 --> 00:02:08,100
Let's copy this list item

57
00:02:08,100 --> 00:02:09,342
and duplicate it.

58
00:02:09,914 --> 00:02:12,623
Then we can change the "href" to "/"

59
00:02:13,123 --> 00:02:14,912
and the text to "Home".

60
00:02:15,412 --> 00:02:16,791
And we now have a link

61
00:02:16,791 --> 00:02:18,358
to the Home page as well.

62
00:02:18,920 --> 00:02:20,191
So we can click Home,

63
00:02:20,691 --> 00:02:22,532
and navigate back and forth

64
00:02:22,532 --> 00:02:24,032
between our two pages.

65
00:02:24,600 --> 00:02:26,420
So that's all working fine.

66
00:02:26,420 --> 00:02:28,846
But there's actually a small problem

67
00:02:28,846 --> 00:02:30,935
with this NavBar at the moment.

68
00:02:31,569 --> 00:02:33,907
I have created this component

69
00:02:33,907 --> 00:02:36,487
in the same folder as our pages.

70
00:02:36,487 --> 00:02:39,712
Can you think why this may be a problem?

71
00:02:39,712 --> 00:02:42,372
We've seen a couple of videos ago

72
00:02:42,372 --> 00:02:45,919
that Next.js uses a filesystem-based router,

73
00:02:45,919 --> 00:02:49,466
where all the files under the "pages" folder

74
00:02:49,466 --> 00:02:52,610
are automatically exposed as web pages.

75
00:02:53,593 --> 00:02:55,455
This means that right now

76
00:02:55,455 --> 00:02:57,764
we could open the "/NavBar" URL

77
00:02:58,859 --> 00:03:01,705
and we can see our "NavBar" component

78
00:03:01,705 --> 00:03:03,627
displayed as a full page.

79
00:03:03,627 --> 00:03:06,242
That's obviously not what we want,

80
00:03:06,242 --> 00:03:09,087
because the NavBar is not meant to be

81
00:03:09,087 --> 00:03:10,471
a standalone page.

82
00:03:10,471 --> 00:03:12,778
It's just a reusable component

83
00:03:13,662 --> 00:03:15,603
that we want to include in our pages.

84
00:03:16,103 --> 00:03:19,318
So how do we stop this NavBar component

85
00:03:19,318 --> 00:03:22,037
from being exposed as a web page?

86
00:03:22,619 --> 00:03:23,830
As you might guess,

87
00:03:23,830 --> 00:03:25,997
we need to move it somewhere else,

88
00:03:25,997 --> 00:03:27,908
outside of the "pages" folder.

89
00:03:28,535 --> 00:03:30,528
A common approach is to create

90
00:03:30,528 --> 00:03:31,923
a "components" folder

91
00:03:31,923 --> 00:03:33,651
at the top of our project.

92
00:03:34,283 --> 00:03:36,658
So we can now move "NavBar.js"

93
00:03:36,658 --> 00:03:39,903
inside that separate "components' folder.

94
00:03:40,482 --> 00:03:41,318
Let's confirm.

95
00:03:41,818 --> 00:03:43,268
Visual Studio Code can

96
00:03:43,268 --> 00:03:46,234
automatically update the imports in our code,

97
00:03:46,799 --> 00:03:47,869
so let's accept.

98
00:03:48,369 --> 00:03:50,726
And we should see that, in "index.js"

99
00:03:51,226 --> 00:03:53,395
the "NavBar" is now being imported

100
00:03:53,395 --> 00:03:55,692
from inside our "components" folder.

101
00:03:56,255 --> 00:03:59,190
But we still need to save this file ourselves,

102
00:03:59,190 --> 00:04:01,551
because the editor updated the import

103
00:04:01,551 --> 00:04:03,848
but didn't actually save the change.

104
00:04:04,475 --> 00:04:06,211
That's why the page in the browser

105
00:04:06,211 --> 00:04:07,232
is showing an error.

106
00:04:07,783 --> 00:04:09,823
If we save the AboutPage as well,

107
00:04:09,823 --> 00:04:10,998
that should fix it.

108
00:04:11,559 --> 00:04:13,592
And it's now importing the NavBar

109
00:04:13,592 --> 00:04:15,810
from inside the "components" folder.

110
00:04:16,370 --> 00:04:17,786
We can quickly check that

111
00:04:17,786 --> 00:04:19,089
everything still works.

112
00:04:19,644 --> 00:04:22,119
Good. So that's it for this video.

113
00:04:22,619 --> 00:04:24,686
We've seen how we can create

114
00:04:24,686 --> 00:04:26,899
reusable components in our app

115
00:04:26,899 --> 00:04:29,334
just like in any other React app.

116
00:04:29,334 --> 00:04:32,433
The only thing we need to be careful about

117
00:04:32,433 --> 00:04:33,319
with Next.js

118
00:04:33,319 --> 00:04:36,270
is that we should not put our components

119
00:04:36,270 --> 00:04:38,189
inside the "pages" folder,

120
00:04:38,189 --> 00:04:40,624
unless we want them to be visible

121
00:04:40,624 --> 00:04:42,247
directly as web pages.