1
00:00:02,000 --> 00:00:04,000
Now before we get our hands dirty,

2
00:00:04,000 --> 00:00:07,000
let's understand deployment in theory.

3
00:00:07,000 --> 00:00:10,000
And let's start with the different deployment options

4
00:00:10,000 --> 00:00:12,000
Next.js gives you.

5
00:00:12,000 --> 00:00:14,000
Because it turns out,

6
00:00:14,000 --> 00:00:17,000
that you have two totally different ways of building

7
00:00:17,000 --> 00:00:21,000
and deploying your Next.js app.

8
00:00:21,000 --> 00:00:25,000
The first and most common option is the Standard Build,

9
00:00:25,000 --> 00:00:27,000
as I like to call it.

10
00:00:27,000 --> 00:00:31,000
But we also can actually do a Full Static Build

11
00:00:31,000 --> 00:00:36,000
and deploy our site as a full static website.

12
00:00:36,000 --> 00:00:39,000
Now, let me explain what these two options mean.

13
00:00:40,000 --> 00:00:44,000
You do a standard build by running the next build command

14
00:00:44,000 --> 00:00:49,000
or in your project, where you have a package.json file,

15
00:00:49,000 --> 00:00:53,000
this build script which runs next build under the hood.

16
00:00:53,000 --> 00:00:56,000
We saw that command in action earlier

17
00:00:56,000 --> 00:00:58,000
in the course already,

18
00:00:58,000 --> 00:01:02,000
when we talked about static page generation and so on.

19
00:01:02,000 --> 00:01:04,000
When running this command,

20
00:01:04,000 --> 00:01:09,000
Next.js produces a optimized production build,

21
00:01:09,000 --> 00:01:12,000
optimized production bundles for your application

22
00:01:12,000 --> 00:01:17,000
and very important, it spits out a service-side application.

23
00:01:18,000 --> 00:01:21,000
The result of running next build

24
00:01:21,000 --> 00:01:26,000
is an output that requires a NodeJS server to run it.

25
00:01:27,000 --> 00:01:31,000
So you can't take the output of next build

26
00:01:31,000 --> 00:01:34,000
and put it onto some static host.

27
00:01:34,000 --> 00:01:38,000
You would be able to do that for a standard React app,

28
00:01:38,000 --> 00:01:42,000
a non Next.js app, but because Next.js

29
00:01:42,000 --> 00:01:46,000
has these built-in service-side capabilities,

30
00:01:46,000 --> 00:01:49,000
like pre-rendering pages on the fly, on the server,

31
00:01:49,000 --> 00:01:52,000
revalidating pages, API routes.

32
00:01:52,000 --> 00:01:55,000
Because it has these service-side features,

33
00:01:55,000 --> 00:02:00,000
it needs a NodeJS server to run that code,

34
00:02:00,000 --> 00:02:01,000
should make sense.

35
00:02:01,000 --> 00:02:02,000
Now don't get me wrong,

36
00:02:02,000 --> 00:02:05,000
pages will still be pre-rendered

37
00:02:05,000 --> 00:02:08,000
during the build process if possible.

38
00:02:08,000 --> 00:02:11,000
So if you have pages with get static props

39
00:02:11,000 --> 00:02:14,000
or with no data at all,

40
00:02:14,000 --> 00:02:18,000
those pages will still be prebuilt when you run next build.

41
00:02:18,000 --> 00:02:22,000
But you still have the NodeJS server, as I just explained,

42
00:02:22,000 --> 00:02:24,000
for your API routes,

43
00:02:24,000 --> 00:02:27,000
which can and should only run on the server,

44
00:02:27,000 --> 00:02:29,000
for server-side pages

45
00:02:29,000 --> 00:02:33,000
that use the get server-side props function

46
00:02:33,000 --> 00:02:35,000
and for page revalidations,

47
00:02:35,000 --> 00:02:37,000
which you might wanna perform

48
00:02:37,000 --> 00:02:40,000
on your statically rendered pages.

49
00:02:40,000 --> 00:02:45,000
You also need a NodeJS server for dynamic pages

50
00:02:45,000 --> 00:02:50,000
with getStaticPaths if you have fallback set to true

