How To Deploy a NextJS App To Vercel (EASY AND QUICK!!!)
How To Deploy a NextJS App To Vercel (EASY AND QUICK!!!)
In this video I will be showing how to deploy a NextJS App to Vercel.
Link: https://vercel.com/dashboard
Join our Discord: https://discord.gg/WE92Cqs6Vk
š Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-prā¦
š GraphQL Course: https://codedamn.com/learn/graphql-foā¦
Social
ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬
Website: machadopedro.com
Linkedin: https://www.linkedin.com/in/machadop1ā¦
Instagram: https://www.instagram.com/pedro.fmachā¦
Github: https://github.com/machadop1407
Business Email: [email protected]
š Gear / Hardware I Use and Recommend š
ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬ā¬
š» https://amzn.to/42kqFuM š» Monitor
š±ļøhttps://amzn.to/3C0ZhHb š±ļø Mouse
š· https://amzn.to/3OHJvbM š· My Camera
š¤ https://amzn.to/3oxSthj š¤ My Microphone
āØļø https://amzn.to/3oFPpj1 āØļø My Microphone
ā” https://amzn.to/3MYMnzM ā” LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#nextjs #vercel
Content
0 -> Hey, guys. How's it going?
1.016 -> I'm back here with another video,
2.55 -> and today I decided to bring this video
where I'm going to be really quickly
6.333 -> showing you guys how to deploy our next
JS application onto the Vercel platform.
11.533 -> Now, the reason why I want to make
this video is because a lot of
13.783 -> you guys have been asking me
how to do this specifically.
16.8 -> And it's a really quick process, as
you can see by the length of this video.
19.933 -> I know a lot of you guys will end up
finding yourself in this situation,
23.583 -> especially with the release of next 13.
26.066 -> so that's why I wanted to make the video.
28.266 -> before we get into the video recently,
you guys have been commenting a lot
31.033 -> about the lights
that I have in the back of my video.
32.95 -> This two ones over here.
34.55 -> I've received comments about it
for a while now, but I don't know why.
36.866 -> Recently,
a lot of you guys have been wondering.
39.6 -> I'm going to put a link for the Amazon
page to buy this in the description.
43.283 -> If you're one of those people
who are interested
44.933 -> in looking at it together
with like all the gear
47.416 -> that I use in my videos,
I'm not sponsored by any of them.
50.55 -> I'm just putting out
because that's what I use.
53.666 -> And yeah, that's, that's basically it.
55.683 -> So with that
in mind, let's get into the video.
68.8 -> Okay, everyone.
69.516 -> So this
is how we're going to deploy our app.
72.75 -> So I have over here a very simple app.
75.333 -> I can even open it up over here
on my local host.
78.3 -> It's actually not a real website.
79.833 -> I used part of this code for a video
82.95 -> and it's like practically broken.
85.916 -> But to be honest, I don't really care.
88.2 -> It's just for the purposes of the video.
89.7 -> It's a normal next year 13 application.
92.516 -> Here we have some beautiful
UI that I just copied online.
96.066 -> To me the home page for some reason,
but then the here it's making like
99.683 -> an API request and getting some data,
but you can see it is indeed.
104.316 -> Next up, if I open this up over here,
you'll see that we have some next year
109.466 -> code and it was completely built
by using create next app.
113.733 -> So how are we going to deploy this?
115.7 -> now the first thing we need is to have
a GitHub because whatever so does is
120.216 -> they actually use your actual repositories
to be able to deploy it.
125.1 -> So what I want to do is
126.416 -> I want to create a new repository
over here into our in our GitHub account.
130.566 -> We're going to call it something like
133.716 -> next 13
136.916 -> deploy.
139.233 -> Okay. Next 13 deploy is available.
141.266 -> So I'm going to choose public
and then that's fine.
146.35 -> Only create repository.
148.35 -> Now you can see this is how it's it's,
it appears when you create a repository.
153.15 -> I'm going to copy this command over here.
156.15 -> All of this one's over here.
158.05 -> Just come and see
that I'm coming to Visual Studio Code.
161.4 -> I'll open up this. I'll run.
163.483 -> Get in it.
165.333 -> Then I'm going to run. Git.
167.133 -> And don't to add my files.
170.5 -> And then finally, just paste all of this.
172.233 -> It will commit
and push my code to our GitHub repository.
176.433 -> Open this up over here and refresh.
177.7 -> You'll see that our code should be here.
180.15 -> Now, this is kind of expected
that you kind of
181.833 -> have some sort of knowledge
in regards to GitHub,
185.166 -> but I still wanted to show real quick
just so you guys would know what you do.
188.85 -> Now the thing is we just deployed
our next app, but just the code to GitHub.
195.1 -> What we need to do now is
we need to come to Verso now in verse.
198.333 -> So if you just enter verso com and create
202.266 -> your account, you would do that
by signing in and logging into an account.
206.5 -> It's really quick, really simple.
207.616 -> I'm not going to show it
because I already have an account
209.4 -> and I assume all of you guys know
how to create an account on a website.
213.75 -> It is free, by the way.
215.283 -> You just create your account
216.216 -> and you'll see yourself in this page
called Dashboard, right?
219.216 -> The virtual dot com slash dashboard.
221.7 -> Then I'm going to click Add New
and I'm going to choose and new project.
225.416 -> When you click on that, you'll see that it
will ask us to import from a repository.
229.5 -> If you don't see it like this
231.066 -> is because you didn't
actually connect your GitHub account with
236.65 -> with Verso.
238 -> So when usually you create
a virtual account, you can do so
241.116 -> by using a bunch of different providers,
including GitHub.
244.266 -> But if you used any provider
other than GitHub,
246.516 -> you still need to connect
your GitHub account to here.
249.116 -> Now how do you add your GitHub account?
250.766 -> Well, you click on ADD account
and you will open this up.
253.9 -> Then you'll see that I have already added.
256.8 -> So that's why this page appears.
258.816 -> However, if it is in your case
and you haven't,
261.116 -> you should see a login page
and an authorization page asking you
264.7 -> to install all the necessary
plug Institute
267.116 -> to Verso in order to allow them
to have access to your GitHub account.
271 -> And that will be completely safe,
by the way, in case you're scared of that.
274.016 -> Now, the good thing about this
275.25 -> is they have access
to all of your repositories
277.116 -> and you can deploy any of them
really quickly,
279.216 -> including the one that I deployed
to GitHub one minute ago,
281.966 -> as you can see over here.
283.166 -> And it even shows that it is a next
Yes app.
285.85 -> So what we want to do is
I want to click on import.
288.6 -> Now we need to give it a project name
291.1 -> and you have to recognize that
depending on what you put over here,
295.533 -> your project will look
a little bit different.
297.416 -> I'm still going to call it next 13 deploy.
299.916 -> It's going to ask us for what is the
framework I'm going to choose next.
302.733 -> Yes, the root directory.
305.2 -> Same thing.
306.966 -> There's a bunch of build
and output settings
310.2 -> that are different depending
on what project you're actually deploying.
314.2 -> But for us, this since first
so specifically
317.016 -> is very, very connected to the next
jazz, right?
320.016 -> Verso is the company that makes next year.
321.85 -> They already have all of this
pre-made for you
323.366 -> so you don't have to even do anything.
325.166 -> The only important thing you have to do
is in case you have environment variables,
328.116 -> you add them over here because obviously
the environment variables won't be present
332.166 -> only by just using the
334.75 -> a file that you have in your code.
337.083 -> So we don't have any of them.
338.733 -> I'm going to click deploy and you guys
should see that it is as easy as that.
343.166 -> You'll see that
a whole deployment process has started.
349.15 -> It is.
349.6 -> It shows you the pipeline
and shows that it's building.
351.9 -> It shows all the commands
and everything that is running.
355.15 -> And I'll be back in a second
when this is pretty much done.
357.55 -> Now, if you guys see it hasn't
actually deployed because I purposefully
362.216 -> put a mistake in one of my pages
just to show you guys this case I've done.
366.883 -> I do this every time I show
368.15 -> deployment videos just because I know
it will not always go perfect for ever.
372.433 -> For most people, actually, deployment
is usually not a smooth process.
375.6 -> So I wanted to show specifically
377.216 -> this for you guys
so you can see my next step is running.
381.15 -> Did perfectly. It is working right.
383.133 -> But there's one specific page
that has something broken in it.
386.733 -> The page is this one over here.
388.583 -> If you go to source,
go to contact this page.
390.95 -> Over here it is give is given as an error.
394.133 -> In this case, it is actually
a typescript error, but it is important.
398.9 -> It's an error nonetheless.
400.266 -> So what I want to do is
I want to just quickly fix this error.
403.083 -> And the way I found this error
404.583 -> was because during the deployment process
for next year, if you run into any
408.333 -> errors, you can just look over here
to see exactly where it failed to compile.
412.333 -> In this case,
413.05 -> it gave us the exact location
to where we failed
415.65 -> and the exact error message
that we received.
418.35 -> Now, to fix whatever I had over here, it's
actually really simple
421.933 -> because all we need to do is
424.266 -> just a quick
424.783 -> fix would be to give a type
of any two to this thing.
427.866 -> and now all we have to do is just
send our code again to our repository.
432.516 -> So I'll just say fixed stuff.
434.766 -> I'll commit and then I'll push.
437.183 -> Now that we finished pushing the code,
we have to go back
440.383 -> to our overview page
over here in our Verso dashboard.
443.833 -> We'll see that we have our project
that we tried deploying over here.
447.383 -> Next 13 deploy, we'll click on it
and you'll see that it has an error rate
451.166 -> because there was an error,
452.866 -> but you can see that our commit message
so our changes are actually over here,
456.583 -> meaning that we should now
be able to redeploy this.
459.566 -> Well, how do we actually redeploy this?
461.65 -> Well, we can click on build logs
and just click on redeploy.
464.933 -> and now it will ask us
to redeploy to production
468.333 -> and it will ask us to use existing
build cache.
470.466 -> I'm not going to click on that
and then going to click on redeploy
473.016 -> and you'll see that
now it will start queuing again.
476.683 -> It will start the process.
478.716 -> You can see the pipeline
every year running.
480.4 -> Everything is working and I guarantee that
this time it will actually work.
485.116 -> So I'll be back in a second when this has
finished deployed just to show you guys
488.516 -> how it will look okay,
so as you can see, it is done over here.
492.633 -> The building was complete.
495.183 -> You can see even a deployment
496.866 -> summary, a bunch of stuff, the assets,
everything, the checks that it was run.
500.85 -> If you want to perform any checks like
integration checks and stuff like that.
504.933 -> But it seems to be working.
506.55 -> You can check out the website
507.633 -> by clicking on visit
and you can see the status is ready.
510.7 -> And if you want to visit the website
or just click on this button over here
513.6 -> and as you can see, the website is life
and it's working perfectly.
518.25 -> Everything is
exactly how it was supposed to be.
521.066 -> Now, this is a you are elder
we see over here because we were deploying
525.3 -> by for free, right?
526.566 -> So we would have to buy a domain
if we wanted to actually
532.05 -> put a custom domain over here.
533.733 -> It's really simple to set that up as well.
535.35 -> If you're interested,
I could definitely make a video on this,
537.583 -> But this is it for the video.
539.2 -> I wanted to show you guys
how easy it actually
540.866 -> is to deploy a Nexis app to view.
542.516 -> So if you have any questions
or any doubts,
544.316 -> just leave them in the comments below.
546.266 -> Again, I'll put the code for this
and also the links to all my gear
549.666 -> in the description.
And yeah, that's basically it.
552 -> I really hope you guys enjoyed it
and I see you guys next time.
Source: https://www.youtube.com/watch?v=2HBIzEx6IZA