1
00:00:02,000 --> 00:00:04,000
So it is time to deploy

2
00:00:04,000 --> 00:00:08,000
and we have two deployment options here, as we learned.

3
00:00:08,000 --> 00:00:10,000
Now, only the standard build makes sense

4
00:00:10,000 --> 00:00:13,000
for our project here at the moment,

5
00:00:13,000 --> 00:00:16,000
because we are using server-side features,

6
00:00:16,000 --> 00:00:19,000
like API routes or page re-validations,

7
00:00:20,000 --> 00:00:24,000
and therefore, I will now, again, run npm run build

8
00:00:24,000 --> 00:00:27,000
to produce this production output,

9
00:00:28,000 --> 00:00:31,000
even though we just did it, but still I'll now do that,

10
00:00:31,000 --> 00:00:36,000
and now that gives us the .next folder.

11
00:00:36,000 --> 00:00:40,000
That next folder contains this production output.

12
00:00:40,000 --> 00:00:44,000
Now, how would we deploy our page done in the end?

13
00:00:44,000 --> 00:00:48,000
Well, in the end, you can take your entire project folder

14
00:00:48,000 --> 00:00:51,000
and just move that onto a node JS server.

15
00:00:51,000 --> 00:00:56,000
So onto some remote computer that supports node JS,

16
00:00:56,000 --> 00:00:59,000
and then on that machine, you would run npm install

17
00:00:59,000 --> 00:01:01,000
to install all the dependencies again,

18
00:01:01,000 --> 00:01:04,000
and then npm start.

19
00:01:04,000 --> 00:01:07,000
Npm start runs next start,

20
00:01:07,000 --> 00:01:10,000
and that will then use that build output

21
00:01:10,000 --> 00:01:12,000
and bring up the production server.

22
00:01:12,000 --> 00:01:16,000
So npm start brings up the production server,

23
00:01:16,000 --> 00:01:19,000
and we can test this locally here.

24
00:01:19,000 --> 00:01:21,000
If I run npm start, I'm now again,

25
00:01:21,000 --> 00:01:24,000
hosting this on localhost 3000,

26
00:01:24,000 --> 00:01:29,000
but this is now the production ready application.

27
00:01:29,000 --> 00:01:33,000
So now if a reload this page here, it still works as before,

28
00:01:33,000 --> 00:01:36,000
but that's actually already the production ready app,

29
00:01:36,000 --> 00:01:41,000
and as you see, it's super, super fast, really good to use.

30
00:01:41,000 --> 00:01:44,000
So, that's now production ready

31
00:01:44,000 --> 00:01:45,000
and that is what we would deploy

32
00:01:45,000 --> 00:01:49,000
and do on some other computer, as well,

33
00:01:49,000 --> 00:01:52,000
and therefore, you can use any hosting provider

34
00:01:52,000 --> 00:01:54,000
that supports node JS.

35
00:01:54,000 --> 00:01:58,000
Just upload your project code, run npm install

36
00:01:58,000 --> 00:02:02,000
on that provider's machine, and then npm start,

37
00:02:02,000 --> 00:02:05,000
and then make sure that internally you forward port 3000

38
00:02:06,000 --> 00:02:09,000
to port 80 to the outside world.

39
00:02:09,000 --> 00:02:12,000
Now the exact steps for that will always differ

40
00:02:12,000 --> 00:02:15,000
based on which hosting provider you're using.

41
00:02:15,000 --> 00:02:19,000
Now, a very good hosting provider for Next.js

42
00:02:19,000 --> 00:02:21,000
is Vercel though.

43
00:02:21,000 --> 00:02:24,000
Vercel is a service of the same company

44
00:02:24,000 --> 00:02:27,000
that developed Next.js,

45
00:02:27,000 --> 00:02:31,000
and that's why Vercel is highly optimized

46
00:02:31,000 --> 00:02:35,000
for Next.js, and vice versa, I guess.

47
00:02:35,000 --> 00:02:37,000
So, you don't have to use Vercel.

48
00:02:37,000 --> 00:02:41,000
You can host Next.js on any node server, as I explained,

