1
00:00:03,000 --> 00:00:04,128
In the previous step

2
00:00:04,128 --> 00:00:06,102
we introduced this NavBar component

3
00:00:06,658 --> 00:00:08,160
that we are then using

4
00:00:08,160 --> 00:00:09,388
in both our pages.

5
00:00:09,388 --> 00:00:11,367
By writing a shared component

6
00:00:11,367 --> 00:00:13,961
we can avoid duplicating the same code

7
00:00:13,961 --> 00:00:15,326
over multiple pages.

8
00:00:16,099 --> 00:00:17,411
However there still is

9
00:00:17,411 --> 00:00:19,498
some duplication between our pages.

10
00:00:20,057 --> 00:00:22,831
They all have the same basic structure,

11
00:00:22,831 --> 00:00:25,462
with a "header" and a "main" section.

12
00:00:25,462 --> 00:00:27,311
In fact, it is not unusual

13
00:00:27,311 --> 00:00:29,444
for all the pages in a website

14
00:00:29,444 --> 00:00:31,790
to share the same general layout.

15
00:00:31,790 --> 00:00:33,924
It would be nice to be able to

16
00:00:33,924 --> 00:00:36,555
define such layout in a single place,

17
00:00:36,555 --> 00:00:38,475
like in a sort of template.

18
00:00:39,472 --> 00:00:41,506
With Next.js we can do that

19
00:00:41,506 --> 00:00:44,143
by creating a custom App component.

20
00:00:44,719 --> 00:00:46,841
Inside "pages" we can create a new file

21
00:00:47,341 --> 00:00:48,727
named "_app.js".

22
00:00:48,727 --> 00:00:51,671
The name begins with an underscore

23
00:00:51,671 --> 00:00:54,095
because it's a special file.

24
00:00:54,095 --> 00:00:56,173
It's not a regular page.

25
00:00:56,932 --> 00:00:58,904
But it's still a React component,

26
00:00:58,904 --> 00:01:01,652
so we can write a function component as usual.

27
00:01:02,798 --> 00:01:05,534
Now, this component will receive some props,

28
00:01:05,534 --> 00:01:07,337
that are passed automatically

29
00:01:07,337 --> 00:01:08,891
by the Next.js framework.

30
00:01:09,516 --> 00:01:12,307
One such props is called "Component".

31
00:01:12,307 --> 00:01:14,269
This is the page component

32
00:01:14,269 --> 00:01:17,438
corresponding to the page being displayed.

33
00:01:17,438 --> 00:01:21,135
So if we're rendering the index page for example,

34
00:01:21,135 --> 00:01:23,625
"Component" will be our HomePage.

35
00:01:23,625 --> 00:01:26,039
But if we load the "/about" path

36
00:01:26,039 --> 00:01:28,680
it will be our AboutPage component.

37
00:01:29,633 --> 00:01:32,837
The other prop we need is called "pageProps",

38
00:01:32,837 --> 00:01:34,546
and as the name suggests

39
00:01:34,546 --> 00:01:36,255
this contains props that

40
00:01:36,255 --> 00:01:38,961
we need to pass to the page component.

41
00:01:39,675 --> 00:01:40,480
As a minimum,

42
00:01:40,480 --> 00:01:42,215
in our App we want to render

43
00:01:42,215 --> 00:01:45,066
the "Component" representing the current page.

44
00:01:45,690 --> 00:01:48,499
And we need to pass all the "pageProps"

45
00:01:48,499 --> 00:01:49,796
to that component,

46
00:01:49,796 --> 00:01:52,029
using the object spread syntax.

47
00:01:52,674 --> 00:01:55,805
And then as usual, we need to export this as

48
00:01:55,805 --> 00:01:58,297
the default export for this module.

49
00:01:58,297 --> 00:02:01,002
So like this, our custom App component

50
00:02:01,002 --> 00:02:03,279
simply renders the desired page,

51
00:02:03,279 --> 00:02:04,988
without adding anything.

52
00:02:05,773 --> 00:02:07,021
Now, let's add at least

53
00:02:07,021 --> 00:02:08,377
a logging statement here,

54
00:02:09,739 --> 00:02:10,779
so we can see when

55
00:02:10,779 --> 00:02:12,339
this component is rendered.

56
00:02:13,838 --> 00:02:15,565
Ok, let's save this file.

57
00:02:15,565 --> 00:02:17,292
Now, when we first create

58
00:02:17,292 --> 00:02:18,880
a custom App component,

59
00:02:19,519 --> 00:02:21,418
we need to manually restart

60
00:02:21,418 --> 00:02:22,474
the dev server.

61
00:02:22,474 --> 00:02:24,796
This is one of the very few cases

62
00:02:24,796 --> 00:02:26,836
where the dev server does not

63
00:02:26,836 --> 00:02:29,229
automatically pick up the changes.

64
00:02:29,229 --> 00:02:30,495
And that's because

65
00:02:30,495 --> 00:02:32,536
the App component is special,

66
00:02:32,536 --> 00:02:35,069
in that it's used for all the pages.

67
00:02:36,062 --> 00:02:37,909
So let's stop the server,

