1
00:00:03,000 --> 00:00:05,073
In this video we'll set up

2
00:00:05,073 --> 00:00:07,146
our first Next.js project.

3
00:00:07,226 --> 00:00:11,218
Now, the easiest way to initalize a new project

4
00:00:11,218 --> 00:00:14,442
is to use the "create-next-app" command,

5
00:00:14,442 --> 00:00:16,937
that you can run in a terminal

6
00:00:16,937 --> 00:00:19,016
with "npx" as shown here.

7
00:00:19,099 --> 00:00:21,985
That command will ask you a few questions,

8
00:00:21,985 --> 00:00:24,022
like the name of your project,

9
00:00:24,022 --> 00:00:26,014
if you want to use TypeScript

10
00:00:26,014 --> 00:00:28,006
rather than plain JavaScript,

11
00:00:28,075 --> 00:00:29,521
and a few other things,

12
00:00:29,521 --> 00:00:32,232
and then it will generate a project for you,

13
00:00:32,232 --> 00:00:34,186
with everything already set

14
00:00:34,186 --> 00:00:35,994
up based on your choices.

15
00:00:36,066 --> 00:00:37,741
This is very convenient,

16
00:00:37,741 --> 00:00:39,600
and I definitely recommend

17
00:00:39,600 --> 00:00:41,316
using "create-next-app",

18
00:00:41,388 --> 00:00:44,229
once you're familiar with Next.js.

19
00:00:44,229 --> 00:00:47,894
However, it's not really the best choice when

20
00:00:47,894 --> 00:00:50,826
learning Next.js for the first time,

21
00:00:50,907 --> 00:00:53,537
because "create-next-app" generates a

22
00:00:53,537 --> 00:00:56,166
project with lots of different files,

23
00:00:56,237 --> 00:00:58,455
using many different features,

24
00:00:58,455 --> 00:01:01,122
and it can be a bit overwhelming

25
00:01:01,122 --> 00:01:02,622
to start that way.

26
00:01:02,705 --> 00:01:04,721
So we'll set up our first

27
00:01:04,721 --> 00:01:06,736
project manually instead,

28
00:01:06,817 --> 00:01:09,387
and add one feature at a time,

29
00:01:09,387 --> 00:01:11,770
to make sure you fully understand

30
00:01:11,770 --> 00:01:13,864
all the various moving parts.

31
00:01:13,936 --> 00:01:15,469
Let's see how to do that.

32
00:01:15,469 --> 00:01:18,882
I'll use Visual Studio Code as my editor,

33
00:01:18,882 --> 00:01:22,112
and this is just its initial Welcome screen.

34
00:01:22,112 --> 00:01:24,174
To create a new project, I'll

35
00:01:24,174 --> 00:01:25,667
go and Open a folder.

36
00:01:25,738 --> 00:01:28,284
Now, I like to keep all my projects

37
00:01:28,284 --> 00:01:30,466
in a folder called "Projects",

38
00:01:30,538 --> 00:01:34,159
but you can select a different location on your machine,

39
00:01:34,159 --> 00:01:34,806
of course.

40
00:01:34,870 --> 00:01:37,492
The important thing is that we want to

41
00:01:37,492 --> 00:01:39,769
create a New Folder inside there,

42
00:01:39,838 --> 00:01:42,070
and call it "next-reviews",

43
00:01:42,358 --> 00:01:44,667
that will be the name of our project.

44
00:01:44,667 --> 00:01:46,735
With this new folder selected,

45
00:01:46,735 --> 00:01:48,563
I can now click Open,

46
00:01:48,695 --> 00:01:50,804
and this will show that folder

47
00:01:50,804 --> 00:01:52,351
in Visual Studio Code.

48
00:01:52,421 --> 00:01:54,760
Right now it's completely empty.

49
00:01:54,760 --> 00:01:56,667
Let's go and create a new file,

50
00:01:56,667 --> 00:01:58,825
called "package.json",

51
00:01:58,825 --> 00:02:02,852
that we'll use to manage our project with "npm".

52
00:02:02,852 --> 00:02:05,897
This file must contain a JSON object,

53
00:02:05,897 --> 00:02:08,947
with at least the "name" of our project,

54
00:02:08,947 --> 00:02:10,997
that is "next-reviews".

55
00:02:11,607 --> 00:02:13,989
Then we want to set the "private"

56
00:02:13,989 --> 00:02:15,361
property to "true",

57
00:02:15,433 --> 00:02:18,349
because this is not a package we want

58
00:02:18,349 --> 00:02:20,793
to publish to the npm registry.

59
00:02:20,872 --> 00:02:23,535
At this point we can save this file.

60
00:02:23,535 --> 00:02:25,994
Now I'll open a New Terminal,

61
00:02:25,994 --> 00:02:28,392
and I'm using the menu just to show

62
00:02:28,392 --> 00:02:30,653
you where to find the right item,

63
00:02:30,721 --> 00:02:34,666
but I'll be using a keyboard shortcut from now on.