49
00:02:41,000 --> 00:02:45,000
but Vercel makes hosting Next.js applications

50
00:02:45,000 --> 00:02:48,000
very, very easy, especially when it comes

51
00:02:48,000 --> 00:02:51,000
to topics like scaling and so on.

52
00:02:51,000 --> 00:02:55,000
Though I will say, that there also are options like Netlify,

53
00:02:55,000 --> 00:02:59,000
which also have great Next.js support built-in,

54
00:02:59,000 --> 00:03:01,000
and which also make hosting

55
00:03:01,000 --> 00:03:05,000
and scaling Next.js applications simple.

56
00:03:05,000 --> 00:03:08,000
So definitely check out the docs of that.

57
00:03:08,000 --> 00:03:11,000
I will use Vercel as an example here though,

58
00:03:11,000 --> 00:03:14,000
also because we can get started for free

59
00:03:14,000 --> 00:03:17,000
and we don't even need a credit card.

60
00:03:17,000 --> 00:03:19,000
Now, definitely check out their pricing

61
00:03:19,000 --> 00:03:23,000
if you plan on using it for a real site.

62
00:03:23,000 --> 00:03:25,000
You can get started for free,

63
00:03:25,000 --> 00:03:28,000
but at some point it will cost you money,

64
00:03:28,000 --> 00:03:30,000
if you use certain features and so on,

65
00:03:30,000 --> 00:03:35,000
but here for our purposes, we can use the free option,

66
00:03:35,000 --> 00:03:38,000
and all we gotta do for that is sign up with them

67
00:03:38,000 --> 00:03:40,000
and create a new account, and for this here,

68
00:03:40,000 --> 00:03:44,000
we now need to sign up with GitHub, GitLab, or Bitbucket,

69
00:03:44,000 --> 00:03:47,000
and that makes sense because you will need one

70
00:03:47,000 --> 00:03:50,000
of these free options for deployment anyways.

71
00:03:50,000 --> 00:03:53,000
So therefore, before we continue here,

72
00:03:53,000 --> 00:03:54,000
let's first of all understand

73
00:03:54,000 --> 00:03:57,000
why we need one of those options.

74
00:03:57,000 --> 00:04:01,000
When deploying your Next application to Vercel,

75
00:04:01,000 --> 00:04:02,000
you deploy it such,

76
00:04:02,000 --> 00:04:07,000
that you push your code to a remote repository,

77
00:04:07,000 --> 00:04:09,000
on GitHub, GitLab, or Bitbucket,

78
00:04:09,000 --> 00:04:13,000
which are simply remote Git repository providers.

79
00:04:13,000 --> 00:04:17,000
GitHub, of course, is the most well-known one I would argue,

80
00:04:17,000 --> 00:04:21,000
and then once your code is on such a remote depository,

81
00:04:21,000 --> 00:04:24,000
you can easily connect it to your Vercel account

82
00:04:24,000 --> 00:04:27,000
and tell Vercel that whenever the code in

83
00:04:27,000 --> 00:04:30,000
that repository changes, you want to redeploy,

84
00:04:30,000 --> 00:04:34,000
and that makes redeploying super simple then

85
00:04:34,000 --> 00:04:36,000
because all you have to do is,

86
00:04:36,000 --> 00:04:41,000
you have to push your latest code to GitHub,

87
00:04:41,000 --> 00:04:43,000
and therefore, that is what we will do here.

88
00:04:43,000 --> 00:04:46,000
Now you need to have Git installed for this,

89
00:04:46,000 --> 00:04:49,000
which is a version control system,

90
00:04:49,000 --> 00:04:53,000
and you can get it for free from git-scm.com.

91
00:04:54,000 --> 00:04:55,000
You don't need to know anything

92
00:04:55,000 --> 00:04:57,000
about Git to follow along here.

93
00:04:57,000 --> 00:05:00,000
For the moment, it's enough to install it.

94
00:05:00,000 --> 00:05:02,000
If you want to learn more about Git though,

95
00:05:02,000 --> 00:05:05,000
we have a course on that, the Git and GitHub course,

96
00:05:05,000 --> 00:05:09,000
and we also got a free Git for Beginners Tutorial,

