1
00:00:03,000 --> 00:00:04,935
In this video we'll create

2
00:00:04,935 --> 00:00:06,871
our first Next.js project.

3
00:00:06,871 --> 00:00:08,360
Now, the easiest way

4
00:00:08,360 --> 00:00:10,965
to initialise a Next.js application

5
00:00:11,689 --> 00:00:13,678
is to use the "create-next-app"

6
00:00:13,678 --> 00:00:14,833
command line tool,

7
00:00:15,397 --> 00:00:16,742
and we'll look at this tool

8
00:00:16,742 --> 00:00:17,739
later in the course.

9
00:00:18,289 --> 00:00:19,433
But to begin with

10
00:00:19,433 --> 00:00:21,588
I want to show you how to set up

11
00:00:21,588 --> 00:00:24,011
a new project entirely from scratch,

12
00:00:24,011 --> 00:00:25,762
because this will give you

13
00:00:25,762 --> 00:00:27,445
a better understanding of

14
00:00:27,445 --> 00:00:29,600
how a Next.js app is structured.

15
00:00:29,600 --> 00:00:32,024
Here I have Visual Studio Code open,

16
00:00:32,024 --> 00:00:34,178
with its default Welcome screen.

17
00:00:35,150 --> 00:00:36,611
What I'm going to do now

18
00:00:36,611 --> 00:00:37,647
is open a folder,

19
00:00:38,208 --> 00:00:40,109
I'll select my "Projects" folder,

20
00:00:40,109 --> 00:00:42,530
which is where I like to keep my projects.

21
00:00:43,088 --> 00:00:45,570
And inside there I'll create a new folder,

22
00:00:45,570 --> 00:00:47,107
let's call it "next-blog".

23
00:00:47,667 --> 00:00:50,810
since it's a blog written using Next.js.

24
00:00:51,310 --> 00:00:53,472
So I'm going to open this new folder

25
00:00:53,472 --> 00:00:54,793
in Visual Studio Code.

26
00:00:54,793 --> 00:00:56,955
Right now it's just empty of course.

27
00:00:57,576 --> 00:00:59,349
Now, let's go and create a new file

28
00:00:59,849 --> 00:01:01,223
called "package.json",

29
00:01:01,723 --> 00:01:03,538
so we can use npm to manage

30
00:01:03,538 --> 00:01:05,218
the project dependencies,

31
00:01:05,218 --> 00:01:07,639
like all modern JavaScript projects.

32
00:01:08,274 --> 00:01:09,846
Here we need at least a "name",

33
00:01:10,346 --> 00:01:12,419
that we can set to "next-blog",

34
00:01:12,419 --> 00:01:14,025
same as the folder name.

35
00:01:14,592 --> 00:01:16,699
And then let's set "private" to "true",

36
00:01:17,925 --> 00:01:20,323
because this project is not a library

37
00:01:20,323 --> 00:01:23,175
that we want to publish to the npm registry.

38
00:01:23,740 --> 00:01:25,345
Ok, let's save this file.

39
00:01:25,845 --> 00:01:28,106
Now I'm going to open a new Terminal,

40
00:01:28,106 --> 00:01:29,695
inside Visual Studio Code.

41
00:01:30,257 --> 00:01:33,235
And here we can use the "npm" command line tool

42
00:01:33,235 --> 00:01:35,073
to install some dependencies.

43
00:01:35,637 --> 00:01:38,897
We want the "next" package, that's Next.js,

44
00:01:39,397 --> 00:01:41,603
and then "react" and "react-dom",

45
00:01:41,603 --> 00:01:43,876
just like a regular React web app.

46
00:01:44,443 --> 00:01:45,937
Let's wait a few seconds

47
00:01:45,937 --> 00:01:48,491
for npm to download all the dependencies.

48
00:01:49,809 --> 00:01:51,070
Ok. You can see that

49
00:01:51,070 --> 00:01:53,340
those three packages have been added

50
00:01:53,340 --> 00:01:56,366
to our "package.json" file under "dependencies".

51
00:01:56,993 --> 00:01:59,370
And also there's a "node_modules" folder

52
00:01:59,370 --> 00:02:00,677
with all the packages.

53
00:02:01,237 --> 00:02:04,072
Now, inside here there's a ".bin" folder,

54
00:02:04,072 --> 00:02:06,284
that contains command line tools

55
00:02:06,284 --> 00:02:08,634
installed along with the packages.

56
00:02:09,274 --> 00:02:11,447
And one of these tools is "next".

57
00:02:11,947 --> 00:02:14,222
This is the main tool we can use

