1
00:00:02,000 --> 00:00:03,000
Now, up to this point,

2
00:00:03,000 --> 00:00:05,000
I explained a lot about pre-rendering

3
00:00:05,000 --> 00:00:08,000
and how next.js does that.

4
00:00:08,000 --> 00:00:10,000
But we haven't really seen it in action

5
00:00:10,000 --> 00:00:15,000
other than on the running website in development mode.

6
00:00:15,000 --> 00:00:18,000
But I do want to show you what exactly next.js

7
00:00:18,000 --> 00:00:23,000
does do for you when you build the application.

8
00:00:23,000 --> 00:00:26,000
Now, I did mention this build script before,

9
00:00:26,000 --> 00:00:29,000
this build script, that's a script you execute

10
00:00:29,000 --> 00:00:33,000
when you are ready to deploy your next application,

11
00:00:33,000 --> 00:00:38,000
your next.js project and this build step here,

12
00:00:38,000 --> 00:00:41,000
this next build command which has executed in the end

13
00:00:41,000 --> 00:00:45,000
this will then pre-generate your pages.

14
00:00:45,000 --> 00:00:49,000
And to show this to you, here I quit my development server

15
00:00:49,000 --> 00:00:52,000
and I'll run npm run build here.

16
00:00:52,000 --> 00:00:54,000
So I'll execute this build script

17
00:00:54,000 --> 00:00:58,000
and therefore next build, in this project folder.

18
00:00:58,000 --> 00:01:00,000
And what you'll see now is that

19
00:01:00,000 --> 00:01:04,000
it's now creating that optimized production build.

20
00:01:04,000 --> 00:01:06,000
And that can take a couple of seconds,

21
00:01:06,000 --> 00:01:09,000
and after a while, this build process will complete.

22
00:01:09,000 --> 00:01:12,000
Now we got a couple of pieces of information here.

23
00:01:12,000 --> 00:01:14,000
We see that it was successful in the end

24
00:01:14,000 --> 00:01:16,000
because we have no error here.

25
00:01:16,000 --> 00:01:20,000
And we see that it generated two static pages here.

26
00:01:20,000 --> 00:01:24,000
And we see the detailed output down there.

27
00:01:24,000 --> 00:01:26,000
We also have a ledger here at the bottom

28
00:01:26,000 --> 00:01:28,000
telling us that a filled dot

29
00:01:28,000 --> 00:01:31,000
stands for static site generation.

30
00:01:31,000 --> 00:01:34,000
So for a pre-generated page, that was pre-generated

31
00:01:34,000 --> 00:01:37,000
during development or during the build process

32
00:01:37,000 --> 00:01:40,000
because it uses get static props

33
00:01:40,000 --> 00:01:44,000
a Lambda symbol would stand for us server side only page

34
00:01:44,000 --> 00:01:46,000
something we're going to see later,

35
00:01:46,000 --> 00:01:49,000
an empty dots stands for static.

36
00:01:49,000 --> 00:01:51,000
So all's up page pre-generated

37
00:01:51,000 --> 00:01:54,000
but a page that doesn't even need any data

38
00:01:54,000 --> 00:01:56,000
and therefore doesn't use get static props

39
00:01:56,000 --> 00:01:58,000
or anything like that.

40
00:01:58,000 --> 00:02:01,000
And if I scroll back up again, we see that in the end

41
00:02:01,000 --> 00:02:04,000
the two pages that were pre-generated,

42
00:02:04,000 --> 00:02:06,000
is to starting page so slash nothing.

43
00:02:06,000 --> 00:02:11,000
So in next.js and then a 404 page.

44
00:02:11,000 --> 00:02:14,000
We haven't added one but you get one for free automatically.

45
00:02:14,000 --> 00:02:17,000
We can ignore this underscore app thing here.

46
00:02:17,000 --> 00:02:20,000
Now the 404 page has an empty dot

47
00:02:20,000 --> 00:02:23,000
which means it was pre-generated without any data,

48
00:02:23,000 --> 00:02:26,000
which makes sense, we didn't add our own one

49
00:02:26,000 --> 00:02:29,000
and the default one is not fetching any data.

50
00:02:29,000 --> 00:02:34,000
And index.js, so slash nothing was statically pre-generated

51
00:02:34,000 --> 00:02:36,000
with help of get static props.