97
00:05:09,000 --> 00:05:10,000
which you can explore.

98
00:05:10,000 --> 00:05:12,000
So that might be worth a closer look

99
00:05:12,000 --> 00:05:14,000
if you want to learn more about Git,

100
00:05:14,000 --> 00:05:17,000
but here, just installing it and following along is enough.

101
00:05:18,000 --> 00:05:21,000
So once you installed Git on your system

102
00:05:21,000 --> 00:05:24,000
from that page by simply downloading it

103
00:05:24,000 --> 00:05:26,000
and walking through the installer,

104
00:05:26,000 --> 00:05:29,000
you should be able to use the Git command here

105
00:05:29,000 --> 00:05:30,000
in your terminal,

106
00:05:31,000 --> 00:05:34,000
and then as a first step, you want to run git init.

107
00:05:34,000 --> 00:05:36,000
I'm not going to run it here

108
00:05:36,000 --> 00:05:39,000
because I am already using Git in this project,

109
00:05:39,000 --> 00:05:41,000
but what git init will do,

110
00:05:41,000 --> 00:05:45,000
is it will basically just put this project

111
00:05:45,000 --> 00:05:46,000
under Gits control.

112
00:05:47,000 --> 00:05:51,000
Now, once you ran git init, you want to run git add dot,

113
00:05:51,000 --> 00:05:55,000
and git commit, some message,

114
00:05:55,000 --> 00:05:57,000
maybe a more meaningful message,

115
00:05:57,000 --> 00:06:01,000
describing what you changed since your last git commit,

116
00:06:01,000 --> 00:06:03,000
to create a code snapshot with Git.

117
00:06:05,000 --> 00:06:10,000
So here I'll say, prepared for deployment, like this.

118
00:06:10,000 --> 00:06:12,000
Now your output might differ here

119
00:06:12,000 --> 00:06:16,000
because I already did commit before,

120
00:06:16,000 --> 00:06:18,000
but if you're committing for the first time,

121
00:06:18,000 --> 00:06:21,000
you'll see some confirmation that it worked.

122
00:06:21,000 --> 00:06:24,000
Now, this simply saved all your code files

123
00:06:24,000 --> 00:06:28,000
in a Git snapshot, and you can have multiple snapshots,

124
00:06:28,000 --> 00:06:30,000
you can go back to an older one

125
00:06:30,000 --> 00:06:33,000
if you mess things up, and so on.

126
00:06:33,000 --> 00:06:35,000
By default, that will all happen

127
00:06:35,000 --> 00:06:37,000
in a branch named main.

128
00:06:37,000 --> 00:06:39,000
Here, I'm in a different branch

129
00:06:39,000 --> 00:06:40,000
because I have different projects

130
00:06:40,000 --> 00:06:43,000
for the different course sections,

131
00:06:43,000 --> 00:06:46,000
but I did now switch to the main branch as well,

132
00:06:46,000 --> 00:06:49,000
and therefore, I am in that branch at the moment.

133
00:06:49,000 --> 00:06:51,000
So now you are in the main branch.

134
00:06:51,000 --> 00:06:53,000
You can confirm this by running git branch,

135
00:06:53,000 --> 00:06:56,000
and you should see main selected.

136
00:06:56,000 --> 00:06:57,000
You are in the main branch

137
00:06:57,000 --> 00:07:01,000
and you did add such as code snapshot.

138
00:07:01,000 --> 00:07:04,000
That means your code is now saved with Git.

139
00:07:04,000 --> 00:07:07,000
As a next step, you need to create a GitHub account.

140
00:07:07,000 --> 00:07:10,000
You can do that for free by simply Googling for GitHub,

141
00:07:10,000 --> 00:07:13,000
going to github.com and sign up for GitHub.

142
00:07:13,000 --> 00:07:16,000
Again, you can do that for free.

143
00:07:16,000 --> 00:07:18,000
So let me quickly sign in with my account here,

144
00:07:19,000 --> 00:07:23,000
and once you did sign in, you can create a new repository.

145
00:07:23,000 --> 00:07:26,000
Now, here you can give this repository

