1
00:00:00,000 --> 00:00:04,000
So NextJS has these server components,

2
00:00:04,000 --> 00:00:07,000
components that are rendered and converted to HTML,

3
00:00:07,000 --> 00:00:09,000
which is then sent to the browser.

4
00:00:09,000 --> 00:00:12,000
And as I mentioned, the file name here matters

5
00:00:12,000 --> 00:00:15,000
because it's that file name that tells NextJS

6
00:00:15,000 --> 00:00:17,000
that we want to have this as a page.

7
00:00:18,000 --> 00:00:22,000
But how could we now add a second page to this website?

8
00:00:22,000 --> 00:00:24,000
Let's say we also want to be able

9
00:00:24,000 --> 00:00:28,000
to reach a page, localhost:3000/about.

10
00:00:29,000 --> 00:00:33,000
If that is what we want to do, we have to find some way

11
00:00:33,000 --> 00:00:37,000
of letting NextJS know about our intentions.

12
00:00:38,000 --> 00:00:42,000
Now, if we were using just React without NextJS,

13
00:00:42,000 --> 00:00:44,000
we could use React Router for that.

14
00:00:46,000 --> 00:00:49,000
But in NextJS projects, you don't do that.

15
00:00:49,000 --> 00:00:53,000
Instead here, this app directory plays an important role

16
00:00:53,000 --> 00:00:55,000
because in this app directory,

17
00:00:55,000 --> 00:01:00,000
you can add new paths, which you wanna handle as routes

18
00:01:01,000 --> 00:01:03,000
by adding new folders.

19
00:01:03,000 --> 00:01:07,000
So if we want to support a /about route,

20
00:01:07,000 --> 00:01:09,000
we have to add an about folder.

21
00:01:11,000 --> 00:01:15,000
However, on its own, this folder won't do anything.

22
00:01:15,000 --> 00:01:17,000
If I just add this folder

23
00:01:17,000 --> 00:01:20,000
and I then go to /about,

24
00:01:20,000 --> 00:01:23,000
I get this default 404 page,

25
00:01:24,000 --> 00:01:25,000
and I'm getting this here

26
00:01:25,000 --> 00:01:30,000
because NextJS doesn't know about this about route yet,

27
00:01:30,000 --> 00:01:32,000
adding a folder is not enough.

28
00:01:33,000 --> 00:01:37,000
Instead, you always also must add such a page.JS file

29
00:01:37,000 --> 00:01:40,000
if you want to render a page,

30
00:01:40,000 --> 00:01:43,000
which kind of makes sense, I guess.

31
00:01:44,000 --> 00:01:47,000
So now we don't just have that root page.JS file,

32
00:01:47,000 --> 00:01:51,000
which is responsible for the homepage, the starting page,

33
00:01:51,000 --> 00:01:53,000
but we also have this nested page.JS file

34
00:01:53,000 --> 00:01:55,000
in this about folder.

35
00:01:55,000 --> 00:01:59,000
And that will be responsible for rendering the content

36
00:01:59,000 --> 00:02:00,000
of the about route.

37
00:02:01,000 --> 00:02:04,000
So it's now in here where we can export

38
00:02:04,000 --> 00:02:07,000
a new component function that could be called about page,

39
00:02:07,000 --> 00:02:10,000
though this name does not matter,

40
00:02:10,000 --> 00:02:11,000
it can be anything you want.

41
00:02:12,000 --> 00:02:16,000
And then you have to return the JSX code that,

42
00:02:16,000 --> 00:02:19,000
in the end, should be rendered as page content.

43
00:02:20,000 --> 00:02:22,000
So here we could say about us

44
00:02:23,000 --> 00:02:26,000
and then add more content if we wanted to,

45
00:02:26,000 --> 00:02:28,000
and we'll get to that meals app soon enough,

46
00:02:28,000 --> 00:02:30,000
but for this demo and these basics,

47
00:02:30,000 --> 00:02:32,000
let's stick to this simple page.

48
00:02:34,000 --> 00:02:36,000
With that added and saved,

49
00:02:36,000 --> 00:02:40,000
if you now go to localhost:3000/about,

50
00:02:40,000 --> 00:02:42,000
you therefore now see about us on the screen.

51
00:02:44,000 --> 00:02:47,000
And here, I'll now just wrap it into a main element

52
00:02:47,000 --> 00:02:50,000
for styling purposes like this.

53
00:02:52,000 --> 00:02:54,000
This ensures due to the styles I set up

54
00:02:54,000 --> 00:02:56,000
that this will be centered.

55
00:02:58,000 --> 00:03:02,000
So that is how we can add a new route by adding a folder

56
00:03:02,000 --> 00:03:04,000
with a page.JS file inside of it.