1
00:00:03,000 --> 00:00:06,594
We created an initial home page for our website.

2
00:00:06,594 --> 00:00:08,951
And note that I always have the dev

3
00:00:08,951 --> 00:00:11,038
server running in the terminal,

4
00:00:11,105 --> 00:00:13,598
even though I usually keep it hidden.

5
00:00:13,598 --> 00:00:18,152
Now, the HomePage is in a file called "page.jsx",

6
00:00:18,152 --> 00:00:20,382
inside the "app" folder.

7
00:00:20,475 --> 00:00:24,110
And it gets displayed as the root of our website.

8
00:00:24,110 --> 00:00:26,527
Let me copy the full URL here,

9
00:00:26,527 --> 00:00:30,343
since Chrome these days only shows part of it.

10
00:00:30,343 --> 00:00:34,251
The URL contains "http" that is the protocol,

11
00:00:34,251 --> 00:00:37,503
then "localhost" that's the server,

12
00:00:37,503 --> 00:00:39,083
3000 as the port,

13
00:00:39,175 --> 00:00:41,042
and then we have the "path",

14
00:00:41,042 --> 00:00:43,879
that for the home page is "/", that

15
00:00:43,879 --> 00:00:46,311
means the root of our website.

16
00:00:46,392 --> 00:00:49,391
Now, what if we want to create another page?

17
00:00:49,391 --> 00:00:51,333
Where should we put it, and

18
00:00:51,333 --> 00:00:52,988
what should we call it?

19
00:00:53,060 --> 00:00:56,499
Since this website is about game reviews,

20
00:00:56,499 --> 00:00:58,768
let's say we want a page where

21
00:00:58,768 --> 00:01:00,584
we list all the reviews.

22
00:01:00,660 --> 00:01:02,713
Inside the "app" folder,

23
00:01:02,713 --> 00:01:06,175
we can create another folder, called "reviews".

24
00:01:06,175 --> 00:01:09,328
And inside that new folder create a file,

25
00:01:09,328 --> 00:01:11,838
called "page.jsx".

26
00:01:11,838 --> 00:01:16,277
So, all pages will be named "page.jsx",

27
00:01:16,277 --> 00:01:19,434
but each one will be in a different folder,

28
00:01:19,434 --> 00:01:21,667
that will correspond to the

29
00:01:21,667 --> 00:01:23,734
URL path for our website.

30
00:01:23,817 --> 00:01:26,387
And each "page.jsx" needs to

31
00:01:26,387 --> 00:01:28,681
export a React component,

32
00:01:28,773 --> 00:01:31,036
so I'll just copy and paste the

33
00:01:31,036 --> 00:01:33,153
HomePage as a starting point,

34
00:01:33,226 --> 00:01:35,511
but we can change the name in

35
00:01:35,511 --> 00:01:37,718
the new file to ReviewsPage.

36
00:01:37,797 --> 00:01:40,048
We can also modify the heading,

37
00:01:40,048 --> 00:01:41,719
again to say "Reviews".

38
00:01:41,791 --> 00:01:44,980
And in the paragraph for now let's just write

39
00:01:44,980 --> 00:01:47,388
"Here we'll list all the reviews."

40
00:01:47,651 --> 00:01:49,995
Ok. We can now save this file,

41
00:01:49,995 --> 00:01:52,693
and it should be visible at the

42
00:01:52,693 --> 00:01:55,392
"/reviews" path on our website.

43
00:01:55,480 --> 00:01:57,997
You can see our new page in the browser.

44
00:01:57,997 --> 00:02:01,737
So, note how the URL path is the same as

45
00:02:01,737 --> 00:02:05,010
the folder path inside our project.

46
00:02:05,103 --> 00:02:09,358
Any folder that contains a "page.jsx" file

47
00:02:09,358 --> 00:02:13,768
will be exposed as a URL path on our website.

48
00:02:13,768 --> 00:02:16,625
Now, suppose we want to create another page,

49
00:02:16,625 --> 00:02:18,913
where we'll write a review for

50
00:02:18,913 --> 00:02:20,743
the Stardew Valley game.

51
00:02:20,820 --> 00:02:24,007
We'll want each individual review page

52
00:02:24,007 --> 00:02:26,692
to be under the "/reviews" path.

53
00:02:26,776 --> 00:02:29,606
So what we should do is create another

54
00:02:29,606 --> 00:02:31,914
folder nested inside "reviews",

55
00:02:31,989 --> 00:02:35,742
and then put a "page.jsx" file in there.

56
00:02:35,742 --> 00:02:39,049
Now, in Visual Studio Code we can actually create

57
00:02:39,049 --> 00:02:42,153
both the folder and the file at the same time,

58
00:02:42,221 --> 00:02:45,915
by writing the folder name, like "stardew-valley",

59
00:02:45,915 --> 00:02:48,912
followed by "/" and the file name,

60
00:02:48,912 --> 00:02:50,586
that is "page.jsx".

61
00:02:50,674 --> 00:02:53,934
You can see that we have the page file inside

62
00:02:53,934 --> 00:02:56,251
the new "stardew-valley" folder.

63
00:02:56,324 --> 00:02:58,714
"page.jsx" will again need to

64
00:02:58,714 --> 00:03:00,857
contain a React component,