146
00:07:26,000 --> 00:07:27,000
any name of your choice,

147
00:07:27,000 --> 00:07:32,000
and I'll go with nextjs-course, but the name is up to you.

148
00:07:32,000 --> 00:07:34,000
You can give it an optional description,

149
00:07:34,000 --> 00:07:38,000
and you can choose whether it should be public or private,

150
00:07:38,000 --> 00:07:42,000
both is possible, and here I'll go with private,

151
00:07:42,000 --> 00:07:45,000
and then click create repository.

152
00:07:45,000 --> 00:07:48,000
Now, no one, except for me will be able to see that.

153
00:07:49,000 --> 00:07:53,000
Now, we can grab that link here, which we see here,

154
00:07:53,000 --> 00:07:55,000
and go back to our project

155
00:07:55,000 --> 00:07:59,000
and now run git remote add origin,

156
00:08:00,000 --> 00:08:02,000
and then paste in that URL.

157
00:08:03,000 --> 00:08:07,000
This sets up a connection between your local Git repository,

158
00:08:07,000 --> 00:08:09,000
so between your local project,

159
00:08:09,000 --> 00:08:11,000
and that remote repository.

160
00:08:13,000 --> 00:08:18,000
Once you did that, you can run git push origin main,

161
00:08:19,000 --> 00:08:23,000
to push the main branch to that repository,

162
00:08:23,000 --> 00:08:25,000
and that's what we'll do now.

163
00:08:25,000 --> 00:08:27,000
Now, if you are getting a repository not found

164
00:08:27,000 --> 00:08:31,000
error message here, which you very well might,

165
00:08:31,000 --> 00:08:34,000
you need to include your log-in credentials

166
00:08:34,000 --> 00:08:36,000
into that remote URL.

167
00:08:36,000 --> 00:08:41,000
For this, we can remove that remote repository

168
00:08:41,000 --> 00:08:44,000
with git remote rm origin,

169
00:08:44,000 --> 00:08:46,000
and once you did that, run the add command again,

170
00:08:46,000 --> 00:08:48,000
but with a twist.

171
00:08:49,000 --> 00:08:53,000
Now you want to go to your GitHub account

172
00:08:54,000 --> 00:08:59,000
and there to settings, and there to developer settings,

173
00:09:01,000 --> 00:09:04,000
and here to personal access tokens.

174
00:09:04,000 --> 00:09:06,000
Click on generate new token there,

175
00:09:06,000 --> 00:09:11,000
and to add any note you want, like local development,

176
00:09:11,000 --> 00:09:14,000
and then make sure that under scopes here,

177
00:09:14,000 --> 00:09:19,000
you select repo, also adminrepo_hook and delete_repo,

178
00:09:23,000 --> 00:09:25,000
and then generate this token.

179
00:09:26,000 --> 00:09:29,000
Now that token will never be shown to you again

180
00:09:29,000 --> 00:09:32,000
but you can always generate a new one

181
00:09:32,000 --> 00:09:34,000
and you should therefore, now copy it,

182
00:09:34,000 --> 00:09:39,000
and now when you add your remote repository again,

183
00:09:39,000 --> 00:09:42,000
add a @ symbol in front of github.com,

184
00:09:42,000 --> 00:09:46,000
and then add your username here, in front of that.

185
00:09:46,000 --> 00:09:50,000
So your GitHub username, and I will do that real quick,

186
00:09:51,000 --> 00:09:56,000
and then try pushing again by running, git push origin main.

187
00:09:57,000 --> 00:10:00,000
Now, you should be prompted for your password

188
00:10:00,000 --> 00:10:04,000
and there you can use your GitHub password,

189
00:10:04,000 --> 00:10:06,000
though that method is deprecated

190
00:10:06,000 --> 00:10:08,000
and will stop to work in the future,

191
00:10:08,000 --> 00:10:12,000
and therefore instead, you should use your token,

192
00:10:14,000 --> 00:10:15,000
and once you did that,

193
00:10:15,000 --> 00:10:18,000
the code should be pushed successfully to GitHub,

194
00:10:18,000 --> 00:10:22,000
which means it's now uploaded to the remote repository,

