1
00:00:02,000 --> 00:00:03,000
Now let's get started

2
00:00:03,000 --> 00:00:06,000
with writing some NextJS code here.

3
00:00:06,000 --> 00:00:09,000
And for this I'll shrink the terminal a little bit.

4
00:00:09,000 --> 00:00:11,000
And in this pages folder,

5
00:00:11,000 --> 00:00:15,000
we can ignore this _app.js file for the moment.

6
00:00:15,000 --> 00:00:18,000
We can delete the api folder in there.

7
00:00:18,000 --> 00:00:19,000
And in the styles folder

8
00:00:19,000 --> 00:00:22,000
we can also delete the Home.module.css file.

9
00:00:22,000 --> 00:00:24,000
We can keep the globals.css file

10
00:00:24,000 --> 00:00:25,000
if we want though.

11
00:00:26,000 --> 00:00:29,000
Now we got this index.js file.

12
00:00:29,000 --> 00:00:30,000
And in this file,

13
00:00:30,000 --> 00:00:35,000
* in the end just have a standard React component.

14
00:00:35,000 --> 00:00:36,000
But to make this even clearer

15
00:00:36,000 --> 00:00:38,000
let's delete this file as well

16
00:00:38,000 --> 00:00:41,000
so that the only remaining file in the pages folder

17
00:00:41,000 --> 00:00:43,000
is the _app.js file.

18
00:00:43,000 --> 00:00:47,000
And now let's say to get started with NextJS

19
00:00:47,000 --> 00:00:51,000
we wanna build a simple website with three kinds of pages,

20
00:00:51,000 --> 00:00:53,000
a starting page let's say,

21
00:00:53,000 --> 00:00:56,000
then a news page with a list of news

22
00:00:56,000 --> 00:00:59,000
and then a page for the news details.

23
00:00:59,000 --> 00:01:01,000
So when we click on a news item

24
00:01:01,000 --> 00:01:03,000
and we're taken to the full page

25
00:01:03,000 --> 00:01:06,000
for that specific news item.

26
00:01:06,000 --> 00:01:09,000
And if we wanted to create a structure like this,

27
00:01:09,000 --> 00:01:12,000
in NextJS in the pages folder here,

28
00:01:12,000 --> 00:01:15,000
we would create three files.

29
00:01:15,000 --> 00:01:18,000
The index.js file will be our route page.

30
00:01:18,000 --> 00:01:22,000
So if a request reaches our domain slash nothing

31
00:01:22,000 --> 00:01:24,000
just index.js will be loaded.

32
00:01:24,000 --> 00:01:27,000
That is in line with standard websites,

33
00:01:27,000 --> 00:01:29,000
if I may call it like this

34
00:01:29,000 --> 00:01:32,000
where we also have index.html files

35
00:01:32,000 --> 00:01:35,000
which are typically served as route pages,

36
00:01:35,000 --> 00:01:39,000
if a request just targets slash nothing after the domain.

37
00:01:39,000 --> 00:01:42,000
And here it's index.js, which will be served

38
00:01:42,000 --> 00:01:46,000
if a request reaches just our domain slash nothing.

39
00:01:47,000 --> 00:01:50,000
Then we might also have a news.js file

40
00:01:50,000 --> 00:01:53,000
for requests that reach our domain slash news.

41
00:01:53,000 --> 00:01:57,000
And that's important with the exception of the index name

42
00:01:57,000 --> 00:01:58,000
which is a special name,

43
00:01:58,000 --> 00:01:59,000
which is served whenever

44
00:01:59,000 --> 00:02:02,000
we have a request to just slash nothing,

45
00:02:02,000 --> 00:02:06,000
the file name will be used as a path name.

46
00:02:06,000 --> 00:02:08,000
So news.js the content in here,

47
00:02:08,000 --> 00:02:10,000
the React component in here,

48
00:02:10,000 --> 00:02:15,000
would be served for requests to our domain slash news,

49
00:02:15,000 --> 00:02:17,000
for example.

50
00:02:17,000 --> 00:02:19,000
So not news.js, but just news.

51
00:02:19,000 --> 00:02:22,000
Then then news.js file would be served.

52
00:02:22,000 --> 00:02:25,000
And I'll comment this out to leave that in here.

53
00:02:25,000 --> 00:02:29,000
index.js would be served for just our domain.com/nothing.

54
00:02:30,000 --> 00:02:31,000
And I'll come back to the page

55
00:02:31,000 --> 00:02:34,000
for a single news item later.

56
00:02:34,000 --> 00:02:37,000
For the moment, these are the two pages we have.

57
00:02:37,000 --> 00:02:40,000
And now what goes in those page files,

58
00:02:40,000 --> 00:02:41,000
I mentioned it before,

59
00:02:41,000 --> 00:02:44,000
our standard React component,

60
00:02:44,000 --> 00:02:46,000
the React components that should be loaded

61
00:02:46,000 --> 00:02:48,000
for that specific page.

62
00:02:49,000 --> 00:02:50,000
So here in index.js

63
00:02:50,000 --> 00:02:53,000
we can create a component just as we know it

64
00:02:53,000 --> 00:02:54,000
typically as a function

65
00:02:54,000 --> 00:02:57,000
and we could name it as HomePage.

66
00:02:57,000 --> 00:02:59,000
The component name is up to you.

67
00:02:59,000 --> 00:03:02,000
Now you must export this component

68
00:03:02,000 --> 00:03:07,000
so that NextJS is able to find it, so to say.

