1
00:00:03,000 --> 00:00:06,478
We have our initial Next.js project set up,

2
00:00:06,478 --> 00:00:09,186
and we started the local development

3
00:00:09,186 --> 00:00:11,818
server with the "next dev" command.

4
00:00:11,893 --> 00:00:15,418
Now, if we try opening our website in the browser,

5
00:00:15,418 --> 00:00:18,698
at the moment we just get a "not found" message,

6
00:00:18,698 --> 00:00:22,749
because we don't have any pages in our app yet.

7
00:00:22,749 --> 00:00:26,059
Let's stop the server for the time being,

8
00:00:26,059 --> 00:00:28,400
and see how to define a page.

9
00:00:28,480 --> 00:00:31,807
We can add a home page simply by creating

10
00:00:31,807 --> 00:00:34,647
a new file inside the "app" folder,

11
00:00:34,728 --> 00:00:37,490
called "page.jsx".

12
00:00:37,490 --> 00:00:39,968
Just like the "layout" file,

13
00:00:39,968 --> 00:00:43,784
the "page" file must export a React component,

14
00:00:43,784 --> 00:00:45,876
let's call it "HomePage".

15
00:00:46,184 --> 00:00:49,562
And here we can return some JSX elements.

16
00:00:49,562 --> 00:00:52,952
Let's start with a simple "h1" heading,

17
00:00:52,952 --> 00:00:55,647
saying "My first Next.js page".

18
00:00:55,734 --> 00:00:59,176
So this will be the content of our home page.

19
00:00:59,176 --> 00:01:01,811
Let's save this file, and go and start

20
00:01:01,811 --> 00:01:03,682
the server in the terminal.

21
00:01:03,752 --> 00:01:06,281
Now, since we'll be using the "next

22
00:01:06,281 --> 00:01:08,160
dev" command all the time,

23
00:01:08,232 --> 00:01:10,631
it's better if we add a "script"

24
00:01:10,631 --> 00:01:12,505
to our package.json file.

25
00:01:12,580 --> 00:01:15,155
We can define a "dev" script, that

26
00:01:15,155 --> 00:01:17,275
runs the "next dev" command.

27
00:01:17,350 --> 00:01:19,041
This way, in the terminal

28
00:01:19,110 --> 00:01:22,219
we can type "npm run dev" instead,

29
00:01:22,219 --> 00:01:25,185
and this will execute "next dev",

30
00:01:25,185 --> 00:01:28,151
starting the server on port 3000.

31
00:01:28,240 --> 00:01:31,857
By listing all our scripts in the package.json

32
00:01:31,857 --> 00:01:34,527
it's also easier to see which commands

33
00:01:34,527 --> 00:01:36,565
are available in our project.

34
00:01:36,635 --> 00:01:39,053
Anyway, if we go back to the browser,

35
00:01:39,053 --> 00:01:40,360
and reload the page,

36
00:01:40,426 --> 00:01:42,586
you can see that it's now showing

37
00:01:42,586 --> 00:01:44,747
the heading we wrote in our code.

38
00:01:44,812 --> 00:01:48,684
So our home page is being displayed correctly.

39
00:01:48,684 --> 00:01:51,508
Now, while working on our pages I will

40
00:01:51,508 --> 00:01:54,332
always use the Chrome Developer Tools,

41
00:01:54,406 --> 00:01:56,651
that you can open from this menu,

42
00:01:56,651 --> 00:01:58,557
or with a keyboard shortcut.

43
00:01:58,625 --> 00:02:01,488
This way we can see any log messages

44
00:02:01,488 --> 00:02:03,317
printed to the Console.

45
00:02:03,397 --> 00:02:06,751
For most videos, I will also keep the browser

46
00:02:06,751 --> 00:02:09,583
in a smaller window on the right side,

47
00:02:09,657 --> 00:02:12,036
and the Visual Studio Code window

48
00:02:12,036 --> 00:02:13,909
on the rest of the screen,

49
00:02:13,981 --> 00:02:16,957
so you can see both the code in the editor,

50
00:02:16,957 --> 00:02:19,341
and at the same time what the page