195
00:10:22,000 --> 00:10:25,000
and if you revisit your repository,

196
00:10:25,000 --> 00:10:28,000
if you reload that repository page,

197
00:10:28,000 --> 00:10:29,000
you should see your code here,

198
00:10:31,000 --> 00:10:34,000
and now with that, we're ready to connect it to Vercel

199
00:10:34,000 --> 00:10:36,000
and deploy our application.

200
00:10:37,000 --> 00:10:39,000
For this, back here on Vercel,

201
00:10:39,000 --> 00:10:41,000
we now want to continue with GitHub here

202
00:10:41,000 --> 00:10:46,000
and sign up with GitHub, and give Vercel these permissions,

203
00:10:46,000 --> 00:10:50,000
and now here, we need to import a Git repository.

204
00:10:50,000 --> 00:10:51,000
So we need to connect Vercel

205
00:10:51,000 --> 00:10:54,000
to the repository that holds our code,

206
00:10:54,000 --> 00:10:57,000
and for this I'll click on that dropdown here,

207
00:10:57,000 --> 00:11:00,000
click on add GitHub Org or Account,

208
00:11:00,000 --> 00:11:03,000
and then I'm prompted to give Vercel access

209
00:11:03,000 --> 00:11:06,000
to the repository of my account here,

210
00:11:06,000 --> 00:11:09,000
and we can give it access to all repositories,

211
00:11:09,000 --> 00:11:13,000
or only the repositories we know we want to grant access.

212
00:11:13,000 --> 00:11:18,000
Like in this case, the nextjs-course repository,

213
00:11:18,000 --> 00:11:21,000
and I'll do that and click install,

214
00:11:21,000 --> 00:11:26,000
and now here, I can import that repository into Vercel.

215
00:11:26,000 --> 00:11:28,000
So that's what I'll do here,

216
00:11:28,000 --> 00:11:30,000
and I'll select my personal account here,

217
00:11:30,000 --> 00:11:33,000
so that I can use that free deployment option,

218
00:11:33,000 --> 00:11:35,000
and now we end up on this screen.

219
00:11:35,000 --> 00:11:39,000
Now, it detects that we have a Next.js application here,

220
00:11:39,000 --> 00:11:41,000
but we could also use Vercel

221
00:11:41,000 --> 00:11:43,000
for deploying other kinds of apps.

222
00:11:43,000 --> 00:11:46,000
It's very versatile, as you can tell,

223
00:11:46,000 --> 00:11:48,000
but of course we want to go with Next.js here.

224
00:11:49,000 --> 00:11:51,000
We can edit the root directory

225
00:11:51,000 --> 00:11:54,000
in case we would have our code in some nested directory,

226
00:11:54,000 --> 00:11:57,000
but we don't have that here.

227
00:11:57,000 --> 00:11:58,000
We can tweak some settings.

228
00:11:58,000 --> 00:12:01,000
For example, we can tell it that we want to build

229
00:12:01,000 --> 00:12:05,000
with npm run build, and we could change this,

230
00:12:05,000 --> 00:12:09,000
and I'll also stick to the default output directory,

231
00:12:09,000 --> 00:12:12,000
and we can override environment variables,

232
00:12:12,000 --> 00:12:13,000
and that is interesting,

233
00:12:13,000 --> 00:12:15,000
because that allows us

234
00:12:15,000 --> 00:12:18,000
to define production environment variables

235
00:12:18,000 --> 00:12:21,000
without using that config file for that.

236
00:12:21,000 --> 00:12:25,000
Now, here with our setup, we are already

237
00:12:25,000 --> 00:12:28,000
using different environment variables in production,

238
00:12:28,000 --> 00:12:31,000
so we don't need to add them here again,

239
00:12:31,000 --> 00:12:35,000
but, instead of having separate environment variables here

240
00:12:35,000 --> 00:12:38,000
for production, we could also inject

241
00:12:38,000 --> 00:12:43,000
our production values here in this Vercel console,

242
00:12:43,000 --> 00:12:45,000
but again, I will go with the setup I have

