1
00:00:02,000 --> 00:00:05,000
So we did create that NextJS project

2
00:00:05,000 --> 00:00:09,000
here in the terminal with NPX create-next-app,

3
00:00:09,000 --> 00:00:11,000
and that gave us a folder which looks like this,

4
00:00:11,000 --> 00:00:14,000
which has this kind of content.

5
00:00:14,000 --> 00:00:17,000
Attached, you also find that starting project

6
00:00:17,000 --> 00:00:21,000
in case it changes over time or looks slightly different

7
00:00:21,000 --> 00:00:24,000
because the starting template was changed, for example.

8
00:00:24,000 --> 00:00:28,000
So attached, you find that exact project snapshot,

9
00:00:28,000 --> 00:00:29,000
which I have here.

10
00:00:29,000 --> 00:00:32,000
If you do download the attached snapshot though,

11
00:00:32,000 --> 00:00:36,000
there is one extra step you need to go through.

12
00:00:36,000 --> 00:00:38,000
You need to open the terminal,

13
00:00:38,000 --> 00:00:40,000
and you can use the one built into Visual Studio Code,

14
00:00:40,000 --> 00:00:43,000
which is your default terminal.

15
00:00:43,000 --> 00:00:44,000
Your default command prompt

16
00:00:44,000 --> 00:00:47,000
which ships with your operating system,

17
00:00:47,000 --> 00:00:50,000
just already integrated into Visual Studio Code,

18
00:00:50,000 --> 00:00:54,000
and conveniently, also already navigated

19
00:00:54,000 --> 00:00:56,000
into this project folder.

20
00:00:56,000 --> 00:00:58,000
So any commands you run here

21
00:00:58,000 --> 00:01:01,000
will execute in the context of your project folder.

22
00:01:01,000 --> 00:01:04,000
And here you then need to run npm install

23
00:01:04,000 --> 00:01:07,000
if you use that attached snapshot.

24
00:01:07,000 --> 00:01:08,000
Because that will then install

25
00:01:08,000 --> 00:01:10,000
all the dependencies of this project

26
00:01:10,000 --> 00:01:13,000
as defined here in package.json,

27
00:01:13,000 --> 00:01:16,000
and store them and their dependencies

28
00:01:16,000 --> 00:01:18,000
in the node modules folder.

29
00:01:18,000 --> 00:01:21,000
So that's also a folder in which will never work.

30
00:01:21,000 --> 00:01:24,000
The three important folders for us here

31
00:01:24,000 --> 00:01:27,000
are pages, public, and styles,

32
00:01:27,000 --> 00:01:31,000
though pages is by far the most important one.

33
00:01:31,000 --> 00:01:34,000
Styles, as you might guess, holds some style files.

34
00:01:34,000 --> 00:01:35,000
We can ignore that for now.

35
00:01:35,000 --> 00:01:37,000
We'll work on that soon.

36
00:01:37,000 --> 00:01:42,000
And public simply holds public resources our page might use.

37
00:01:42,000 --> 00:01:45,000
Something like images, for example.

38
00:01:45,000 --> 00:01:48,000
Now one thing you might see here in public though,

39
00:01:48,000 --> 00:01:51,000
is that unlike in a regular React app,

40
00:01:51,000 --> 00:01:53,000
which you, for example,

41
00:01:53,000 --> 00:01:56,000
created with create React app with that extra tool,

42
00:01:56,000 --> 00:01:59,000
that there in a standard React app,

43
00:01:59,000 --> 00:02:03,000
you have a index HTML file in the public folder.

44
00:02:03,000 --> 00:02:06,000
Here in the NextJS app, you don't have that.

45
00:02:06,000 --> 00:02:07,000
And the reason for this

46
00:02:07,000 --> 00:02:11,000
is that NextJS has this built in pre-rendering.

47
00:02:11,000 --> 00:02:14,000
And whilst it gives you a single page application,

48
00:02:14,000 --> 00:02:17,000
that single page is dynamically pre-rendered

49
00:02:17,000 --> 00:02:20,000
when a request reaches the server

50
00:02:20,000 --> 00:02:25,000
so that you do return an initial page with content.

51
00:02:26,000 --> 00:02:29,000
That is what I talked about earlier in this course as well.

52
00:02:29,000 --> 00:02:34,000
This server-side rendering and the pre-rendering of pages.

53
00:02:34,000 --> 00:02:34,000
And hence for us,

54
00:02:34,000 --> 00:02:38,000
the pages folder will be the most important folder

55
00:02:38,000 --> 00:02:40,000
because that is where we will set up

56
00:02:40,000 --> 00:02:42,000
that file based routing,

57
00:02:42,000 --> 00:02:44,000
and that is there for the folder,

58
00:02:44,000 --> 00:02:47,000
which is important for us to define the different pages

59
00:02:47,000 --> 00:02:50,000
that should make up our application here.