51
00:02:50,000 --> 00:02:55,000
or blocking, because then some of the pages will be created

52
00:02:55,000 --> 00:02:59,000
on the fly when requests are reaching the server.

53
00:02:59,000 --> 00:03:02,000
And you need a server that is able to do that

54
00:03:02,000 --> 00:03:03,000
for that as well.

55
00:03:03,000 --> 00:03:07,000
So that is why you need a NodeJS server

56
00:03:07,000 --> 00:03:11,000
for running the output next build gives you.

57
00:03:11,000 --> 00:03:13,000
And that has implications.

58
00:03:13,000 --> 00:03:16,000
It means that when you deploy that output,

59
00:03:16,000 --> 00:03:18,000
you need to deploy it onto a host

60
00:03:18,000 --> 00:03:21,000
that is able to run NodeJS.

61
00:03:21,000 --> 00:03:25,000
And we're going to see that later in this course section.

62
00:03:25,000 --> 00:03:29,000
Now when deploying a site, an application

63
00:03:29,000 --> 00:03:33,000
you also typically need to redeploy from time to time.

64
00:03:33,000 --> 00:03:35,000
And when doing a standard build,

65
00:03:35,000 --> 00:03:39,000
you need to redeploy whenever your code changes, of course

66
00:03:39,000 --> 00:03:42,000
because you want your latest code to be

67
00:03:42,000 --> 00:03:44,000
in effect in production,

68
00:03:44,000 --> 00:03:48,000
but you will also need to redeploy if your content changed

69
00:03:48,000 --> 00:03:52,000
and you need to re-render some of your pages

70
00:03:52,000 --> 00:03:56,000
because you're not revalidating them on the server

71
00:03:56,000 --> 00:04:00,000
because you haven't added that revalidate setting

72
00:04:00,000 --> 00:04:02,000
in get static props.

73
00:04:02,000 --> 00:04:04,000
Then if you have such pages

74
00:04:04,000 --> 00:04:09,000
as we, for example have them in our blog application here

75
00:04:09,000 --> 00:04:12,000
in our blog site, there I have pages

76
00:04:12,000 --> 00:04:16,000
where I pre-rendered the pages with some data

77
00:04:16,000 --> 00:04:18,000
and I don't revalidate.

78
00:04:18,000 --> 00:04:20,000
If you have such pages, which is no problem,

79
00:04:20,000 --> 00:04:22,000
but if you have such pages,

80
00:04:22,000 --> 00:04:25,000
you will also need to redeploy

81
00:04:25,000 --> 00:04:28,000
whenever the contents that influences those pages

82
00:04:28,000 --> 00:04:32,000
or that impacts those pages changed.

83
00:04:32,000 --> 00:04:34,000
Now that's the standard build,

84
00:04:34,000 --> 00:04:36,000
which you get with next build.

85
00:04:36,000 --> 00:04:38,000
For some projects,

86
00:04:38,000 --> 00:04:41,000
the full static build is a good option though.

87
00:04:41,000 --> 00:04:45,000
You get that by running next export, another command.

88
00:04:46,000 --> 00:04:49,000
We could run this in our project

89
00:04:49,000 --> 00:04:51,000
by adding a script for that.

90
00:04:51,000 --> 00:04:53,000
Here in package.json,

91
00:04:53,000 --> 00:04:55,000
we could add a export script

92
00:04:55,000 --> 00:04:57,000
or a however you wanna call it,

93
00:04:57,000 --> 00:04:59,000
where we then run next export.

94
00:05:01,000 --> 00:05:04,000
Now next export does something totally different

95
00:05:04,000 --> 00:05:06,000
than next build.

96
00:05:06,000 --> 00:05:09,000
It also produces an optimized production version

97
00:05:09,000 --> 00:05:11,000
of your application

98
00:05:11,000 --> 00:05:16,000
but it produces a 100% static application,

99
00:05:16,000 --> 00:05:20,000
which means only HTML, CSS and JavaScript,

100
00:05:20,000 --> 00:05:22,000
no server-side code

101
00:05:22,000 --> 00:05:25,000
and therefore for hosting such a website,

102
00:05:25,000 --> 00:05:28,000
you don't need a NodeJS server.