243
00:12:45,000 --> 00:12:49,000
in the config file, hence, I'll leave that empty

244
00:12:49,000 --> 00:12:50,000
and click on deploy,

245
00:12:50,000 --> 00:12:55,000
and now Vercel will build our application and then start it,

246
00:12:55,000 --> 00:12:58,000
and it will automatically build our pages

247
00:12:58,000 --> 00:13:00,000
and pre-rendered pages,

248
00:13:00,000 --> 00:13:03,000
it will host those on a CDN then,

249
00:13:03,000 --> 00:13:07,000
which is optimized for speed and has great caching settings,

250
00:13:07,000 --> 00:13:11,000
and it will then also, take our API routes

251
00:13:11,000 --> 00:13:14,000
and put those into serverless functions,

252
00:13:14,000 --> 00:13:18,000
which are executed on demand and scale infinitely

253
00:13:18,000 --> 00:13:21,000
in a cost effective way.

254
00:13:21,000 --> 00:13:23,000
So it's a great deployment option

255
00:13:23,000 --> 00:13:26,000
and we don't need to do anything else to make it work.

256
00:13:27,000 --> 00:13:30,000
So let's now wait for this deployment process

257
00:13:30,000 --> 00:13:32,000
to finish here.

258
00:13:32,000 --> 00:13:35,000
We see the same output as we did locally.

259
00:13:35,000 --> 00:13:37,000
Now it's basically wiring everything up

260
00:13:37,000 --> 00:13:41,000
with the Vercel's servers and machines,

261
00:13:42,000 --> 00:13:45,000
and looks like it's about to be done.

262
00:13:45,000 --> 00:13:47,000
Here we go, it's deployed,

263
00:13:47,000 --> 00:13:49,000
and now we can click Visit,

264
00:13:49,000 --> 00:13:54,000
and we see our application running in the web.

265
00:13:54,000 --> 00:13:57,000
As you see there, everything works

266
00:13:57,000 --> 00:14:00,000
just as it worked locally.

267
00:14:00,000 --> 00:14:04,000
So that is working and now it is hosted in the web.

268
00:14:04,000 --> 00:14:09,000
It's not hosted locally and we hosted it with Vercel.

269
00:14:09,000 --> 00:14:11,000
Now you can go to the dashboard here

270
00:14:11,000 --> 00:14:14,000
and then configure more things here.

271
00:14:14,000 --> 00:14:15,000
You can assign a custom domain.

272
00:14:15,000 --> 00:14:17,000
You can monitor it.

273
00:14:17,000 --> 00:14:21,000
You can dive into the logs, explore certain analytics,

274
00:14:21,000 --> 00:14:24,000
dive into the settings and configure it,

275
00:14:24,000 --> 00:14:26,000
and do things like that.

276
00:14:26,000 --> 00:14:28,000
Definitely, play around with those settings

277
00:14:28,000 --> 00:14:32,000
and those options, if you are using Vercel

278
00:14:32,000 --> 00:14:34,000
for your production ready app.

279
00:14:35,000 --> 00:14:36,000
Now, the great thing is,

280
00:14:36,000 --> 00:14:39,000
that if we now want to change something,

281
00:14:39,000 --> 00:14:41,000
let's say in our contact form,

282
00:14:41,000 --> 00:14:45,000
I want to change the text in the success notification.

283
00:14:45,000 --> 00:14:49,000
I want to add a couple of exclamation marks.

284
00:14:49,000 --> 00:14:51,000
Then we just make that change,

285
00:14:51,000 --> 00:14:53,000
We then create a new Git snapshot

286
00:14:53,000 --> 00:14:55,000
with git add and git commit,

287
00:14:55,000 --> 00:14:58,000
changed notification message,

288
00:14:58,000 --> 00:15:00,000
sounds like a good note here,

289
00:15:01,000 --> 00:15:05,000
and then we push again by pushing main to origin,

290
00:15:05,000 --> 00:15:08,000
and when we do that,

291
00:15:08,000 --> 00:15:10,000
when we make that push,

292
00:15:10,000 --> 00:15:15,000
Vercel will automatically recognize that.

293
00:15:15,000 --> 00:15:17,000
It automatically recognizes this

