1
00:00:03,000 --> 00:00:07,036
Next.js is developed by a company called Vercel,

2
00:00:07,036 --> 00:00:09,253
that also provides a platform where

3
00:00:09,253 --> 00:00:11,216
you can host your applications.

4
00:00:11,279 --> 00:00:14,162
You don't have to use Vercel of course,

5
00:00:14,162 --> 00:00:16,256
Next.js is open source,

6
00:00:16,256 --> 00:00:18,725
and you can run it on your own servers,

7
00:00:18,725 --> 00:00:21,103
or on other platforms if you wish.

8
00:00:21,103 --> 00:00:23,597
But Vercel is simple to use

9
00:00:23,597 --> 00:00:25,721
and has some great features.

10
00:00:25,721 --> 00:00:29,461
It's free for personal or non-commercial projects,

11
00:00:29,461 --> 00:00:31,978
or you can pay a monthly subscription

12
00:00:31,978 --> 00:00:33,746
for more serious projects.

13
00:00:33,815 --> 00:00:37,286
Take a look at the Pricing page for more details.

14
00:00:37,286 --> 00:00:40,610
If you sign up, you'll then see this dashboard,

15
00:00:40,610 --> 00:00:43,384
from where we can "Create a New Project".

16
00:00:43,384 --> 00:00:46,486
Now, for this we need a Git repository.

17
00:00:46,486 --> 00:00:48,828
And I already have one on Github

18
00:00:48,828 --> 00:00:50,658
for the next-reviews app,

19
00:00:50,732 --> 00:00:52,435
so this is what I'll use.

20
00:00:52,435 --> 00:00:56,786
For your own applications, you can connect with either Github,

21
00:00:56,786 --> 00:00:58,259
Gitlab, or BitBucket.

22
00:00:58,329 --> 00:01:01,003
Anyway, let's go and create a new project.

23
00:01:01,003 --> 00:01:02,847
The first time we'll need to

24
00:01:02,847 --> 00:01:04,623
connect our Github Account,

25
00:01:04,690 --> 00:01:06,973
and this will prompt us to install

26
00:01:06,973 --> 00:01:08,451
the Vercel integration

27
00:01:08,518 --> 00:01:10,338
into that Github account.

28
00:01:10,858 --> 00:01:14,571
We need to give Vercel access to our repositories,

29
00:01:14,571 --> 00:01:17,491
either all of them, or only selected ones.

30
00:01:17,571 --> 00:01:20,926
I will select only the "next-reviews" project,

31
00:01:20,926 --> 00:01:23,074
since that's what I want to deploy.

32
00:01:23,074 --> 00:01:25,514
Vercel needs access our code so

33
00:01:25,514 --> 00:01:27,560
that it can build our app.

34
00:01:27,639 --> 00:01:30,537
So let's install this Github application.

35
00:01:30,537 --> 00:01:33,526
I can now select my account from this list,

36
00:01:33,526 --> 00:01:37,434
and import the "next-reviews" project from Github.

37
00:01:37,434 --> 00:01:40,163
Here we can configure a few settings.

38
00:01:40,163 --> 00:01:42,421
Note that Vercel supports many

39
00:01:42,421 --> 00:01:44,001
different frameworks,

40
00:01:44,077 --> 00:01:45,913
not just Next.js,

41
00:01:45,913 --> 00:01:47,742
but it automatically detected

42
00:01:47,742 --> 00:01:49,129
which one we're using.

43
00:01:49,192 --> 00:01:52,150
We can also define Environment Variables,

44
00:01:52,150 --> 00:01:54,598
which can be useful to set database

45
00:01:54,598 --> 00:01:56,765
connection details for example.

46
00:01:56,835 --> 00:01:59,563
But we don't need any variables at the moment.

47
00:01:59,563 --> 00:02:01,453
So let's click "Deploy".

48
00:02:03,343 --> 00:02:04,958
It will take a minute or so

49
00:02:04,958 --> 00:02:06,394
to set up a new project.

50
00:02:09,103 --> 00:02:11,103
Ok, the build completed.

51
00:02:11,183 --> 00:02:14,893
And congratulations! Our project is now deployed.

52
00:02:15,243 --> 00:02:17,418
Let's continue to the dashboard.

53
00:02:18,063 --> 00:02:21,096
Here we can see more details about our project.

54
00:02:21,096 --> 00:02:23,720
It was automatically assigned

55
00:02:23,720 --> 00:02:25,981
a "vercel.app" subdomain.

56
00:02:26,072 --> 00:02:27,682
And if we open this URL,

57
00:02:28,892 --> 00:02:31,857
here's our website, deployed to production.

58
00:02:31,857 --> 00:02:33,747
Let's quickly check that all

59
00:02:33,747 --> 00:02:35,232
the pages are working.

60
00:02:35,299 --> 00:02:36,771
It looks fine.

61
00:02:37,239 --> 00:02:41,044
So our Reviews app is now visible to the public.

62
00:02:41,044 --> 00:02:43,007
And with a secure connection,

63
00:02:43,007 --> 00:02:45,289
because Vercel also provisioned

