1
00:00:00,000 --> 00:00:01,000
So let's finally get started

2
00:00:01,000 --> 00:00:06,000
with the NextJS essentials and let's explore that app router

3
00:00:06,000 --> 00:00:09,000
and all the core NextJS concepts you must know

4
00:00:09,000 --> 00:00:12,000
in-depth in this section here.

5
00:00:12,000 --> 00:00:16,000
And for that, we first of all need a new next project,

6
00:00:16,000 --> 00:00:19,000
though I will say that attached to this lecture,

7
00:00:19,000 --> 00:00:23,000
you find a project on Code Sandbox in case you wanna follow

8
00:00:23,000 --> 00:00:25,000
along there so that you don't have

9
00:00:25,000 --> 00:00:28,000
to install anything locally on your system.

10
00:00:28,000 --> 00:00:32,000
And you also find a local starting project.

11
00:00:32,000 --> 00:00:36,000
So for a local project on your system attached

12
00:00:36,000 --> 00:00:39,000
to this lecture as well, simply a default next project,

13
00:00:39,000 --> 00:00:42,000
which I cleaned up a little bit,

14
00:00:42,000 --> 00:00:46,000
and which we'll use as a starting project for this section.

15
00:00:46,000 --> 00:00:48,000
I did create this attached project

16
00:00:48,000 --> 00:00:52,000
with this NPX create-next-app command.

17
00:00:52,000 --> 00:00:56,000
But then as mentioned, I simply cleaned it up a bit.

18
00:00:56,000 --> 00:00:59,000
So here I opened up this edited starting project

19
00:00:59,000 --> 00:01:03,000
with Visual Studio Code, the code editor I personally prefer

20
00:01:03,000 --> 00:01:05,000
and I'll be using throughout this course.

21
00:01:05,000 --> 00:01:08,000
And in this project, I simply changed the content

22
00:01:08,000 --> 00:01:10,000
of the app folder, changed the content

23
00:01:10,000 --> 00:01:13,000
that's shown on the screen for that default page,

24
00:01:13,000 --> 00:01:16,000
added a different logo in the public folder,

25
00:01:16,000 --> 00:01:21,000
and overwrote the rules set up in this eslintrc.json file.

26
00:01:21,000 --> 00:01:24,000
Other than that, it's the default starting project you would

27
00:01:24,000 --> 00:01:25,000
get when running that command

28
00:01:25,000 --> 00:01:28,000
that's shown on the NextJS website.

29
00:01:28,000 --> 00:01:31,000
And with that, you can then go into your

30
00:01:31,000 --> 00:01:33,000
terminal in that project.

31
00:01:33,000 --> 00:01:36,000
So open your default terminal or command prompt

32
00:01:36,000 --> 00:01:38,000
and navigate into this project,

33
00:01:38,000 --> 00:01:42,000
or use the one integrated into Visual Studio Code,

34
00:01:42,000 --> 00:01:45,000
which is navigated into that project automatically.

35
00:01:45,000 --> 00:01:49,000
And make sure that you run npm install once to ensure

36
00:01:49,000 --> 00:01:52,000
that all dependencies are installed.

37
00:01:52,000 --> 00:01:55,000
On Code Sandbox, you don't need to do that.

38
00:01:55,000 --> 00:01:57,000
And thereafter run npm run dev

39
00:01:57,000 --> 00:02:00,000
to start the development server, which allows you

40
00:02:00,000 --> 00:02:03,000
to preview the application.

41
00:02:03,000 --> 00:02:06,000
On Code Sandbox, you also don't need to do that

42
00:02:06,000 --> 00:02:08,000
since there the server is already up and running.

43
00:02:10,000 --> 00:02:13,000
Now with that, you then see the address, which you can visit

44
00:02:13,000 --> 00:02:15,000
to preview the project.

45
00:02:15,000 --> 00:02:17,000
And if you then go to that address,

46
00:02:17,000 --> 00:02:20,000
you should see something like this on the screen.

47
00:02:20,000 --> 00:02:23,000
And that's that very basic first starting project

48
00:02:23,000 --> 00:02:26,000
I prepared for you.

49
00:02:26,000 --> 00:02:29,000
And now we can take a closer look at that folder

50
00:02:29,000 --> 00:02:30,000
and how that all works.