1
00:00:03,000 --> 00:00:05,596
In this video we'll create a new project

2
00:00:05,596 --> 00:00:06,959
for our Shop website.

3
00:00:06,959 --> 00:00:08,452
And this time we'll use

4
00:00:08,452 --> 00:00:10,075
the Create Next App tool,

5
00:00:10,075 --> 00:00:12,866
rather than starting entirely from scratch.

6
00:00:13,625 --> 00:00:14,596
So let's open a terminal,

7
00:00:15,096 --> 00:00:16,400
and I'll change directory

8
00:00:16,400 --> 00:00:17,652
to my "Projects" folder,

9
00:00:18,204 --> 00:00:20,477
same place I used for our first example.

10
00:00:20,977 --> 00:00:23,969
Here we can run "npx create-next-app"

11
00:00:24,469 --> 00:00:26,510
and then the name of the new project,

12
00:00:26,510 --> 00:00:27,612
that is "next-shop".

13
00:00:28,167 --> 00:00:29,685
This will take a few seconds,

14
00:00:29,685 --> 00:00:31,725
to download all the necessary packages.

15
00:00:33,768 --> 00:00:35,278
Ok, so now we should see

16
00:00:35,278 --> 00:00:37,291
a new folder called "next-shop",

17
00:00:37,291 --> 00:00:38,990
containing our new project.

18
00:00:39,615 --> 00:00:42,090
Let's open that folder in Visual Studio Code.

19
00:00:43,216 --> 00:00:45,215
And this is the initial project

20
00:00:45,215 --> 00:00:47,280
as generated by Create Next App.

21
00:00:47,844 --> 00:00:49,725
In the package.json you can see

22
00:00:49,725 --> 00:00:52,333
the same dependencies we manually installed

23
00:00:52,333 --> 00:00:53,606
in our first example,

24
00:00:54,228 --> 00:00:56,234
that are "next" and "react".

25
00:00:56,234 --> 00:00:57,667
And we have the same

26
00:00:57,667 --> 00:01:00,247
"dev", "build", and "start" scripts.

27
00:01:00,247 --> 00:01:03,687
There's also an additional script called "lint",

28
00:01:03,687 --> 00:01:06,912
along with "eslint" in the "devDependencies".

29
00:01:06,912 --> 00:01:09,421
As you might know, ESLint is a tool

30
00:01:09,421 --> 00:01:12,646
that can help you find problems in your code.

31
00:01:13,575 --> 00:01:15,795
The project includes a "README" file,

32
00:01:15,795 --> 00:01:17,954
that initially has some instructions

33
00:01:17,954 --> 00:01:20,174
on how to run the development server.

34
00:01:20,793 --> 00:01:22,829
There's a "pages" folder,

35
00:01:22,829 --> 00:01:25,271
that contains an "index" page,

36
00:01:25,271 --> 00:01:26,818
and also "_app.js".

37
00:01:27,480 --> 00:01:29,929
Now, this "api" folder also contains

38
00:01:29,929 --> 00:01:31,969
something we haven't seen yet:

39
00:01:31,969 --> 00:01:33,874
this is called an API route.

40
00:01:33,874 --> 00:01:36,526
But let's not worry about this for now,

41
00:01:36,526 --> 00:01:38,906
we'll cover it later in the course.

42
00:01:39,679 --> 00:01:41,410
In fact, we can just delete

43
00:01:41,410 --> 00:01:43,525
this "api" folder for the moment.

44
00:01:44,090 --> 00:01:46,085
If we look at "_app.js"

45
00:01:46,085 --> 00:01:48,513
it's a minimal App component

46
00:01:48,513 --> 00:01:51,636
that imports some global CSS styles.

47
00:01:52,310 --> 00:01:53,769
While in "index.js"

48
00:01:53,769 --> 00:01:56,074
we have a Home page component,

49
00:01:56,074 --> 00:01:58,072
with some initial content.

50
00:01:58,725 --> 00:02:00,833
There's also a "public" folder,

51
00:02:00,833 --> 00:02:01,921
with a "favicon"

52
00:02:01,921 --> 00:02:04,777
and another image that is the Vercel logo.

53
00:02:05,412 --> 00:02:06,450
Under "styles"

54
00:02:06,450 --> 00:02:08,229
there's a "globals.css",

55
00:02:08,229 --> 00:02:11,045
setting things like the "font-family".

56
00:02:11,694 --> 00:02:14,655
And then there's a "Home.module.css".

57
00:02:14,655 --> 00:02:18,416
This defines some styles used in the Home page.

58
00:02:18,996 --> 00:02:20,868
This is using "CSS modules",

59
00:02:20,868 --> 00:02:23,274
rather than "styled-jsx" like we did

60
00:02:23,274 --> 00:02:24,678
in our first example.

61
00:02:25,311 --> 00:02:28,052
Then there's a configuration file for ESLint,

62
00:02:28,552 --> 00:02:30,638
and by the way if you want to see

63
00:02:30,638 --> 00:02:33,419
the ESLint suggestion in Visual Studio Code,

64
00:02:33,419 --> 00:02:35,378
you can install this extension.

65
00:02:36,004 --> 00:02:37,705
It should be the first result

66
00:02:37,705 --> 00:02:39,289
if you search for "eslint".

