Hey, guys. How's it going? I'm back here with another video, and today I decided to bring this video
where I'm going to be really quickly showing you guys how to deploy our next
JS application onto the Vercel platform. Now, the reason why I want to make
this video is because a lot of you guys have been asking me
how to do this specifically. And it's a really quick process, as
you can see by the length of this video. I know a lot of you guys will end up
finding yourself in this situation, especially with the release of next 13. so that's why I wanted to make the video. before we get into the video recently,
you guys have been commenting a lot about the lights
that I have in the back of my video. This two ones over here. I've received comments about it
for a while now, but I don't know why. Recently,
a lot of you guys have been wondering. I'm going to put a link for the Amazon
page to buy this in the description. If you're one of those people
who are interested in looking at it together
with like all the gear that I use in my videos,
I'm not sponsored by any of them. I'm just putting out
because that's what I use. And yeah, that's, that's basically it. So with that
in mind, let's get into the video. Okay, everyone. So this
is how we're going to deploy our app. So I have over here a very simple app. I can even open it up over here
on my local host. It's actually not a real website. I used part of this code for a video and it's like practically broken. But to be honest, I don't really care. It's just for the purposes of the video. It's a normal next year 13 application. Here we have some beautiful
UI that I just copied online. To me the home page for some reason,
but then the here it's making like an API request and getting some data,
but you can see it is indeed. Next up, if I open this up over here,
you'll see that we have some next year code and it was completely built
by using create next app. So how are we going to deploy this? now the first thing we need is to have
a GitHub because whatever so does is they actually use your actual repositories
to be able to deploy it. So what I want to do is I want to create a new repository
over here into our in our GitHub account. We're going to call it something like next 13 deploy. Okay. Next 13 deploy is available. So I'm going to choose public
and then that's fine. Only create repository. Now you can see this is how it's it's,
it appears when you create a repository. I'm going to copy this command over here. All of this one's over here. Just come and see
that I'm coming to Visual Studio Code. I'll open up this. I'll run. Get in it. Then I'm going to run. Git. And don't to add my files. And then finally, just paste all of this. It will commit
and push my code to our GitHub repository. Open this up over here and refresh. You'll see that our code should be here. Now, this is kind of expected
that you kind of have some sort of knowledge
in regards to GitHub, but I still wanted to show real quick
just so you guys would know what you do. Now the thing is we just deployed
our next app, but just the code to GitHub. What we need to do now is
we need to come to Verso now in verse. So if you just enter verso com and create your account, you would do that
by signing in and logging into an account. It's really quick, really simple. I'm not going to show it
because I already have an account and I assume all of you guys know
how to create an account on a website. It is free, by the way. You just create your account and you'll see yourself in this page
called Dashboard, right? The virtual dot com slash dashboard. Then I'm going to click Add New
and I'm going to choose and new project. When you click on that, you'll see that it
will ask us to import from a repository. If you don't see it like this is because you didn't
actually connect your GitHub account with with Verso. So when usually you create
a virtual account, you can do so by using a bunch of different providers,
including GitHub. But if you used any provider
other than GitHub, you still need to connect
your GitHub account to here. Now how do you add your GitHub account? Well, you click on ADD account
and you will open this up. Then you'll see that I have already added. So that's why this page appears. However, if it is in your case
and you haven't, you should see a login page
and an authorization page asking you to install all the necessary
plug Institute to Verso in order to allow them
to have access to your GitHub account. And that will be completely safe,
by the way, in case you're scared of that. Now, the good thing about this is they have access
to all of your repositories and you can deploy any of them
really quickly, including the one that I deployed
to GitHub one minute ago, as you can see over here. And it even shows that it is a next
Yes app. So what we want to do is
I want to click on import. Now we need to give it a project name and you have to recognize that
depending on what you put over here, your project will look
a little bit different. I'm still going to call it next 13 deploy. It's going to ask us for what is the
framework I'm going to choose next. Yes, the root directory. Same thing. There's a bunch of build
and output settings that are different depending
on what project you're actually deploying. But for us, this since first
so specifically is very, very connected to the next
jazz, right? Verso is the company that makes next year. They already have all of this
pre-made for you so you don't have to even do anything. The only important thing you have to do
is in case you have environment variables, you add them over here because obviously
the environment variables won't be present only by just using the a file that you have in your code. So we don't have any of them. I'm going to click deploy and you guys
should see that it is as easy as that. You'll see that
a whole deployment process has started. It is. It shows you the pipeline
and shows that it's building. It shows all the commands
and everything that is running. And I'll be back in a second
when this is pretty much done. Now, if you guys see it hasn't
actually deployed because I purposefully put a mistake in one of my pages
just to show you guys this case I've done. I do this every time I show deployment videos just because I know
it will not always go perfect for ever. For most people, actually, deployment
is usually not a smooth process. So I wanted to show specifically this for you guys
so you can see my next step is running. Did perfectly. It is working right. But there's one specific page
that has something broken in it. The page is this one over here. If you go to source,
go to contact this page. Over here it is give is given as an error. In this case, it is actually
a typescript error, but it is important. It's an error nonetheless. So what I want to do is
I want to just quickly fix this error. And the way I found this error was because during the deployment process
for next year, if you run into any errors, you can just look over here
to see exactly where it failed to compile. In this case, it gave us the exact location
to where we failed and the exact error message
that we received. Now, to fix whatever I had over here, it's
actually really simple because all we need to do is just a quick fix would be to give a type
of any two to this thing. and now all we have to do is just
send our code again to our repository. So I'll just say fixed stuff. I'll commit and then I'll push. Now that we finished pushing the code,
we have to go back to our overview page
over here in our Verso dashboard. We'll see that we have our project
that we tried deploying over here. Next 13 deploy, we'll click on it
and you'll see that it has an error rate because there was an error, but you can see that our commit message
so our changes are actually over here, meaning that we should now
be able to redeploy this. Well, how do we actually redeploy this? Well, we can click on build logs
and just click on redeploy. and now it will ask us
to redeploy to production and it will ask us to use existing
build cache. I'm not going to click on that
and then going to click on redeploy and you'll see that
now it will start queuing again. It will start the process. You can see the pipeline
every year running. Everything is working and I guarantee that
this time it will actually work. So I'll be back in a second when this has
finished deployed just to show you guys how it will look okay,
so as you can see, it is done over here. The building was complete. You can see even a deployment summary, a bunch of stuff, the assets,
everything, the checks that it was run. If you want to perform any checks like
integration checks and stuff like that. But it seems to be working. You can check out the website by clicking on visit
and you can see the status is ready. And if you want to visit the website
or just click on this button over here and as you can see, the website is life
and it's working perfectly. Everything is
exactly how it was supposed to be. Now, this is a you are elder
we see over here because we were deploying by for free, right? So we would have to buy a domain
if we wanted to actually put a custom domain over here. It's really simple to set that up as well. If you're interested,
I could definitely make a video on this, But this is it for the video. I wanted to show you guys
how easy it actually is to deploy a Nexis app to view. So if you have any questions
or any doubts, just leave them in the comments below. Again, I'll put the code for this
and also the links to all my gear in the description.
And yeah, that's basically it. I really hope you guys enjoyed it
and I see you guys next time.