58
00:02:14,222 --> 00:02:16,355
to manage our Next.js project.

59
00:02:16,927 --> 00:02:17,933
Let's see how it works.

60
00:02:20,160 --> 00:02:22,563
In the terminal we can use "npx"

61
00:02:22,563 --> 00:02:25,566
to execute that "next" command directly,

62
00:02:26,142 --> 00:02:28,621
and we can pass the "--help" option

63
00:02:28,621 --> 00:02:30,817
to see some usage instructions.

64
00:02:31,388 --> 00:02:33,813
It says that we can tell this tool

65
00:02:33,813 --> 00:02:36,738
to "build", "start", "export", and so on.

66
00:02:36,738 --> 00:02:38,593
In fact, the first command

67
00:02:38,593 --> 00:02:40,305
we want to use is "dev",

68
00:02:40,305 --> 00:02:41,946
that starts our project

69
00:02:41,946 --> 00:02:43,801
in the development server.

70
00:02:44,658 --> 00:02:45,578
Let's try that out.

71
00:02:46,258 --> 00:02:48,701
Let's run "npx next dev",

72
00:02:49,458 --> 00:02:51,230
and it failed with an error.

73
00:02:51,730 --> 00:02:53,267
What the error says is

74
00:02:53,267 --> 00:02:55,573
"Couldn't find a pages directory"

75
00:02:55,573 --> 00:02:56,971
"Please create one".

76
00:02:57,611 --> 00:02:59,088
That's a helpful message:

77
00:02:59,088 --> 00:03:01,275
not only it says what the problem is,

78
00:03:01,275 --> 00:03:03,107
it also tells us how to fix it.

79
00:03:03,726 --> 00:03:05,507
So let's go and create a new folder

80
00:03:05,507 --> 00:03:07,085
at the top level of our project

81
00:03:07,636 --> 00:03:08,875
named "pages".

82
00:03:09,402 --> 00:03:11,223
Now, since we're going to use

83
00:03:11,223 --> 00:03:13,484
that "next dev" command all the time

84
00:03:14,047 --> 00:03:15,635
I'll add a "scripts" section

85
00:03:15,635 --> 00:03:17,166
to our "package.json" file,

86
00:03:18,247 --> 00:03:20,750
and here configure a "dev" script

87
00:03:20,750 --> 00:03:22,950
that will execute "next dev".

88
00:03:23,526 --> 00:03:25,332
This way, if we go back to our terminal

89
00:03:26,259 --> 00:03:28,466
we can now type "npm run dev"

90
00:03:28,966 --> 00:03:30,688
and this will take care of

91
00:03:30,688 --> 00:03:32,014
launching "next dev"

92
00:03:32,014 --> 00:03:33,869
as defined in our "scripts".

93
00:03:33,869 --> 00:03:37,315
You can see that, now that we have a "pages" folder,

94
00:03:37,315 --> 00:03:40,230
the development server started successfully.

95
00:03:40,996 --> 00:03:43,392
And it's running at this URL:

96
00:03:43,392 --> 00:03:45,292
localhost on port 3000.

97
00:03:45,875 --> 00:03:47,581
Let's open it in the web browser.

98
00:03:48,081 --> 00:03:51,770
What we get at the moment is a "404 not found" page,

99
00:03:51,770 --> 00:03:54,111
which is not entirely surprising,

100
00:03:54,111 --> 00:03:57,232
given that we haven't created any pages yet.

101
00:03:57,873 --> 00:03:59,504
But this already shows that

102
00:03:59,504 --> 00:04:01,557
the development server is working.

103
00:04:02,117 --> 00:04:05,111
I'll resize these windows, so I can show you

104
00:04:05,111 --> 00:04:07,831
the editor and the browser side by side.

105
00:04:08,400 --> 00:04:10,432
And let me hide the Terminal.

106
00:04:10,432 --> 00:04:12,955
The dev server will still be running

107
00:04:12,955 --> 00:04:14,918
in the background of course.

108
00:04:14,918 --> 00:04:16,600
It is now time to create

109
00:04:16,600 --> 00:04:18,212
our first Next.js page.

110
00:04:18,992 --> 00:04:20,511
Inside our "pages" folder

111
00:04:20,511 --> 00:04:22,091
we want to add a new file,

112
00:04:22,651 --> 00:04:25,225
which we want to call "index.js",

113
00:04:25,725 --> 00:04:28,198
because it will be the index page

114
00:04:28,198 --> 00:04:29,621
of our application.

115
00:04:29,621 --> 00:04:33,442
But, what exactly is a "page" in a Next.js project?

