1
00:00:03,000 --> 00:00:05,814
Let's see how to deploy our Next.js app

2
00:00:05,814 --> 00:00:07,474
to the Vercel platform.

3
00:00:08,047 --> 00:00:11,493
Vercel is a so-called serverless solution,

4
00:00:11,493 --> 00:00:12,477
meaning that

5
00:00:13,059 --> 00:00:15,532
we don't need to think in terms of

6
00:00:15,532 --> 00:00:19,022
how many servers we need to run our application,

7
00:00:19,022 --> 00:00:21,348
what kind of servers, and so on.

8
00:00:21,348 --> 00:00:23,239
We just deploy our project

9
00:00:23,239 --> 00:00:26,874
and the platform manages everything automatically.

10
00:00:26,874 --> 00:00:29,564
Vercel is free for personal projects,

11
00:00:29,564 --> 00:00:32,253
or you can pay a monthly subscription

12
00:00:32,253 --> 00:00:33,854
if you work on a team.

13
00:00:33,854 --> 00:00:37,126
You can find the details in the Pricing page.

14
00:00:38,207 --> 00:00:41,101
But like I said, you can use the free plan

15
00:00:41,101 --> 00:00:42,135
to get started,

16
00:00:42,135 --> 00:00:44,202
and the easiest way to sign in

17
00:00:44,202 --> 00:00:47,027
is to connect it with our GitHub account,

18
00:00:47,733 --> 00:00:49,982
or another Git provider if you like,

19
00:00:49,982 --> 00:00:51,231
but I'll use GitHub.

20
00:00:52,099 --> 00:00:54,853
Once you log in you'll see a dashboard page,

21
00:00:54,853 --> 00:00:57,670
and I already have a couple of projects here,

22
00:00:58,232 --> 00:01:00,388
but we want to create a new project

23
00:01:00,388 --> 00:01:01,682
for our Blog website.

24
00:01:02,243 --> 00:01:04,784
Now, the way Vercel works is that

25
00:01:04,784 --> 00:01:07,324
we want to let it import our code

26
00:01:07,324 --> 00:01:09,711
directly from a Git repository.

27
00:01:10,364 --> 00:01:12,677
So Vercel will fetch our project

28
00:01:12,677 --> 00:01:14,701
and deploy it automatically.

29
00:01:14,701 --> 00:01:17,230
The beauty of this approach is that

30
00:01:17,230 --> 00:01:19,832
whenever we push some updates to Git

31
00:01:19,832 --> 00:01:23,156
Vercel will automatically deploy a new version

32
00:01:23,156 --> 00:01:24,891
with the latest changes.

33
00:01:24,891 --> 00:01:26,264
So we basically get

34
00:01:26,264 --> 00:01:28,794
a "Continuous Deployment" pipeline.

35
00:01:29,799 --> 00:01:31,457
But this does mean that

36
00:01:31,457 --> 00:01:34,340
we first need to use Git in our project.

37
00:01:34,912 --> 00:01:37,051
Now, in our "next-blog" folder

38
00:01:37,051 --> 00:01:39,688
I already created a local repository.

39
00:01:40,259 --> 00:01:43,462
If you have not been using Git in your project

40
00:01:43,462 --> 00:01:46,664
you can initalise a repository with "git init"

41
00:01:46,664 --> 00:01:48,543
and then do a "git commit".

42
00:01:49,182 --> 00:01:52,227
But having a local repository is not enough,

43
00:01:52,227 --> 00:01:54,649
to import it into Vercel we need to

44
00:01:54,649 --> 00:01:56,033
share the repository

45
00:01:56,671 --> 00:01:58,414
on a provider such as GitHub,

46
00:01:58,414 --> 00:02:00,756
which is in fact what I'm going to use.

47
00:02:01,316 --> 00:02:02,692
So what we want to do

48
00:02:02,692 --> 00:02:04,396
is create a new repository

49
00:02:05,916 --> 00:02:07,922
for our "next-blog" project.

50
00:02:08,423 --> 00:02:10,645
We can make this repository "Private",

51
00:02:11,145 --> 00:02:13,285
and then go ahead and create it.

52
00:02:14,245 --> 00:02:16,522
Here we get some instructions on

53
00:02:16,522 --> 00:02:18,015
how to set things up.

54
00:02:18,015 --> 00:02:21,216
The first block shows you what you need to do

55
00:02:21,216 --> 00:02:24,559
to initialise a new local Git repository first.

56
00:02:25,272 --> 00:02:27,225
But I have an existing repository

57
00:02:27,225 --> 00:02:29,058
so I'm going to copy this line,

58
00:02:29,617 --> 00:02:32,058
and then go and run this command in my terminal.

59
00:02:33,617 --> 00:02:36,276
This configures my local repository

60
00:02:36,276 --> 00:02:38,555
to use GitHub as the "remote".

61
00:02:39,130 --> 00:02:41,404
Next we need to "push" our code,

62
00:02:41,904 --> 00:02:44,077
so run this "git push" command.

63
00:02:44,577 --> 00:02:46,600
And this will upload our project

64
00:02:46,600 --> 00:02:47,991
to the GitHub servers.

65
00:02:49,143 --> 00:02:52,086
Note that you'll need an SSH key configured

66
00:02:52,086 --> 00:02:54,824
in your GitHub account for this to work.