103
00:05:28,000 --> 00:05:31,000
Which makes hosting easier because you don't need to worry

104
00:05:31,000 --> 00:05:34,000
about scaling and so on, so much

105
00:05:34,000 --> 00:05:37,000
because there are plenty of static hosts out there

106
00:05:37,000 --> 00:05:41,000
which scale dynamically and are very cost-effective.

107
00:05:41,000 --> 00:05:43,000
So having a static app,

108
00:05:43,000 --> 00:05:47,000
which doesn't require a NodeJS server, isn't too bad.

109
00:05:47,000 --> 00:05:50,000
It can definitely make deployment a bit easier

110
00:05:50,000 --> 00:05:54,000
but next export isn't always an option.

111
00:05:54,000 --> 00:05:58,000
Since it spits out a 100% steady gap,

112
00:05:58,000 --> 00:06:01,000
there are certain things, certain next features

113
00:06:01,000 --> 00:06:04,000
which you just can't use in such a application.

114
00:06:04,000 --> 00:06:07,000
For example, you can't use next export

115
00:06:07,000 --> 00:06:11,000
if your site relies on API routes,

116
00:06:11,000 --> 00:06:14,000
on service-side pages with get service-side props,

117
00:06:14,000 --> 00:06:16,000
on page revalidations,

118
00:06:16,000 --> 00:06:20,000
or if you have static paths with fallback set to true

119
00:06:20,000 --> 00:06:22,000
or blocking.

120
00:06:22,000 --> 00:06:27,000
All those things require a code to execute on demand,

121
00:06:27,000 --> 00:06:30,000
for incoming requests on the server.

122
00:06:30,000 --> 00:06:33,000
And therefore it's difficult, if you have no server.

123
00:06:33,000 --> 00:06:35,000
So next export only works

124
00:06:35,000 --> 00:06:39,000
if you have a page which doesn't need any service-side code.

125
00:06:40,000 --> 00:06:44,000
Now, when building a page with next export,

126
00:06:44,000 --> 00:06:46,000
you have to be aware of the fact that

127
00:06:46,000 --> 00:06:51,000
that means that you need to redeploy your application

128
00:06:51,000 --> 00:06:53,000
whenever your code changes

129
00:06:53,000 --> 00:06:56,000
but also whenever any content changes,

130
00:06:56,000 --> 00:06:59,000
since you can't use page revalidations

131
00:06:59,000 --> 00:07:01,000
and fallbacks and so on,

132
00:07:01,000 --> 00:07:05,000
you need to redeploy whenever any content changed

133
00:07:05,000 --> 00:07:08,000
because you'll need to export your application again.

134
00:07:08,000 --> 00:07:11,000
You need to rebuild all the pages again.

135
00:07:11,000 --> 00:07:14,000
Again, that might not be a disadvantage.

136
00:07:14,000 --> 00:07:18,000
That can be perfectly fine for a simple blog, for example.

137
00:07:18,000 --> 00:07:21,000
There you add a new blog post every week,

138
00:07:21,000 --> 00:07:23,000
you do a redeployment every week.

139
00:07:23,000 --> 00:07:26,000
Not too difficult, just one step,

140
00:07:26,000 --> 00:07:30,000
and then next export can be a great option.

141
00:07:30,000 --> 00:07:34,000
In the blog application we built in the last course section,

142
00:07:34,000 --> 00:07:36,000
next export wouldn't be our option at the moment

143
00:07:36,000 --> 00:07:40,000
because we're using API routes, for example

144
00:07:40,000 --> 00:07:44,000
and because we're also using revalidations in some pages

145
00:07:44,000 --> 00:07:49,000
and these are all features that require a NodeJS server,

146
00:07:49,000 --> 00:07:50,000
since these are all tasks

147
00:07:50,000 --> 00:07:53,000
which will execute after deployment

148
00:07:53,000 --> 00:07:56,000
on the server for incoming requests.

149
00:07:56,000 --> 00:07:58,000
Nonetheless, these are your two options

150
00:07:58,000 --> 00:08:00,000
and we are going to see

151
00:08:00,000 --> 00:08:03,000
both options in action in this course section.