64
00:02:45,289 --> 00:02:46,835
a certificate for us.

65
00:02:46,909 --> 00:02:49,383
Now, for a real world application

66
00:02:49,383 --> 00:02:51,508
we'd probably want to configure

67
00:02:51,508 --> 00:02:52,948
a custom domain name,

68
00:02:53,016 --> 00:02:55,313
but for this example I'll just

69
00:02:55,313 --> 00:02:57,303
use the autogenerated one.

70
00:02:57,380 --> 00:03:00,696
Now, the best feature of the Vercel platform

71
00:03:00,696 --> 00:03:04,625
is that it does automated deployments by default.

72
00:03:04,625 --> 00:03:06,792
This means that, whenever we push

73
00:03:06,792 --> 00:03:08,960
any changes to our Git repository

74
00:03:09,025 --> 00:03:12,028
Vercel will automatically build and deploy

75
00:03:12,028 --> 00:03:14,102
a new version of our website.

76
00:03:14,174 --> 00:03:16,687
You can see that our first deployment

77
00:03:16,687 --> 00:03:19,480
was generated from the "main" branch

78
00:03:19,480 --> 00:03:21,876
at a specific Git commit.

79
00:03:21,876 --> 00:03:25,046
Let's see what happens if we modify our project.

80
00:03:25,046 --> 00:03:27,829
For example, we could simply change

81
00:03:27,829 --> 00:03:29,975
the footer in "layout.jsx".

82
00:03:30,054 --> 00:03:32,149
I'll edit this file directly here,

83
00:03:32,149 --> 00:03:33,751
just because it's quicker,

84
00:03:33,813 --> 00:03:36,138
but normally you'll want to test

85
00:03:36,138 --> 00:03:38,027
the changes locally first.

86
00:03:38,099 --> 00:03:41,059
Anyway, let's add some text to the footer,

87
00:03:41,059 --> 00:03:43,388
saying "Deployed on Vercel".

88
00:03:44,119 --> 00:03:46,018
We can now commit the changes

89
00:03:46,018 --> 00:03:47,589
straight from this page.

90
00:03:47,655 --> 00:03:50,995
Let me write "Deployed on Vercel" as the message,

91
00:03:51,415 --> 00:03:53,212
and let's commit this change

92
00:03:53,212 --> 00:03:55,009
directly to the main branch.

93
00:03:55,073 --> 00:03:57,240
If we go back to the project page,

94
00:03:57,833 --> 00:03:59,268
and look at the commits,

95
00:03:59,773 --> 00:04:01,721
note that there's a circle

96
00:04:01,721 --> 00:04:03,668
next to the latest commit.

97
00:04:03,743 --> 00:04:06,742
It's amber, meaning there's an action in progress.

98
00:04:06,742 --> 00:04:09,636
The previous commit shows a green tick,

99
00:04:09,636 --> 00:04:12,124
meaning that it was built successfully.

100
00:04:12,124 --> 00:04:13,768
In fact, if we go and look

101
00:04:13,768 --> 00:04:15,411
at the Vercel deployments,

102
00:04:15,475 --> 00:04:18,011
you can see that there's a new one building,

103
00:04:18,011 --> 00:04:20,934
and it was triggered by our latest commit.

104
00:04:20,934 --> 00:04:23,329
So Vercel is automatically building

105
00:04:23,329 --> 00:04:25,587
a new version of our application,

106
00:04:25,655 --> 00:04:27,877
to include the latest change.

107
00:04:28,215 --> 00:04:29,541
It's now ready.

108
00:04:29,541 --> 00:04:31,808
Which means that, if we go to our public website,

109
00:04:31,808 --> 00:04:33,262
and reload the page,

110
00:04:33,888 --> 00:04:37,206
it now shows "Deployed on Vercel" in the footer.

111
00:04:37,206 --> 00:04:40,725
Our change is already visible to all our users.

112
00:04:40,725 --> 00:04:44,243
All we need to do is push our code to Github,

113
00:04:44,243 --> 00:04:46,272
and Vercel will automatically

114
00:04:46,272 --> 00:04:48,091
deploy the latest version.

115
00:04:48,161 --> 00:04:50,741
Not only that, but if there's a problem

116
00:04:50,741 --> 00:04:52,527
with the latest deployment,

117
00:04:52,593 --> 00:04:54,878
we can perform a rollback simply

118
00:04:54,878 --> 00:04:56,519
by pushing this button.

119
00:04:56,591 --> 00:04:59,704
Also, in addition to production deployments,

120
00:04:59,704 --> 00:05:03,123
we can automatically deploy other Git branches.

121
00:05:03,123 --> 00:05:05,064
This way we can test changes

122
00:05:05,064 --> 00:05:06,867
in a separate environment,

123
00:05:06,936 --> 00:05:09,123
before merging them and deploying

124
00:05:09,123 --> 00:05:10,381
them to production.

125
00:05:10,448 --> 00:05:12,997
So, Vercel is a powerful platform

126
00:05:12,997 --> 00:05:15,084
for continuous deployments,

127
00:05:15,161 --> 00:05:17,766
and I definitely recommend giving it a try.