69
00:03:07,000 --> 00:03:09,000
And then in this component function

70
00:03:09,000 --> 00:03:11,000
you return JSX code

71
00:03:11,000 --> 00:03:14,000
just as you're used to.

72
00:03:14,000 --> 00:03:16,000
You return your JSX code,

73
00:03:16,000 --> 00:03:20,000
for example, a h1 tag where we say "The Home Page."

74
00:03:20,000 --> 00:03:23,000
That could be a very simple first page.

75
00:03:23,000 --> 00:03:26,000
Of course we're going to add more meaningful content

76
00:03:26,000 --> 00:03:27,000
in a second.

77
00:03:27,000 --> 00:03:30,000
Now we can copy this to news.js

78
00:03:30,000 --> 00:03:31,000
and add it here.

79
00:03:31,000 --> 00:03:32,000
As a side note,

80
00:03:32,000 --> 00:03:36,000
if you're wondering why we don't have any import statement

81
00:03:36,000 --> 00:03:37,000
like this at the top,

82
00:03:37,000 --> 00:03:40,000
where we import React from react.

83
00:03:40,000 --> 00:03:45,000
NextJS projects support this modern React setup

84
00:03:45,000 --> 00:03:47,000
where you can omit this import

85
00:03:47,000 --> 00:03:50,000
and it's added behind the scenes, so to say.

86
00:03:50,000 --> 00:03:51,000
And with that here

87
00:03:51,000 --> 00:03:52,000
in the news.js file

88
00:03:52,000 --> 00:03:55,000
we would have let's say NewsPage component

89
00:03:55,000 --> 00:03:58,000
and of course also export the news page,

90
00:03:58,000 --> 00:04:00,000
and here we could say "The News Page."

91
00:04:01,000 --> 00:04:02,000
And if we do that,

92
00:04:02,000 --> 00:04:05,000
if we add these two pages

93
00:04:05,000 --> 00:04:06,000
then in the terminal,

94
00:04:06,000 --> 00:04:08,000
in this integrated terminal here

95
00:04:08,000 --> 00:04:12,000
which has already navigated into this project folder

96
00:04:12,000 --> 00:04:16,000
we can start the development server with NPM and run dev.

97
00:04:16,000 --> 00:04:17,000
And that development server

98
00:04:17,000 --> 00:04:21,000
is given to us by that NextJS project setup.

99
00:04:21,000 --> 00:04:22,000
So with npm run dev,

100
00:04:22,000 --> 00:04:24,000
we start this development server.

101
00:04:24,000 --> 00:04:29,000
Here you see the URL where you can visit your page

102
00:04:29,000 --> 00:04:32,000
and therefore if I now visit localhost:3000

103
00:04:32,000 --> 00:04:35,000
I see the homepage.

104
00:04:35,000 --> 00:04:39,000
And if we instead would visit localhost:3000/news

105
00:04:39,000 --> 00:04:41,000
we see the news page.

106
00:04:41,000 --> 00:04:43,000
And now what's interesting is

107
00:04:43,000 --> 00:04:46,000
that the content is just some dummy content,

108
00:04:46,000 --> 00:04:50,000
but if we view the page source here

109
00:04:50,000 --> 00:04:52,000
off the loaded page,

110
00:04:52,000 --> 00:04:54,000
then we see that in there

111
00:04:54,000 --> 00:04:57,000
we don't just have an empty skeleton,

112
00:04:57,000 --> 00:04:58,000
but if we look up at closer,

113
00:04:58,000 --> 00:05:02,000
we find the actual page content in here.

114
00:05:02,000 --> 00:05:04,000
And that's an important difference

115
00:05:04,000 --> 00:05:05,000
to a standard React app

116
00:05:05,000 --> 00:05:10,000
where the page is not pre-rendered on the server.

117
00:05:10,000 --> 00:05:12,000
This HTML code which we see here

118
00:05:12,000 --> 00:05:16,000
is the HTML code sent back by the server.

119
00:05:16,000 --> 00:05:19,000
And since it contains that content here

120
00:05:19,000 --> 00:05:23,000
that means that the entire page was pre-rendered.

121
00:05:23,000 --> 00:05:25,000
And that's why the content ends up in here

122
00:05:25,000 --> 00:05:26,000
and the advantage's

123
00:05:26,000 --> 00:05:28,000
that we don't have any flickering on the page

124
00:05:28,000 --> 00:05:30,000
whilst we're waiting for it.

125
00:05:30,000 --> 00:05:31,000
And in addition,

126
00:05:31,000 --> 00:05:36,000
search engines would also see that content here.

127
00:05:36,000 --> 00:05:37,000
They see what our users see

128
00:05:37,000 --> 00:05:40,000
and that of course can be a great advantage.

129
00:05:40,000 --> 00:05:42,000
And this is how we can get started

130
00:05:42,000 --> 00:05:44,000
with this file based routing.

131
00:05:44,000 --> 00:05:48,000
And as you see, by looking at the page source,

132
00:05:48,000 --> 00:05:50,000
in addition to that file based routing,

133
00:05:50,000 --> 00:05:52,000
we also already use that

134
00:05:52,000 --> 00:05:55,000
built-in server-side rendering feature

135
00:05:55,000 --> 00:05:56,000
without any extra setup

136
00:05:56,000 --> 00:05:59,000
because it works out of the box.

137
00:05:59,000 --> 00:06:02,000
With that, let's now dig a bit deeper

138
00:06:02,000 --> 00:06:04,000
and let's see what else we can do here.