1
00:00:02,000 --> 00:00:04,000
So, now that we had a first glimpse

2
00:00:04,000 --> 00:00:08,000
at this file-based routing system in theory,

3
00:00:08,000 --> 00:00:10,000
let's apply it in practice

4
00:00:10,000 --> 00:00:12,000
to this demo project we set up here,

5
00:00:12,000 --> 00:00:15,000
so that we really understand it.

6
00:00:15,000 --> 00:00:18,000
This pages folder is important as you learned.

7
00:00:18,000 --> 00:00:21,000
And in this pages folder, we can add a new file.

8
00:00:21,000 --> 00:00:23,000
We can add a new file

9
00:00:23,000 --> 00:00:26,000
and we can, for example, name it, index.js.

10
00:00:26,000 --> 00:00:31,000
You'll learn that index.js is a special file name,

11
00:00:31,000 --> 00:00:36,000
such that Next.js will not use the file name as a path then,

12
00:00:36,000 --> 00:00:40,000
but instead will load the index.js component

13
00:00:40,000 --> 00:00:45,000
as the main component for slash nothing.

14
00:00:45,000 --> 00:00:48,000
So, here in this case, we have index.js

15
00:00:48,000 --> 00:00:52,000
and this file would be loaded if we just visit our domain

16
00:00:52,000 --> 00:00:55,000
and then we have no other path after our domain.

17
00:00:55,000 --> 00:00:58,000
So, just our domain slash nothing.

18
00:00:59,000 --> 00:01:02,000
But what goes into this index.js file?

19
00:01:03,000 --> 00:01:08,000
Well, as mentioned before, just a regular React component.

20
00:01:08,000 --> 00:01:11,000
There is nothing special to that.

21
00:01:11,000 --> 00:01:13,000
You don't need any special code in here.

22
00:01:13,000 --> 00:01:16,000
You just add our normal React component,

23
00:01:16,000 --> 00:01:18,000
you export this component

24
00:01:18,000 --> 00:01:23,000
and then, with that, Next.js will render that component

25
00:01:23,000 --> 00:01:26,000
when a request reaches this file

26
00:01:26,000 --> 00:01:29,000
through next.js routing system.

27
00:01:29,000 --> 00:01:32,000
So therefore, in this file, we can add a component

28
00:01:32,000 --> 00:01:34,000
and we can add a class-based component

29
00:01:34,000 --> 00:01:36,000
or a function-based component.

30
00:01:36,000 --> 00:01:39,000
And I will stick to function-based components only

31
00:01:39,000 --> 00:01:41,000
in this course.

32
00:01:41,000 --> 00:01:43,000
So therefore, we can add a new component,

33
00:01:43,000 --> 00:01:44,000
a new function here,

34
00:01:44,000 --> 00:01:49,000
and name this, HomePage, for example.

35
00:01:49,000 --> 00:01:51,000
Now, the name is totally up to you.

36
00:01:51,000 --> 00:01:53,000
This doesn't have to be named HomePage,

37
00:01:53,000 --> 00:01:55,000
any name is okay.

38
00:01:55,000 --> 00:01:58,000
I'm just using HomePage as a name here

39
00:01:58,000 --> 00:02:01,000
because it will be the root page loaded.

40
00:02:01,000 --> 00:02:04,000
And whilst it is a regular component, technically,

41
00:02:04,000 --> 00:02:06,000
we will treat it as a page.

42
00:02:06,000 --> 00:02:08,000
It will occupy the entire page.

43
00:02:08,000 --> 00:02:12,000
And that's why I add page in the component name.

44
00:02:12,000 --> 00:02:15,000
But you can name this component however you want.

45
00:02:16,000 --> 00:02:19,000
Now, in this component, we then wanna return

46
00:02:19,000 --> 00:02:22,000
our JSX code just as we know it.

47
00:02:22,000 --> 00:02:24,000
So, here I will return,

48
00:02:24,000 --> 00:02:26,000
let's say, a div and end that div,

49
00:02:26,000 --> 00:02:31,000
a simple H1 tag where I say, The Home Page.

50
00:02:31,000 --> 00:02:34,000
Definitely not too inspiring yet, but we'll get there.

51
00:02:34,000 --> 00:02:39,000
Now we need to export this function as the file default.

52
00:02:39,000 --> 00:02:41,000
So, either like this

53
00:02:41,000 --> 00:02:44,000
or what I like to do,

54
00:02:44,000 --> 00:02:45,000
but it's up to you,

55
00:02:45,000 --> 00:02:46,000
like this.

56
00:02:47,000 --> 00:02:50,000
We need to export this function, this component,

57
00:02:50,000 --> 00:02:52,000
so that Next.js knows

58
00:02:52,000 --> 00:02:54,000
which components should be rendered as a page

59
00:02:54,000 --> 00:02:55,000
because in theory,

60
00:02:55,000 --> 00:02:58,000
you could of course define multiple components

61
00:02:58,000 --> 00:03:01,000
and have multiple functions in that file.

62
00:03:02,000 --> 00:03:05,000
Now, with all of that, once you've saved that file,

63
00:03:05,000 --> 00:03:07,000
we can see it in action.

64
00:03:07,000 --> 00:03:09,000
For this, in your terminal here,

65
00:03:09,000 --> 00:03:11,000
simply run, npm run dev,

66
00:03:11,000 --> 00:03:13,000
to bring up the development server

67
00:03:13,000 --> 00:03:16,000
for this Next.js application.

68
00:03:16,000 --> 00:03:21,000
It will open up on localhost 3000 by default.

69
00:03:21,000 --> 00:03:24,000
And therefore, once you visit that in the browser,

70
00:03:24,000 --> 00:03:25,000
you should see this.

71
00:03:25,000 --> 00:03:27,000
And it's just a bit big here for me,

72
00:03:27,000 --> 00:03:30,000
because I zoomed in quite a lot so that you can see this.

73
00:03:31,000 --> 00:03:33,000
So, that's what you should see on the screen.

74
00:03:33,000 --> 00:03:35,000
And of course, that's the content returned

75
00:03:35,000 --> 00:03:38,000
by this component in our index.js file.

76
00:03:38,000 --> 00:03:40,000
And we do see this on the screen

77
00:03:40,000 --> 00:03:44,000
because we're visiting our domain slash nothing.

78
00:03:44,000 --> 00:03:46,000
There's nothing after that slash.

79
00:03:46,000 --> 00:03:49,000
If I would enter about here, it would crash,

80
00:03:49,000 --> 00:03:52,000
and we would get this default 404 page,

81
00:03:52,000 --> 00:03:54,000
which we get here during development,

82
00:03:54,000 --> 00:03:57,000
because we didn't define a component for that yet.

83
00:03:57,000 --> 00:03:59,000
Well, that's what we're going to do next though.