67
00:02:39,847 --> 00:02:42,636
Back to our project, there's a ".gitignore"

68
00:02:42,636 --> 00:02:44,257
with files that should be

69
00:02:44,257 --> 00:02:46,202
excluded from version control.

70
00:02:46,831 --> 00:02:49,714
And then there's a "next.config.js"

71
00:02:49,714 --> 00:02:53,667
that contains configuration specific to Next.js.

72
00:02:54,250 --> 00:02:56,021
We can usually leave it as it is.

73
00:02:56,521 --> 00:02:57,803
Now, let's run this app

74
00:02:57,803 --> 00:02:59,307
and see what it looks like.

75
00:03:00,187 --> 00:03:02,080
In the terminal we can launch

76
00:03:02,080 --> 00:03:03,516
"npm run dev" as usual

77
00:03:03,516 --> 00:03:05,605
to start the development server.

78
00:03:06,235 --> 00:03:08,174
Let's open the URL in a web browser.

79
00:03:10,801 --> 00:03:12,451
And this is the Home page

80
00:03:12,451 --> 00:03:14,365
generated by Create Next App.

81
00:03:14,930 --> 00:03:16,921
It's just some initial content that

82
00:03:16,921 --> 00:03:19,253
we're going to completely replace anyway.

83
00:03:19,809 --> 00:03:22,077
The code generated by Create Next App

84
00:03:22,077 --> 00:03:24,161
tends to change from time to time,

85
00:03:25,109 --> 00:03:27,080
so by the time you watch this video

86
00:03:27,080 --> 00:03:28,713
it may be slightly different.

87
00:03:29,269 --> 00:03:31,715
But that doesn't really matter, because

88
00:03:31,715 --> 00:03:33,408
what I'm going to do now is

89
00:03:33,408 --> 00:03:36,731
delete all the JSX elements from this Home component.

90
00:03:37,356 --> 00:03:38,748
And we're going to write

91
00:03:38,748 --> 00:03:40,140
our own content instead.

92
00:03:41,022 --> 00:03:44,174
We can start with a "title" in the "Head" section,

93
00:03:44,174 --> 00:03:45,371
saying "Next Shop".

94
00:03:45,934 --> 00:03:47,647
Then add a "main" section,

95
00:03:47,647 --> 00:03:50,415
with a heading that also says "Next Shop".

96
00:03:51,034 --> 00:03:52,104
And this will do for now.

97
00:03:52,604 --> 00:03:54,596
I'm going to add some semicolons,

98
00:03:54,596 --> 00:03:57,313
because the generated code doesn't have them.

99
00:03:57,313 --> 00:03:59,244
It's just a matter of preference

100
00:03:59,244 --> 00:04:01,478
which coding style you want to adopt,

101
00:04:01,478 --> 00:04:04,315
but we did use semicolons in our first example,

102
00:04:04,315 --> 00:04:06,790
so let's keep doing that for consistency.

103
00:04:07,591 --> 00:04:09,997
We can also remove these two imports,

104
00:04:09,997 --> 00:04:12,338
that were only used by the old code.

105
00:04:12,903 --> 00:04:15,794
I'll move the "export" statement at the bottom,

106
00:04:15,794 --> 00:04:17,454
again just for consistency.

107
00:04:18,016 --> 00:04:19,476
And in the same vein,

108
00:04:19,476 --> 00:04:22,259
I'll rename the component to "HomePage".

109
00:04:22,829 --> 00:04:24,674
Ok, let's save this file.

110
00:04:24,674 --> 00:04:27,701
And this is our new very basic Home page.

111
00:04:28,275 --> 00:04:29,712
Let's open the Dev Tools,

112
00:04:29,712 --> 00:04:31,494
always useful while developing.

113
00:04:32,052 --> 00:04:33,998
And this is the Home page sorted,

114
00:04:33,998 --> 00:04:36,004
now let's look at the other files.

115
00:04:36,563 --> 00:04:39,340
We can delete this "vercel.svg" image

116
00:04:39,340 --> 00:04:41,667
that was used in the Home page.

117
00:04:42,243 --> 00:04:44,999
And likewise we can get rid of this

118
00:04:44,999 --> 00:04:46,810
"Home.module.css" file.

119
00:04:47,389 --> 00:04:49,011
As for the global styles,

120
00:04:49,011 --> 00:04:50,634
we can keep them for now.

121
00:04:50,634 --> 00:04:52,907
We'll get back to styling later on.

122
00:04:53,537 --> 00:04:56,654
Those styles are imported by "_app.js",

123
00:04:56,654 --> 00:04:59,373
which is the custom app component.

124
00:04:59,953 --> 00:05:01,678
Again just for consistency

125
00:05:01,678 --> 00:05:04,665
let's add semicolons everywhere in this code.

126
00:05:09,219 --> 00:05:12,296
And I'll also rename the component to simply "App",

127
00:05:12,296 --> 00:05:13,804
like in our Blog example.

128
00:05:14,752 --> 00:05:17,460
Ok. This is enough as a starting point.

129
00:05:17,960 --> 00:05:21,201
We generated a new project with Create Next App,

130
00:05:21,201 --> 00:05:23,834
and removed a few things we don't need.

131
00:05:23,834 --> 00:05:26,130
So we're now ready to start adding

132
00:05:26,130 --> 00:05:27,616
our own functionality.