294
00:15:17,000 --> 00:15:20,000
and starts building again, as you can see here.

295
00:15:20,000 --> 00:15:23,000
So it recognizes, pushes to main,

296
00:15:23,000 --> 00:15:26,000
because that is the connected main branch here,

297
00:15:26,000 --> 00:15:28,000
and whenever the code in that branch changes,

298
00:15:28,000 --> 00:15:32,000
it will rebuild and redeploy our application,

299
00:15:32,000 --> 00:15:34,000
which is of course pretty amazing

300
00:15:34,000 --> 00:15:36,000
and makes redeploying a breeze.

301
00:15:36,000 --> 00:15:41,000
So, let's wait for that rebuilding here to finish.

302
00:15:41,000 --> 00:15:43,000
Here we go, looks like it's done,

303
00:15:43,000 --> 00:15:45,000
and then visit the updated page,

304
00:15:45,000 --> 00:15:49,000
which is of course served on the same domain,

305
00:15:49,000 --> 00:15:51,000
and now here, if we give this a try

306
00:15:51,000 --> 00:15:55,000
to see if everything works, does that work?

307
00:15:55,000 --> 00:15:59,000
If I send a message, I get an error,

308
00:15:59,000 --> 00:16:02,000
could not connect to database.

309
00:16:02,000 --> 00:16:04,000
And why are we getting this error?

310
00:16:04,000 --> 00:16:06,000
Well, you could think that it's a problem

311
00:16:06,000 --> 00:16:10,000
with our environment variables, but that's not the case.

312
00:16:10,000 --> 00:16:13,000
We did set those in our config folder

313
00:16:13,000 --> 00:16:16,000
in our config file,

314
00:16:16,000 --> 00:16:19,000
but keep in mind that we're using MongoDB Atlas,

315
00:16:19,000 --> 00:16:22,000
and here we need to control who's able to connect.

316
00:16:22,000 --> 00:16:25,000
We do this under network access,

317
00:16:25,000 --> 00:16:29,000
and we added our local IP address, but now it was deployed,

318
00:16:29,000 --> 00:16:33,000
and now to ensure that this deployed application,

319
00:16:33,000 --> 00:16:35,000
which is running on some remote server,

320
00:16:35,000 --> 00:16:38,000
that this can connect to MongoDB Atlas,

321
00:16:38,000 --> 00:16:40,000
we need to add another IP address,

322
00:16:40,000 --> 00:16:43,000
and if we know the IP off the server, we could add that,

323
00:16:43,000 --> 00:16:45,000
but since we don't know it,

324
00:16:45,000 --> 00:16:47,000
we want to allow access from anywhere.

325
00:16:47,000 --> 00:16:50,000
We still have the password username protection in place,

326
00:16:50,000 --> 00:16:53,000
but we need to enable all IPs to connect

327
00:16:53,000 --> 00:16:58,000
to ensure that our deployed application also can connect.

328
00:16:58,000 --> 00:17:00,000
Otherwise, all these environment variables

329
00:17:00,000 --> 00:17:03,000
don't do anything if we block the connection

330
00:17:03,000 --> 00:17:05,000
from MongoDB's side.

331
00:17:06,000 --> 00:17:08,000
So let's wait for this update

332
00:17:08,000 --> 00:17:12,000
to be in effect here on MongoDB Atlas,

333
00:17:12,000 --> 00:17:17,000
so that all hosts can connect to this database,

334
00:17:17,000 --> 00:17:20,000
and once this is done, let's try sending this message again,

335
00:17:20,000 --> 00:17:21,000
and now we have a success

336
00:17:21,000 --> 00:17:23,000
and we see all the exclamation marks.

337
00:17:23,000 --> 00:17:25,000
So now that works,

338
00:17:25,000 --> 00:17:29,000
and that's how we can deploy our Next application

339
00:17:29,000 --> 00:17:34,000
with npm run build with that server-side code with Vercel.

340
00:17:34,000 --> 00:17:36,000
It's not the only option, but as you saw,

341
00:17:36,000 --> 00:17:38,000
it's very, very easy to use it.