64
00:02:34,666 --> 00:02:38,048
Also, I'm using the terminal integrated with

65
00:02:38,048 --> 00:02:39,431
Visual Studio Code

66
00:02:39,508 --> 00:02:42,462
just so everything is in the same window,

67
00:02:42,462 --> 00:02:45,849
but you can use a separate terminal if you prefer,

68
00:02:45,849 --> 00:02:46,526
of course.

69
00:02:46,594 --> 00:02:48,690
Anyway, what we want to do

70
00:02:48,690 --> 00:02:50,707
here is run "npm install"

71
00:02:50,787 --> 00:02:53,578
to download the necessary dependencies

72
00:02:53,578 --> 00:02:54,754
for our project.

73
00:02:54,827 --> 00:02:58,339
We need "next", that is the Next.js package,

74
00:02:58,339 --> 00:03:01,490
and also "react" and "react-dom",

75
00:03:01,490 --> 00:03:05,624
because Next.js is built on top of React.

76
00:03:05,624 --> 00:03:08,774
This will download everything that's needed.

77
00:03:08,774 --> 00:03:12,827
As you might know, npm saves all the files

78
00:03:12,827 --> 00:03:16,012
inside the "node_modules" folder.

79
00:03:16,108 --> 00:03:18,533
In fact, inside here we can see the

80
00:03:18,533 --> 00:03:20,473
three packages we requested,

81
00:03:20,543 --> 00:03:23,814
along with all their transitive dependencies.

82
00:03:23,814 --> 00:03:27,150
Ok. We can close the Terminal for the moment.

83
00:03:27,150 --> 00:03:30,040
What we need now in our project is

84
00:03:30,040 --> 00:03:32,760
a folder where to put our pages.

85
00:03:32,845 --> 00:03:36,555
And in this example we'll use the "app" folder,

86
00:03:36,555 --> 00:03:39,002
that is the new Next.js router.

87
00:03:39,081 --> 00:03:41,713
Inside this folder we need a

88
00:03:41,713 --> 00:03:44,063
file called "layout.jsx".

89
00:03:44,157 --> 00:03:47,169
This will contain the "root layout",

90
00:03:47,169 --> 00:03:49,854
that is like a template HTML

91
00:03:49,854 --> 00:03:52,443
document for all our pages.

92
00:03:52,538 --> 00:03:55,882
This file must export a React component

93
00:03:55,882 --> 00:03:57,940
as the "default" export,

94
00:03:58,026 --> 00:04:00,883
and we'll write a function component,

95
00:04:00,883 --> 00:04:02,427
called "RootLayout".

96
00:04:02,504 --> 00:04:05,303
The component name doesn't actually matter,

97
00:04:05,303 --> 00:04:07,149
the important thing is that

98
00:04:07,149 --> 00:04:08,858
it is the default export.

99
00:04:08,927 --> 00:04:12,082
Here we'll return some JSX elements,

100
00:04:12,082 --> 00:04:15,808
and since this is the template for all our pages

101
00:04:15,808 --> 00:04:18,902
we want to start with the "html" element,

102
00:04:18,902 --> 00:04:21,447
which then contains the "body".

103
00:04:21,447 --> 00:04:23,760
It's also good practice to set the

104
00:04:23,760 --> 00:04:25,665
"language" for the document;

105
00:04:25,733 --> 00:04:28,556
let's write "en" for English.

106
00:04:28,556 --> 00:04:32,062
So, this is a minimal HTML document.

107
00:04:32,062 --> 00:04:34,618
Since this is effectively a template,

108
00:04:34,618 --> 00:04:37,197
we'll want to insert the contents

109
00:04:37,197 --> 00:04:38,682
for each page here.

110
00:04:38,760 --> 00:04:41,876
We can do that in the standard React way.

111
00:04:41,876 --> 00:04:44,700
Like all components, this RootLayout

112
00:04:44,700 --> 00:04:46,740
will receive some "props".

113
00:04:46,818 --> 00:04:50,596
And we can use the object destructuring syntax

114
00:04:50,596 --> 00:04:53,306
to extract individual properties.

115
00:04:53,388 --> 00:04:55,667
Each layout component will receive

116
00:04:55,667 --> 00:04:57,611
a property called "children",

117
00:04:57,678 --> 00:05:00,020
that will contain the elements

118
00:05:00,020 --> 00:05:01,581
for a specific page.

119
00:05:01,659 --> 00:05:05,979
So what we want to do is simply insert the "children"

120
00:05:05,979 --> 00:05:09,076
as a JSX expression inside the "body".

121
00:05:09,157 --> 00:05:11,459
We'll see this in action after

122
00:05:11,459 --> 00:05:13,378
we create our first page.

123
00:05:13,454 --> 00:05:16,312
Let's save this RootLayout now.

124
00:05:16,312 --> 00:05:20,527
By the way, I'll use ".jsx" as the extension

