1
00:00:02,000 --> 00:00:03,000
So now that we understood

2
00:00:03,000 --> 00:00:06,000
how we can generally add our page components,

3
00:00:06,000 --> 00:00:09,000
let's add a second page.

4
00:00:09,000 --> 00:00:12,000
For this, let's add a new page file,

5
00:00:12,000 --> 00:00:14,000
so a new file in the pages folder.

6
00:00:14,000 --> 00:00:18,000
And we can name this one about.js.

7
00:00:18,000 --> 00:00:20,000
And the file name does matter here,

8
00:00:20,000 --> 00:00:23,000
just as it did for index.js,

9
00:00:23,000 --> 00:00:26,000
because index.js was a special file name,

10
00:00:26,000 --> 00:00:28,000
about.js is not,

11
00:00:28,000 --> 00:00:33,000
but now since it's a file name different than index.js,

12
00:00:33,000 --> 00:00:37,000
now that file name will later be used as a path.

13
00:00:37,000 --> 00:00:39,000
Oh, and in here we can add a new function,

14
00:00:39,000 --> 00:00:43,000
name it AboutPage and then return,

15
00:00:43,000 --> 00:00:46,000
and have div here, where we have h1 tag and say,

16
00:00:46,000 --> 00:00:48,000
"The About Page."

17
00:00:48,000 --> 00:00:50,000
And we're going to build some more exciting apps

18
00:00:50,000 --> 00:00:51,000
later in the course,

19
00:00:51,000 --> 00:00:55,000
but to get started, I wanna keep that simple for now.

20
00:00:55,000 --> 00:00:57,000
And then we also export this,

21
00:00:57,000 --> 00:00:59,000
we export this AboutPage here.

22
00:01:01,000 --> 00:01:02,000
Now if we save this,

23
00:01:02,000 --> 00:01:05,000
if we save this about page,

24
00:01:05,000 --> 00:01:09,000
we can go back and visit localhost3000/about.

25
00:01:09,000 --> 00:01:12,000
Of course, this npm run dev process

26
00:01:12,000 --> 00:01:14,000
still has to be up and running for devs to work.

27
00:01:14,000 --> 00:01:17,000
And you see that this now works,

28
00:01:17,000 --> 00:01:18,000
and we get this about page

29
00:01:18,000 --> 00:01:23,000
and we no longer get this 404 error,

30
00:01:23,000 --> 00:01:26,000
because we added this about.js file.

31
00:01:26,000 --> 00:01:29,000
So that's how we can add multiple pages.

32
00:01:29,000 --> 00:01:32,000
There is a different way of doing that though.