68
00:02:37,909 --> 00:02:38,796
with Ctrl+C,

69
00:02:39,370 --> 00:02:42,063
and then launch "npm run dev" again".

70
00:02:42,563 --> 00:02:43,801
Let's hide the terminal,

71
00:02:44,729 --> 00:02:45,750
and reload the app.

72
00:02:47,329 --> 00:02:48,700
You can see in the browser console

73
00:02:49,200 --> 00:02:52,340
that our new App component was rendered first

74
00:02:52,340 --> 00:02:55,131
and then the HomePage was also rendered.

75
00:02:55,700 --> 00:02:57,920
So this proves that our App component

76
00:02:57,920 --> 00:02:59,001
is getting called.

77
00:02:59,561 --> 00:03:01,789
Now, what we wanted to do is

78
00:03:01,789 --> 00:03:04,176
extract the common page layout

79
00:03:04,176 --> 00:03:06,085
from our existing pages.

80
00:03:06,745 --> 00:03:08,634
So let's copy all these elements,

81
00:03:09,444 --> 00:03:11,048
and go and paste them into

82
00:03:11,048 --> 00:03:12,158
the App component.

83
00:03:12,844 --> 00:03:14,551
But here we want to keep only

84
00:03:14,551 --> 00:03:15,729
the common elements.

85
00:03:16,288 --> 00:03:18,146
The main section will be different

86
00:03:18,146 --> 00:03:18,857
for each page

87
00:03:19,412 --> 00:03:20,385
so let's remove this,

88
00:03:20,885 --> 00:03:23,079
and in its place we want to render

89
00:03:23,079 --> 00:03:24,950
this page-specific component.

90
00:03:26,051 --> 00:03:28,568
So each page can basically insert

91
00:03:28,568 --> 00:03:31,924
its own elements into this sort of template.

92
00:03:32,501 --> 00:03:33,312
If we save now,

93
00:03:33,312 --> 00:03:34,503
well, there's an error

94
00:03:35,057 --> 00:03:36,830
because I forgot to import

95
00:03:36,830 --> 00:03:38,398
the "NavBar" component.

96
00:03:38,966 --> 00:03:40,224
But if we fix that

97
00:03:40,224 --> 00:03:42,249
the App component will render

98
00:03:42,249 --> 00:03:43,506
the common NavBar.

99
00:03:44,145 --> 00:03:45,964
In fact we see two NavBars

100
00:03:45,964 --> 00:03:47,084
on the page now,

101
00:03:47,653 --> 00:03:49,229
that's because the HomePage

102
00:03:49,229 --> 00:03:50,922
also displays its own header.

103
00:03:51,480 --> 00:03:53,529
So we can remove it from here now,

104
00:03:53,529 --> 00:03:55,457
given that it's already provided

105
00:03:55,457 --> 00:03:57,144
by the common App component.

106
00:03:57,764 --> 00:03:59,311
And this way we should see

107
00:03:59,311 --> 00:04:00,262
a single NavBar.

108
00:04:00,821 --> 00:04:02,994
We can actually remove this import as well.

109
00:04:04,121 --> 00:04:06,127
Ok, the HomePage is working.

110
00:04:06,627 --> 00:04:08,433
If we go to the About page,

111
00:04:08,433 --> 00:04:10,639
again we'll see the NavBar twice.

112
00:04:11,205 --> 00:04:13,233
Because the AboutPage still adds

113
00:04:13,233 --> 00:04:14,184
its own header.

114
00:04:14,747 --> 00:04:16,452
Let's remove it from here as well,

115
00:04:16,952 --> 00:04:18,673
and also get rid of the import,

116
00:04:19,185 --> 00:04:20,089
and that's it,

117
00:04:20,089 --> 00:04:21,769
the About page looks good.

118
00:04:21,769 --> 00:04:23,515
By the way, we could remove

119
00:04:23,515 --> 00:04:26,229
the fragment that wraps the "main" element

120
00:04:26,229 --> 00:04:27,005
in this code

121
00:04:27,005 --> 00:04:28,943
but it will be useful later on

122
00:04:28,943 --> 00:04:30,753
when we add some more stuff,

123
00:04:30,753 --> 00:04:32,756
so I'm going to leave it there.

124
00:04:33,709 --> 00:04:36,124
Also note in the browser console

125
00:04:36,124 --> 00:04:39,220
how the App component is always rendered,

126
00:04:39,220 --> 00:04:40,579
before every page.

127
00:04:41,230 --> 00:04:43,206
In fact, now that we've seen this

128
00:04:43,206 --> 00:04:45,482
I'm going to remove that log statement

129
00:04:46,042 --> 00:04:48,142
otherwise it'll keep being logged

130
00:04:48,142 --> 00:04:49,288
every single time.

131
00:04:49,852 --> 00:04:51,370
Ok. But this is how

132
00:04:51,370 --> 00:04:53,609
a custom App component works

133
00:04:53,609 --> 00:04:54,488
in Next.js.

134
00:04:54,488 --> 00:04:56,966
It's the perfect place to write

135
00:04:56,966 --> 00:04:59,684
code that applies to all the pages

136
00:04:59,684 --> 00:05:01,283
in your application.