125
00:05:20,527 --> 00:05:23,975
for all files that contain JSX code,

126
00:05:24,071 --> 00:05:26,327
which effectively means any file

127
00:05:26,327 --> 00:05:28,584
that contains a React component.

128
00:05:28,655 --> 00:05:31,212
You can use ".js" instead for

129
00:05:31,212 --> 00:05:33,681
all the files if you prefer,

130
00:05:33,769 --> 00:05:35,670
but I think it's clearer to

131
00:05:35,670 --> 00:05:37,429
use a different extension

132
00:05:37,499 --> 00:05:40,040
for the files that contain React

133
00:05:40,040 --> 00:05:42,024
components with JSX code,

134
00:05:42,103 --> 00:05:45,509
as opposed to regular JavaScript files.

135
00:05:45,509 --> 00:05:48,219
Anyway, let's see how to run our app,

136
00:05:48,219 --> 00:05:49,391
in the terminal.

137
00:05:49,464 --> 00:05:51,927
Inside "node_modules" there's

138
00:05:51,927 --> 00:05:53,795
a folder called ".bin"

139
00:05:53,880 --> 00:05:58,001
where npm puts all the executable commands

140
00:05:58,001 --> 00:06:00,178
installed along with the packages

141
00:06:00,178 --> 00:06:01,497
in our dependencies.

142
00:06:01,562 --> 00:06:04,922
And there is a command line tool called "next",

143
00:06:04,922 --> 00:06:08,616
that we can use to manage our Next.js project.

144
00:06:08,616 --> 00:06:10,837
We can run it with "npx",

145
00:06:10,837 --> 00:06:12,715
that will automatically find

146
00:06:12,715 --> 00:06:14,258
it in the right folder,

147
00:06:14,325 --> 00:06:16,736
and if we pass the "--help" option

148
00:06:16,736 --> 00:06:19,678
it prints some usage instructions.

149
00:06:19,678 --> 00:06:24,320
The "next" tool accepts a command, that can be "build",

150
00:06:24,320 --> 00:06:25,924
"start", and so on.

151
00:06:26,008 --> 00:06:29,080
What we're interested in right now is "dev",

152
00:06:29,080 --> 00:06:32,298
that will start a local development server.

153
00:06:32,298 --> 00:06:35,083
So, let's try running "next dev".

154
00:06:35,318 --> 00:06:38,284
You can see that it started a server

155
00:06:38,284 --> 00:06:41,086
on our local machine on port 3000.

156
00:06:41,169 --> 00:06:42,889
If we click this link it will

157
00:06:42,889 --> 00:06:44,253
open it in the browser,

158
00:06:44,312 --> 00:06:48,164
and, at the moment, it just shows a 404 page,

159
00:06:48,164 --> 00:06:50,976
saying "this page could not be found".

160
00:06:50,976 --> 00:06:53,542
That's because we haven't actually

161
00:06:53,542 --> 00:06:56,032
created any pages in our app yet.

162
00:06:56,108 --> 00:06:58,264
But this already shows that

163
00:06:58,264 --> 00:07:00,341
the dev server is working.

164
00:07:00,420 --> 00:07:03,850
We'll create a home page in the next video.

165
00:07:03,850 --> 00:07:07,392
Before concluding, note how running "next

166
00:07:07,392 --> 00:07:10,588
dev" created a folder called ".next".

167
00:07:10,675 --> 00:07:13,319
This contains lots of files generated

168
00:07:13,319 --> 00:07:15,320
automatically by the server.

169
00:07:15,392 --> 00:07:17,267
We don't really need to worry

170
00:07:17,267 --> 00:07:18,691
about what's in there.

171
00:07:18,755 --> 00:07:21,912
But if you use Git for version control,

172
00:07:21,912 --> 00:07:24,832
you'll want to create a ".gitignore" file

173
00:07:24,832 --> 00:07:27,518
listing all the files and folders

174
00:07:27,518 --> 00:07:30,121
that should not be added to Git.

175
00:07:30,203 --> 00:07:33,915
Here you want to include that ".next" folder,

176
00:07:33,915 --> 00:07:36,010
along with "node_modules",

177
00:07:36,010 --> 00:07:40,286
that contains all the packages downloaded by npm.

178
00:07:40,286 --> 00:07:43,686
You don't have to use Git for this course,

179
00:07:43,686 --> 00:07:46,388
but I'm sure you'll use a version control

180
00:07:46,388 --> 00:07:48,695
system in a real world application.

181
00:07:48,761 --> 00:07:52,917
Anyway, we set up our Next.js project,

182
00:07:52,917 --> 00:07:55,387
by installing the dependencies

183
00:07:55,387 --> 00:07:57,281
listed in package.json.

184
00:07:57,364 --> 00:08:00,652
Then we created a RootLayout component

185
00:08:00,652 --> 00:08:02,728
inside the "app" folder,

186
00:08:02,815 --> 00:08:06,888
and started a local server by running "next dev".