1
00:00:00,000 --> 00:00:04,000
Now we'll of course explore how to write code

2
00:00:04,000 --> 00:00:05,000
in NextJS apps

3
00:00:05,000 --> 00:00:08,000
and how to build feature rich NextJS applications

4
00:00:08,000 --> 00:00:10,000
throughout this course.

5
00:00:10,000 --> 00:00:13,000
But to get started already, let's make a first change.

6
00:00:13,000 --> 00:00:16,000
And for that you should go to that app folder.

7
00:00:16,000 --> 00:00:19,000
Because I wanna add a new second page,

8
00:00:19,000 --> 00:00:23,000
and I mentioned before that in NextJS one advantage

9
00:00:23,000 --> 00:00:26,000
is that you configure routes simply

10
00:00:26,000 --> 00:00:28,000
with help of the file system.

11
00:00:28,000 --> 00:00:31,000
So by adding folders and files.

12
00:00:31,000 --> 00:00:33,000
And it's indeed in this app folder here

13
00:00:33,000 --> 00:00:37,000
where you can add folders and files to add routes.

14
00:00:37,000 --> 00:00:39,000
This Is the folder NextJS will scan

15
00:00:39,000 --> 00:00:43,000
to detect any routes that should be set up.

16
00:00:43,000 --> 00:00:46,000
And I'll explain what these different files here do

17
00:00:46,000 --> 00:00:48,000
in depth later in the course of course.

18
00:00:48,000 --> 00:00:51,000
But to get started, let's add a new page

19
00:00:51,000 --> 00:00:53,000
by simply adding a new folder,

20
00:00:53,000 --> 00:00:55,000
and let's maybe name it awesome.

21
00:00:56,000 --> 00:01:00,000
And let's in there, add a new file, page.js.

22
00:01:01,000 --> 00:01:04,000
And this must be named page.js

23
00:01:04,000 --> 00:01:06,000
because it's this combination of a folder name

24
00:01:06,000 --> 00:01:11,000
and a page.js file that creates a new route in NextJS.

25
00:01:12,000 --> 00:01:15,000
And in that file, you can and should then,

26
00:01:15,000 --> 00:01:18,000
simply export a standard React component function,

27
00:01:18,000 --> 00:01:23,000
because pages in NextJS are just React components,

28
00:01:23,000 --> 00:01:25,000
like AwesomePage,

29
00:01:25,000 --> 00:01:28,000
where the name of the component does not matter though.

30
00:01:28,000 --> 00:01:31,000
And here we could then return a main element,

31
00:01:31,000 --> 00:01:33,000
where we have an h1 tag,

32
00:01:33,000 --> 00:01:36,000
where we say, NextJS Is Awesome!

33
00:01:36,000 --> 00:01:38,000
or something like this.

34
00:01:41,000 --> 00:01:42,000
And with that done,

35
00:01:42,000 --> 00:01:44,000
you can go back to your NextJS application,

36
00:01:44,000 --> 00:01:48,000
and now visit localhost:3000/awesome,

37
00:01:48,000 --> 00:01:51,000
and you'll see this page content on the screen then.

38
00:01:53,000 --> 00:01:58,000
And that's how easy it is to add new pages in NextJS.

39
00:01:58,000 --> 00:02:01,000
And of course, the content of this page also was rendered

40
00:02:01,000 --> 00:02:04,000
on the server as you can tell

41
00:02:04,000 --> 00:02:06,000
if you inspect the source code,

42
00:02:06,000 --> 00:02:08,000
you'll find the content in there.

43
00:02:09,000 --> 00:02:10,000
And that's there

44
00:02:10,000 --> 00:02:13,000
for our first slightly edited NextJS project.

45
00:02:13,000 --> 00:02:15,000
As mentioned, we'll dive way deeper

46
00:02:15,000 --> 00:02:18,000
and explore all the amazing next features

47
00:02:18,000 --> 00:02:19,000
throughout this course.