67
00:02:55,392 --> 00:02:57,322
But once we've done a "git push"

68
00:02:57,322 --> 00:02:59,311
we should see our code in GitHub,

69
00:03:00,658 --> 00:03:02,016
You can see that we have

70
00:03:02,016 --> 00:03:03,713
all our files and folders now.

71
00:03:04,269 --> 00:03:07,271
So at this point we can go back to Vercel

72
00:03:07,271 --> 00:03:09,761
and import that GitHub repository.

73
00:03:09,761 --> 00:03:12,763
"next-blog" is the last one in this list.

74
00:03:12,763 --> 00:03:15,472
If you don't see your repository here

75
00:03:15,472 --> 00:03:18,986
you probably need to configure some permissions,

76
00:03:18,986 --> 00:03:21,622
something you can do by clicking the

77
00:03:21,622 --> 00:03:25,356
"Adjust GitHub App Permissions" link at the bottom.

78
00:03:26,295 --> 00:03:29,371
Anyway, let's import our "next-blog" project.

79
00:03:29,871 --> 00:03:32,709
On this page we can configure a few things,

80
00:03:32,709 --> 00:03:35,019
like if we want to "Create a Team".

81
00:03:35,585 --> 00:03:37,693
But I'm going to "Skip" that step,

82
00:03:37,693 --> 00:03:40,172
because this project is a personal blog,

83
00:03:40,733 --> 00:03:44,043
so I don't need other developers to access it.

84
00:03:44,543 --> 00:03:47,185
Here we can configure the project name,

85
00:03:47,185 --> 00:03:49,556
which framework it uses, and so on.

86
00:03:50,123 --> 00:03:53,000
By the way, note that Vercel supports

87
00:03:53,000 --> 00:03:56,964
not just Next.js but many other frameworks as well.

88
00:03:57,541 --> 00:04:00,884
But Next.js is what we want in this case of course.

89
00:04:01,384 --> 00:04:03,533
We can leave these options as the are

90
00:04:03,533 --> 00:04:04,636
and click "Deploy".

91
00:04:05,917 --> 00:04:07,990
This will fetch our source code,

92
00:04:09,050 --> 00:04:11,524
then build our project and deploy it.

93
00:04:13,383 --> 00:04:15,040
And now it's party time!

94
00:04:15,040 --> 00:04:18,629
In just a few seconds our website has been deployed.

95
00:04:19,197 --> 00:04:20,495
If we go to the Dashboard

96
00:04:20,495 --> 00:04:22,155
we should see some more details.

97
00:04:23,831 --> 00:04:25,661
Vercel automatically created

98
00:04:25,661 --> 00:04:27,556
some domains for our website.

99
00:04:27,556 --> 00:04:29,909
And you can also configure it to use

100
00:04:29,909 --> 00:04:32,392
your own custom domain if you want to.

101
00:04:33,088 --> 00:04:35,515
But for this example let's just use

102
00:04:35,515 --> 00:04:37,733
this auto-generated domain name,

103
00:04:38,302 --> 00:04:40,592
hosted under "vercel.app".

104
00:04:41,092 --> 00:04:42,892
So here's our Blog website,

105
00:04:42,892 --> 00:04:44,759
available on a public domain

106
00:04:44,759 --> 00:04:47,025
where it can be viewed by anybody.

107
00:04:47,658 --> 00:04:49,363
Let's quickly check if it's all working.

108
00:04:49,863 --> 00:04:51,091
We could actually remove

109
00:04:51,091 --> 00:04:53,188
some of those log messages in production.

110
00:04:53,739 --> 00:04:56,363
But let's see if we can open a blog post.

111
00:04:56,363 --> 00:04:57,387
This works fine.

112
00:04:57,950 --> 00:04:59,495
Let's try the About page.

113
00:04:59,495 --> 00:05:02,337
Of course we could write some content in here,

114
00:05:02,898 --> 00:05:04,022
but that's fine.

115
00:05:04,022 --> 00:05:05,638
Let's try another post.

116
00:05:06,208 --> 00:05:09,351
And maybe try the "Dark Mode" functionality as well.

117
00:05:09,851 --> 00:05:12,375
Everything is working just like we expected.

118
00:05:12,917 --> 00:05:15,107
So that's it. Our blog website

119
00:05:15,107 --> 00:05:17,224
is now visible to the public,

120
00:05:17,796 --> 00:05:20,322
and hosted on the Vercel platform.

121
00:05:20,322 --> 00:05:22,921
If we make any changes to the code,

122
00:05:22,921 --> 00:05:25,447
we just need to push those changes

123
00:05:25,447 --> 00:05:27,749
to the "main" branch on GitHub,

124
00:05:27,749 --> 00:05:29,457
and Vercel will rebuild

125
00:05:29,457 --> 00:05:32,206
and update our website automatically.

126
00:05:32,206 --> 00:05:35,399
As you can see, it's pretty easy to set up,

127
00:05:35,399 --> 00:05:36,885
and very convenient.

128
00:05:36,885 --> 00:05:39,782
So I really recommend trying out Vercel

129
00:05:39,782 --> 00:05:42,455
for deploying your Next.js projects,

130
00:05:42,455 --> 00:05:46,095
before looking for other, more complex solutions.