Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,070 --> 00:00:05,260
So now that we know what NextJS is,
2
00:00:05,260 --> 00:00:08,430
and now that we at least have a first idea
3
00:00:08,430 --> 00:00:12,320
of why we might wanna use NextJS,
4
00:00:12,320 --> 00:00:14,000
let's get started with it
5
00:00:14,000 --> 00:00:17,240
and let's create a first NextJS project.
6
00:00:17,240 --> 00:00:20,430
For this, we just need to run one simple command
7
00:00:20,430 --> 00:00:22,980
in the end, this command here,
8
00:00:22,980 --> 00:00:24,470
but to run this command,
9
00:00:24,470 --> 00:00:27,380
we need to have Node.js installed.
10
00:00:27,380 --> 00:00:30,430
Now we're not going to write any Node.js code,
11
00:00:30,430 --> 00:00:32,180
at least not right now.
12
00:00:32,180 --> 00:00:34,810
We will write some basic code later
13
00:00:34,810 --> 00:00:36,410
but we'll not write it right now.
14
00:00:36,410 --> 00:00:41,230
But Node.js ships together with the Node Package Manager
15
00:00:41,230 --> 00:00:42,640
which is a extra tool
16
00:00:42,640 --> 00:00:46,810
which is the defacto standard tool for installing
17
00:00:46,810 --> 00:00:50,800
and managing libraries in JavaScript projects.
18
00:00:50,800 --> 00:00:54,720
And we will use that tool to create the next project.
19
00:00:54,720 --> 00:00:58,490
And that created next project under the hood,
20
00:00:58,490 --> 00:01:01,722
Will also need node.js to execute.
21
00:01:01,722 --> 00:01:03,950
For example, for that built-in
22
00:01:03,950 --> 00:01:08,490
server-side rendering that uses Node.js under the hood.
23
00:01:08,490 --> 00:01:12,150
And for all those reasons, we need to install Node.js
24
00:01:12,150 --> 00:01:15,520
and for that, you can simply visit nodejs.org
25
00:01:15,520 --> 00:01:16,580
and from that page,
26
00:01:16,580 --> 00:01:20,280
you can install the latest version of Node.js,
27
00:01:20,280 --> 00:01:23,240
Whatever that version is when you're viewing that.
28
00:01:23,240 --> 00:01:25,400
Just install the latest version,
29
00:01:25,400 --> 00:01:28,470
simply click on there and download Node.js.
30
00:01:28,470 --> 00:01:31,680
It is available for all major operating systems
31
00:01:31,680 --> 00:01:33,860
and then walk through that installer,
32
00:01:33,860 --> 00:01:36,200
once that download finished.
33
00:01:36,200 --> 00:01:38,600
Now, once you have Node.js installed,
34
00:01:38,600 --> 00:01:41,260
you are ready to run this command
35
00:01:41,260 --> 00:01:42,880
and therefore we can now go
36
00:01:42,880 --> 00:01:47,060
to the terminal to your regular command prompt
37
00:01:47,060 --> 00:01:49,770
which is built into your operating system.
38
00:01:49,770 --> 00:01:53,250
And there you can cd and navigate
39
00:01:53,250 --> 00:01:57,460
into the folder where you want to create your next project.
40
00:01:57,460 --> 00:01:59,880
And then simply run this command,
41
00:01:59,880 --> 00:02:04,620
npx create-next-app.
42
00:02:04,620 --> 00:02:06,750
Run this command by hitting enter
43
00:02:06,750 --> 00:02:09,620
and this will now create a new next project
44
00:02:09,620 --> 00:02:13,920
in that folder where you ran that command.
45
00:02:13,920 --> 00:02:16,510
Now you might be prompted to confirm
46
00:02:16,510 --> 00:02:19,510
that you're installing extra packages
47
00:02:19,510 --> 00:02:21,690
and hence I will confirm this here.
48
00:02:21,690 --> 00:02:24,050
And now it is, will temporarily install
49
00:02:24,050 --> 00:02:25,760
the create-next-app tool,
50
00:02:25,760 --> 00:02:28,640
and then start creating that project.
51
00:02:28,640 --> 00:02:30,020
Now for this, we first of all
52
00:02:30,020 --> 00:02:32,290
need to give this project a name
53
00:02:32,290 --> 00:02:35,200
and I'll just use NextJS-course here
54
00:02:35,200 --> 00:02:36,790
as a name but you can of course,
55
00:02:36,790 --> 00:02:38,690
pick any name you want.
56
00:02:38,690 --> 00:02:41,920
Hit enter and now this project will be created here
57
00:02:41,920 --> 00:02:44,770
and it will set up a base folder
58
00:02:44,770 --> 00:02:48,550
for that project and install all the core dependencies
59
00:02:48,550 --> 00:02:49,933
this project will need.
60
00:02:50,890 --> 00:02:54,180
Now, once it's done, you can run the commands
61
00:02:54,180 --> 00:02:56,310
shown here to start your development server
62
00:02:56,310 --> 00:02:59,290
but I will not yet do that here.
63
00:02:59,290 --> 00:03:03,930
Instead, I now opened this project in visual studio code
64
00:03:03,930 --> 00:03:08,330
the IDE, the editor I'm going to use in this course.
65
00:03:08,330 --> 00:03:11,340
Now you don't have to use visuals to do code.
66
00:03:11,340 --> 00:03:14,370
It is a great IDE for web development though,
67
00:03:14,370 --> 00:03:17,020
it's completely free and it's amazing,
68
00:03:17,020 --> 00:03:18,560
but you can use whatever
69
00:03:18,560 --> 00:03:21,570
your favorite web development IDE is.
70
00:03:21,570 --> 00:03:25,220
If you do want to use the same editor as I do here though,
71
00:03:25,220 --> 00:03:28,237
you can visit code.visualstudio.com.
72
00:03:28,237 --> 00:03:31,580
And from there you can download visual studio code.
73
00:03:31,580 --> 00:03:34,730
It is available for all major operating systems,
74
00:03:34,730 --> 00:03:37,720
simply download the installer and walk through it.
75
00:03:37,720 --> 00:03:40,560
And once you have downloaded and installed it,
76
00:03:40,560 --> 00:03:44,740
you can open that NextJS-course folder,
77
00:03:44,740 --> 00:03:48,600
which we created with the command here in the terminal
78
00:03:48,600 --> 00:03:51,250
with visual studio code.
79
00:03:51,250 --> 00:03:52,880
Now here, I'm using the dark theme.
80
00:03:52,880 --> 00:03:55,790
You can change this under preference as color theme.
81
00:03:55,790 --> 00:03:59,080
Here I am using the dark plus theme,
82
00:03:59,080 --> 00:04:01,500
and I also adjusted the appearance.
83
00:04:01,500 --> 00:04:03,640
You can do that under view appearance
84
00:04:03,640 --> 00:04:05,410
and somebody's adjusted as you want.
85
00:04:05,410 --> 00:04:08,690
And for example, show or hide the status bar,
86
00:04:08,690 --> 00:04:11,720
I'm hiding it but that is something you can configure
87
00:04:11,720 --> 00:04:13,460
however you want.
88
00:04:13,460 --> 00:04:15,140
Now regarding extensions,
89
00:04:15,140 --> 00:04:17,880
that's a great feature of visual studio code.
90
00:04:17,880 --> 00:04:20,040
You can install extension there
91
00:04:20,040 --> 00:04:22,800
and the only extension that I'm using here,
92
00:04:22,800 --> 00:04:24,890
and that I recommend that you install,
93
00:04:24,890 --> 00:04:26,264
is the Prettier extension.
94
00:04:26,264 --> 00:04:30,660
You can simply search for Prettier here
95
00:04:30,660 --> 00:04:32,300
and that's extension that will help you
96
00:04:32,300 --> 00:04:33,830
with code formatting.
97
00:04:33,830 --> 00:04:36,610
So with automatically transforming your code
98
00:04:36,610 --> 00:04:41,010
to look cleaner and to be more formatted and structured.
99
00:04:41,010 --> 00:04:43,080
Once you installed that extension,
100
00:04:43,080 --> 00:04:44,330
you just need to make sure
101
00:04:44,330 --> 00:04:47,310
that you go to your keyboard shortcuts
102
00:04:47,310 --> 00:04:51,400
and there search for format document
103
00:04:51,400 --> 00:04:54,270
and make sure that you have that shortcuts set up
104
00:04:54,270 --> 00:04:55,490
because that's a shortcut
105
00:04:55,490 --> 00:04:57,600
which I will press all the time
106
00:04:57,600 --> 00:05:01,300
which will then auto-format my code and use Prettier.
107
00:05:01,300 --> 00:05:03,920
And to make sure that I do use Prettier,
108
00:05:03,920 --> 00:05:08,550
under preferences settings in your user or work space,
109
00:05:08,550 --> 00:05:10,840
so project specific settings,
110
00:05:10,840 --> 00:05:13,070
you can also search for format
111
00:05:13,070 --> 00:05:15,660
and make sure that under default formatter,
112
00:05:15,660 --> 00:05:18,840
or you do pick Prettier here,
113
00:05:18,840 --> 00:05:19,733
here it is.
114
00:05:21,390 --> 00:05:22,730
So with that all set up,
115
00:05:22,730 --> 00:05:25,480
you will have the same set up as ideal
116
00:05:25,480 --> 00:05:28,260
and that is the set-up I will use in this course.
117
00:05:28,260 --> 00:05:29,930
That is the set-up we will use
118
00:05:29,930 --> 00:05:31,600
throughout all the lectures
119
00:05:31,600 --> 00:05:34,120
and this is the setup which we'll now use
120
00:05:34,120 --> 00:05:37,763
to dig a bit deeper into this project we just created.
9265
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.