116
00:04:33,442 --> 00:04:35,989
For now, you can think of a "page"

117
00:04:35,989 --> 00:04:38,761
simply as a standard React component.

118
00:04:39,560 --> 00:04:42,951
Let's write a function component called "HomePage",

119
00:04:42,951 --> 00:04:45,477
since that's what the "index" page is.

120
00:04:46,043 --> 00:04:48,849
And here we'll return some JSX elements,

121
00:04:48,849 --> 00:04:51,304
like all React function components.

122
00:04:51,875 --> 00:04:54,161
I like having a "main" element

123
00:04:54,161 --> 00:04:57,513
as the root of a page, to use semantic HTML.

124
00:04:58,089 --> 00:05:01,179
And here we could have a simple "h1" heading,

125
00:05:01,179 --> 00:05:03,170
saying "My Blog" for example.

126
00:05:03,738 --> 00:05:07,183
So this is just a very simple React component.

127
00:05:07,683 --> 00:05:10,009
The only other thing we need to do

128
00:05:10,009 --> 00:05:11,787
is to export the component

129
00:05:11,787 --> 00:05:14,181
as the default export of this file.

130
00:05:14,817 --> 00:05:16,692
With this, we can now save the file,

131
00:05:17,192 --> 00:05:20,152
and try and reload the same URL in the browser.

132
00:05:20,652 --> 00:05:22,259
You can see that it works!

133
00:05:22,259 --> 00:05:24,793
Our HomePage component is being displayed

134
00:05:24,793 --> 00:05:27,080
as the index page of our application.

135
00:05:27,703 --> 00:05:29,770
I'll open the Chrome Developer Tools,

136
00:05:29,770 --> 00:05:31,726
so we can see any Console messages.

137
00:05:32,281 --> 00:05:34,489
And, since we're running our Next.js app

138
00:05:34,489 --> 00:05:35,538
in development mode

139
00:05:36,093 --> 00:05:39,102
this means that if we make any changes to our code

140
00:05:39,602 --> 00:05:41,742
like if I write "Mirko's blog" here

141
00:05:42,242 --> 00:05:43,359
as soon as I save

142
00:05:43,359 --> 00:05:45,328
the app updates automatically,

143
00:05:45,328 --> 00:05:47,298
reflecting the latest changes.

144
00:05:47,298 --> 00:05:49,728
As you would expect when working with

145
00:05:49,728 --> 00:05:51,238
a modern web framework.

146
00:05:52,000 --> 00:05:53,772
Let me quickly revert this change.

147
00:05:54,272 --> 00:05:57,938
Now, before we move on, note how the "next" command

148
00:05:57,938 --> 00:06:00,885
created a ".next" folder in your project.

149
00:06:01,456 --> 00:06:03,509
You don't really need to worry about

150
00:06:03,509 --> 00:06:04,592
what's inside here,

151
00:06:05,149 --> 00:06:07,206
but if you use Git in your project

152
00:06:07,706 --> 00:06:09,536
make sure to add that folder

153
00:06:09,536 --> 00:06:11,235
to your ".gitignore" file,

154
00:06:12,172 --> 00:06:14,666
because it contains temporary build files,

155
00:06:14,666 --> 00:06:17,160
that shouldn't be kept in version control.

156
00:06:17,719 --> 00:06:19,406
Just like you want to ignore

157
00:06:19,406 --> 00:06:22,539
the "node_modules" folder with all the dependencies.

158
00:06:23,099 --> 00:06:25,842
So this was just a quick note if you use Git.

159
00:06:26,342 --> 00:06:27,731
But with that aside,

160
00:06:27,731 --> 00:06:30,229
we created our first Next.js project

161
00:06:30,229 --> 00:06:32,103
and wrote our first "page",

162
00:06:32,103 --> 00:06:33,699
which, as it turns out,

163
00:06:33,699 --> 00:06:36,128
is simply a normal React component.

164
00:06:36,128 --> 00:06:39,321
But as simple as this page may look right now,

165
00:06:39,321 --> 00:06:41,611
believe it or not there's already

166
00:06:41,611 --> 00:06:43,277
a big difference between

167
00:06:43,277 --> 00:06:45,914
how this page is rendered with Next.js

168
00:06:45,914 --> 00:06:47,441
and how a similar page

169
00:06:47,441 --> 00:06:50,148
would be rendered in a plain React app.

170
00:06:50,148 --> 00:06:52,507
We'll see exactly what's different

171
00:06:52,507 --> 00:06:53,757
in the next video.