1
00:00:03,000 --> 00:00:06,424
We've seen how our HomePage is rendered

2
00:00:06,424 --> 00:00:09,497
into a static HTML file by Next.js.

3
00:00:10,085 --> 00:00:11,960
But we still have a single page

4
00:00:11,960 --> 00:00:13,110
in our application.

5
00:00:13,110 --> 00:00:15,227
What if we want to add another page

6
00:00:15,227 --> 00:00:16,437
to our blog website?

7
00:00:17,118 --> 00:00:20,289
For example we may want an "About" page,

8
00:00:20,289 --> 00:00:22,588
visible at the "/about" path.

9
00:00:23,167 --> 00:00:24,613
If we try this now

10
00:00:24,613 --> 00:00:27,505
of course we'll get a 404 not found.

11
00:00:27,505 --> 00:00:29,433
Now, a typical React app

12
00:00:29,433 --> 00:00:31,683
is a Single Page Application

13
00:00:32,423 --> 00:00:34,118
but you can use something like

14
00:00:34,118 --> 00:00:34,908
"React Router"

15
00:00:36,390 --> 00:00:38,568
to display a different component

16
00:00:38,568 --> 00:00:40,065
based on the URL path.

17
00:00:40,634 --> 00:00:42,972
This requires defining a "Route",

18
00:00:42,972 --> 00:00:44,814
that specifies that "path"

19
00:00:44,814 --> 00:00:46,799
and the component to render,

20
00:00:46,799 --> 00:00:49,279
in this case the "About" component.

21
00:00:49,992 --> 00:00:51,729
So there's some amount of

22
00:00:51,729 --> 00:00:54,301
let's call it configuration involved.

23
00:00:54,871 --> 00:00:56,053
In a Next.js app

24
00:00:56,053 --> 00:00:57,752
creating a new route is

25
00:00:57,752 --> 00:00:59,452
actually a lot simpler.

26
00:01:00,100 --> 00:01:01,743
All we need to do is

27
00:01:01,743 --> 00:01:05,031
add a new file under the "pages" folder.

28
00:01:05,031 --> 00:01:07,085
Just like we already have

29
00:01:07,085 --> 00:01:08,729
the "index.js" file.

30
00:01:09,475 --> 00:01:11,599
So we can just create a new file,

31
00:01:12,099 --> 00:01:13,926
and call it "about.js",

32
00:01:13,926 --> 00:01:16,707
so the name is the same as the path

33
00:01:16,707 --> 00:01:19,409
where we want it to be visible at.

34
00:01:20,067 --> 00:01:22,576
As we know, a page in Next.js is

35
00:01:22,576 --> 00:01:24,535
simply a React component.

36
00:01:25,114 --> 00:01:26,744
In fact we could even copy

37
00:01:26,744 --> 00:01:28,562
everything from our HomePage,

38
00:01:29,125 --> 00:01:31,099
and then rename "HomePage"

39
00:01:31,099 --> 00:01:32,238
to "AboutPage".

40
00:01:32,238 --> 00:01:35,351
Incidentally, you can call your component

41
00:01:35,351 --> 00:01:36,717
whatever you like,

42
00:01:36,717 --> 00:01:39,299
as long as it's the default export

43
00:01:39,299 --> 00:01:41,880
it makes no difference to Next.js.

44
00:01:41,880 --> 00:01:44,538
So you could call it simply "About"

45
00:01:44,538 --> 00:01:46,284
instead of "AboutPage",

46
00:01:46,284 --> 00:01:48,562
but I find it more descriptive

47
00:01:48,562 --> 00:01:50,764
to call them "SomethingPage".

48
00:01:51,948 --> 00:01:53,850
Now, let's change the heading

49
00:01:53,850 --> 00:01:55,359
to say "About" as well.

50
00:01:55,925 --> 00:01:57,792
Save this file, and go and

51
00:01:57,792 --> 00:01:59,587
reload it in the browser.

52
00:01:59,587 --> 00:02:00,952
And just like that,

53
00:02:00,952 --> 00:02:02,604
our new page is visible

54
00:02:02,604 --> 00:02:04,327
under the "/about" path.

55
00:02:05,115 --> 00:02:06,739
Really really simple.

56
00:02:06,739 --> 00:02:08,749
No configuration required.

57
00:02:08,749 --> 00:02:11,147
This works because Next.js uses

58
00:02:11,147 --> 00:02:13,158
a filesystem-based router.

59
00:02:13,158 --> 00:02:16,406
What this means is that the Next.js server

60
00:02:16,406 --> 00:02:18,881
looks inside the "pages" folder,

61
00:02:19,768 --> 00:02:23,586
and automatically exposes each file in there

62
00:02:23,586 --> 00:02:25,062
under a URL path.

63
00:02:25,649 --> 00:02:29,304
So our "about.js" file is automatically mapped

64
00:02:29,304 --> 00:02:30,973
to the "/about" path.

65
00:02:30,973 --> 00:02:33,755
It's basically the name of the file

66
00:02:33,755 --> 00:02:35,503
without the extension.

67
00:02:36,241 --> 00:02:38,016
As for the "index.js" file,

68
00:02:38,016 --> 00:02:39,987
that's a bit of a special case

69
00:02:40,552 --> 00:02:42,440
because that's not visible

70
00:02:42,440 --> 00:02:43,239
at "/index"

71
00:02:43,239 --> 00:02:45,271
but simply at the root path.

72
00:02:45,917 --> 00:02:47,920
We need a way to show a page

73
00:02:47,920 --> 00:02:49,852
at the root of our website,

74
00:02:49,852 --> 00:02:51,712
so Next.js uses "index.js"

75
00:02:51,712 --> 00:02:52,928
for that purpose,

76
00:02:52,928 --> 00:02:55,289
which should be pretty intuitive.

77
00:02:56,075 --> 00:02:58,595
But apart from this special case,

78
00:02:58,595 --> 00:03:00,656
any JavaScript file you put

79
00:03:00,656 --> 00:03:02,412
inside the pages folder

80
00:03:02,412 --> 00:03:04,626
will be visible as a web page

81
00:03:04,626 --> 00:03:07,451
under the same path as the file name.

82
00:03:08,257 --> 00:03:10,745
You can try creating another page yourself

83
00:03:10,745 --> 00:03:12,405
with a name of your choosing

84
00:03:12,405 --> 00:03:13,294
and verify that

85
00:03:13,294 --> 00:03:15,131
you can open it in the browser.