52
00:02:36,000 --> 00:02:39,000
That's why we have that filled dot here.

53
00:02:39,000 --> 00:02:41,000
That's how we can read this.

54
00:02:41,000 --> 00:02:42,000
And we can also see this, if we have a look

55
00:02:42,000 --> 00:02:45,000
at the .next folder, which was generated now

56
00:02:45,000 --> 00:02:48,000
which holds this production ready code.

57
00:02:48,000 --> 00:02:51,000
Which holds the output of the npm run build command.

58
00:02:51,000 --> 00:02:54,000
Then in there we do have a server folder

59
00:02:54,000 --> 00:02:55,000
into which we can dive.

60
00:02:55,000 --> 00:03:00,000
And in there we see those pre-generated HTML files.

61
00:03:01,000 --> 00:03:06,000
The two pre-generated HTML files and in index HTML,

62
00:03:06,000 --> 00:03:10,000
if you open that, you also find that product data

63
00:03:10,000 --> 00:03:11,000
in the end in there

64
00:03:11,000 --> 00:03:14,000
because that's the pre-generated page,

65
00:03:14,000 --> 00:03:17,000
which we also see if we would visit this page

66
00:03:17,000 --> 00:03:19,000
in the browser.

67
00:03:19,000 --> 00:03:21,000
And that's that pre-generated page,

68
00:03:21,000 --> 00:03:23,000
which is sent back on the initial request

69
00:03:23,000 --> 00:03:26,000
to the search engine crawler

70
00:03:26,000 --> 00:03:29,000
or to the visitors off our page.

71
00:03:29,000 --> 00:03:32,000
And we can even previewed this production ready page here

72
00:03:34,000 --> 00:03:39,000
by running npm start, npm starts the production ready page

73
00:03:40,000 --> 00:03:42,000
with a nodejs server,

74
00:03:42,000 --> 00:03:44,000
and whilst we typically would do that

75
00:03:44,000 --> 00:03:47,000
on some remote computer to expose it to the world,

76
00:03:47,000 --> 00:03:51,000
we can also do that locally on our machine.

77
00:03:51,000 --> 00:03:54,000
And then again, it starts on local host 3000

78
00:03:54,000 --> 00:03:57,000
but this now is not the development server

79
00:03:57,000 --> 00:04:02,000
but the real server serving the production ready page.

80
00:04:02,000 --> 00:04:05,000
So if I visit local hosts 3000

81
00:04:05,000 --> 00:04:08,000
if I entered this into browser, I still see this page

82
00:04:08,000 --> 00:04:11,000
with the pre-rendered products,

83
00:04:11,000 --> 00:04:14,000
because we just saw that in the pages folder,

84
00:04:14,000 --> 00:04:15,000
in this .next folder

85
00:04:15,000 --> 00:04:19,000
which holds is production ready site.

86
00:04:19,000 --> 00:04:22,000
Side note, in the page source,

87
00:04:22,000 --> 00:04:27,000
you'll also see there is some script tag injected by next.js

88
00:04:27,000 --> 00:04:30,000
which in the end includes that data,

89
00:04:30,000 --> 00:04:33,000
with which the data was populated.

90
00:04:33,000 --> 00:04:36,000
That is needed for this hydration

91
00:04:36,000 --> 00:04:40,000
where the pre-rendered HTML code is then connected

92
00:04:40,000 --> 00:04:44,000
with the react application and that data

93
00:04:44,000 --> 00:04:46,000
which was pre-fetched is handed off

94
00:04:46,000 --> 00:04:47,000
to that react application

95
00:04:47,000 --> 00:04:49,000
so that the react application

96
00:04:49,000 --> 00:04:52,000
knows that this was dynamic data

97
00:04:52,000 --> 00:04:55,000
and which kind of data should be rendered.

98
00:04:55,000 --> 00:04:58,000
So that if you continued working with that data

99
00:04:58,000 --> 00:05:01,000
and you would be updating that data through react.js

100
00:05:01,000 --> 00:05:06,000
react would know which kind of data was received originally.

101
00:05:06,000 --> 00:05:09,000
That's just a side note, it's all done automatically.

102
00:05:09,000 --> 00:05:12,000
We don't need to do anything for that

103
00:05:12,000 --> 00:05:15,000
but that is how next.js does work here

104
00:05:15,000 --> 00:05:18,000
and how it pre renders pages for you.