65
00:03:00,940 --> 00:03:03,533
so I'll copy the code from another page,

66
00:03:03,533 --> 00:03:07,297
and rename the component to "StardewValleyPage".

67
00:03:07,513 --> 00:03:09,296
Same for the heading: this

68
00:03:09,296 --> 00:03:11,011
should be the game title.

69
00:03:11,133 --> 00:03:14,100
And here we should write the actual review,

70
00:03:14,100 --> 00:03:17,913
but for now I'll just put some placeholder text.

71
00:03:18,400 --> 00:03:20,188
If we save, we should now

72
00:03:20,188 --> 00:03:21,976
be able to open this page

73
00:03:22,047 --> 00:03:26,538
as the "/reviews/stardew-valley" path.

74
00:03:26,538 --> 00:03:29,355
We can in fact see our new page here.

75
00:03:29,355 --> 00:03:31,772
Again, note how the path of the

76
00:03:31,772 --> 00:03:33,800
folders inside our project

77
00:03:33,878 --> 00:03:36,174
becomes the path for the URL

78
00:03:36,174 --> 00:03:38,061
returned by the server.

79
00:03:38,143 --> 00:03:41,756
Next.js uses file-based routing,

80
00:03:41,756 --> 00:03:45,339
which means that the files in our project will

81
00:03:45,339 --> 00:03:48,221
automatically be mapped to URL paths.

82
00:03:48,299 --> 00:03:50,516
There is no configuration file where

83
00:03:50,516 --> 00:03:52,611
we have to write all the mappings,

84
00:03:52,672 --> 00:03:55,740
like with some other framework or library.

85
00:03:55,740 --> 00:03:58,838
Using the new Next.js App Router,

86
00:03:58,838 --> 00:04:02,163
all the routes are inside the "app" folder.

87
00:04:02,163 --> 00:04:06,152
The "page.jsx" file directly inside "app"

88
00:04:06,152 --> 00:04:08,928
becomes the root path of our website,

89
00:04:08,928 --> 00:04:11,441
also known as the home page.

90
00:04:11,441 --> 00:04:15,131
The "reviews" folder inside "app" is mapped

91
00:04:15,131 --> 00:04:18,048
to the "/reviews" path in the URL,

92
00:04:18,135 --> 00:04:21,166
as long as it contains a "page.jsx"

93
00:04:21,166 --> 00:04:22,467
file of course.

94
00:04:22,553 --> 00:04:25,602
And we can create nested folders, like

95
00:04:25,602 --> 00:04:28,249
"stardew-valley" inside "reviews"

96
00:04:28,329 --> 00:04:32,775
that will result in "/reviews/stardew-valley"

97
00:04:32,775 --> 00:04:34,356
as the URL path.

98
00:04:34,454 --> 00:04:37,350
I'm sure you can see the pattern by now.

99
00:04:37,350 --> 00:04:40,414
Given a path inside the "app" folder

100
00:04:40,414 --> 00:04:43,137
that contains a "page.jsx" file,

101
00:04:43,222 --> 00:04:46,226
the URL path will be formed by all

102
00:04:46,226 --> 00:04:48,700
the folders excluding "app",

103
00:04:48,789 --> 00:04:51,522
and it always starts with a "/".

104
00:04:51,522 --> 00:04:54,075
Now, each individual folder is

105
00:04:54,075 --> 00:04:56,203
called a "route segment".

106
00:04:56,288 --> 00:04:58,681
This will be relevant when we talk

107
00:04:58,681 --> 00:05:01,003
about nested layouts for example.

108
00:05:01,073 --> 00:05:03,817
The "/" at the front is a bit special.

109
00:05:03,817 --> 00:05:06,301
It's called the "root segment".

110
00:05:06,301 --> 00:05:10,169
We've already seen how the RootLayout component,

111
00:05:10,169 --> 00:05:13,366
that is the "layout.jsx" file directly

112
00:05:13,366 --> 00:05:15,216
inside our app folder,

113
00:05:15,300 --> 00:05:19,015
applies to all the pages in our application.

114
00:05:19,015 --> 00:05:23,216
The last folder, the one that contains "page.jsx",

115
00:05:23,216 --> 00:05:26,642
is sometimes called the "leaf" segment,

116
00:05:26,642 --> 00:05:28,836
as in the leaf of a tree.

117
00:05:28,836 --> 00:05:32,284
Now, for a route to display an HTML page,

118
00:05:32,284 --> 00:05:36,906
as we've seen it must contain a "page.jsx" file.

119
00:05:36,906 --> 00:05:40,384
But you can also call it "page.js" instead,

120
00:05:40,384 --> 00:05:41,516
if you prefer,

121
00:05:41,597 --> 00:05:45,814
or "page.tsx" if you use TypeScript.

122
00:05:45,814 --> 00:05:49,316
They're all valid extensions for the page file.

123
00:05:49,316 --> 00:05:51,449
If you're wondering why we need a

124
00:05:51,449 --> 00:05:53,453
separate folder for each route,

125
00:05:53,517 --> 00:05:56,687
rather than just using a different file name,

126
00:05:56,687 --> 00:06:01,150
as was the case with the old Next.js Pages Router,

127
00:06:01,150 --> 00:06:03,479
I'll explain that in the video

128
00:06:03,479 --> 00:06:05,109
about nested layouts.