51
00:02:19,341 --> 00:02:21,164
looks like in the browser.

52
00:02:21,234 --> 00:02:24,101
The dev server will automatically update

53
00:02:24,101 --> 00:02:26,753
the page whenever we modify our code.

54
00:02:26,825 --> 00:02:29,402
Let's change this heading for example,

55
00:02:29,565 --> 00:02:31,845
and set it to "Indie Gamer", that

56
00:02:31,845 --> 00:02:34,055
will be the name of our website.

57
00:02:34,124 --> 00:02:37,000
As soon as we save this change, the page

58
00:02:37,000 --> 00:02:39,444
will update and show the new text.

59
00:02:39,516 --> 00:02:41,589
Most of the time we can leave

60
00:02:41,589 --> 00:02:43,448
the terminal panel closed.

61
00:02:43,519 --> 00:02:46,651
The dev server will still be running anyway.

62
00:02:46,651 --> 00:02:49,187
We could add a paragraph to this page,

63
00:02:49,291 --> 00:02:51,560
with a tagline, saying "Only

64
00:02:51,560 --> 00:02:53,343
the best indie games,"

65
00:02:53,424 --> 00:02:54,878
"reviewed for you".

66
00:02:56,064 --> 00:03:00,275
Now, in JSX we must have a single root element,

67
00:03:00,275 --> 00:03:03,700
so I'll wrap everything in a React fragment,

68
00:03:03,700 --> 00:03:05,669
that is this special element

69
00:03:05,669 --> 00:03:07,356
written as an empty tag.

70
00:03:07,427 --> 00:03:09,873
This way the page will render both

71
00:03:09,873 --> 00:03:12,031
the heading and the paragraph.

72
00:03:12,103 --> 00:03:14,605
So, this page works pretty much

73
00:03:14,605 --> 00:03:17,106
like any other React component.

74
00:03:17,187 --> 00:03:19,801
What's special about Next.js,

75
00:03:19,801 --> 00:03:22,236
and the App Router, is that

76
00:03:22,326 --> 00:03:25,562
what's in the page will be inserted into

77
00:03:25,562 --> 00:03:28,716
the document defined by the RootLayout.

78
00:03:28,797 --> 00:03:31,553
Right now this layout simply displays

79
00:03:31,553 --> 00:03:33,863
the children inside the "body".

80
00:03:33,937 --> 00:03:36,827
But we could add other elements here.

81
00:03:36,827 --> 00:03:39,505
For example, in most apps we'll want

82
00:03:39,505 --> 00:03:42,182
a common "header" for all the pages.

83
00:03:42,256 --> 00:03:46,049
I'll just write some placeholder text for now.

84
00:03:46,049 --> 00:03:49,704
Then the page contents will be the central part.

85
00:03:49,704 --> 00:03:53,108
In fact we could wrap it in a "main" element,

86
00:03:53,108 --> 00:03:55,630
which is a good practice, and will

87
00:03:55,630 --> 00:03:57,634
also be useful for styling.

88
00:03:57,708 --> 00:04:00,626
We'll typically want a "footer" as well,

89
00:04:00,788 --> 00:04:03,052
showing some other content.

90
00:04:03,052 --> 00:04:05,716
And if we save the updated layout,

91
00:04:05,716 --> 00:04:07,983
you can see that our page now

92
00:04:07,983 --> 00:04:10,017
has a header and a footer.

93
00:04:10,095 --> 00:04:13,197
By the way, I put the text in square brackets

94
00:04:13,197 --> 00:04:16,161
just to indicate that they're placeholders,

95
00:04:16,230 --> 00:04:19,728
it's not a special syntax or anything like that.

96
00:04:19,728 --> 00:04:22,269
The point is that the elements we

97
00:04:22,269 --> 00:04:24,425
return in the page component

98
00:04:24,502 --> 00:04:27,285
are rendered inside those from

99
00:04:27,285 --> 00:04:29,233
the layout component.

100
00:04:29,326 --> 00:04:31,599
So in this sense you can think

101
00:04:31,599 --> 00:04:33,720
of the layout as a template,

102
00:04:33,796 --> 00:04:36,479
that will apply to all the pages.