Deploy a Next JS Application - Easy

what's going on guys clint here and in this video i'm going to show you how we can deploy a next js application to the web with a tool called versailles very very easy to use and very quick so follow along and let's get started here so just cruise on over to versailles.com now i'm just gonna go ahead and sign in or you can go ahead and sign up and i'm just using my github account and this is very very easy you guys it's very quick to get started so it already authenticated me using uh using github and this is my application right here that i'm gonna be um that i'm going to be deploying in if you go ahead and see here it is a just a weather app that i just created where you can go in here and and search using a search api and find uh weather data information and if you want to see how i built this in next.js then go ahead and i'll put a card at the top if you want to see how i built this in next.js but that's not really important in this video i was going to show you how we can deploy to versailles using nextgen so what we need to do is go over to github once you have an account at vercell go over to github and let's just create a new repository here and what this is i'm going to call it next next js weather youtube just like that go ahead and press enter you can call it whatever you like there so let's go ahead and create our file here so our git repository and what i want to do here is come back over here let's just shrink this down so you can see it and so what we want to do is go ahead and just create our repository here so what i'm going to say down here is uh just setting up our repository so i'm going to say get init hit add um just like that and we'll say git commit we'll say boy just or you could say whatever you like doesn't really matter there get branch so and i'll just paste that in right there then get push u origin main so go ahead and deploy this uh or push it to github and if we refresh we should now see our our application our next js application on github so that's all we need to do there let's go back to vercell here and what we can do here in versailles is go ahead and um see click here hobby new project okay and we should see next js weather app so these are my most recent commits here and so next.js weather youtube that's what we just created so let's go ahead and click import okay now um this is all we need to do now in this file in my case we're using a emv file so if you look at our my.mv file over here this is where i'm storing my api key or my api key that i'm using to the open weather map api in this case so what we want to do here i'm just going to select this and this is how you add environment variables to for sale while deploying so very very easy so as you can see this one is next public weather key just like that so come over here and what we're going to do is add an environment variable there now uh in in in versailles we don't actually have to add this um don't believe we have to add this next public so we should just be able to say whether a key just like that then i'm going to paste in my key just like that so go ahead and hit save and let's go ahead and click deploy and what this is going to do is just run our build process it's going to be it's going to take just a few minutes here so bear with me just a moment all right guys looks like it just finished up here so let's go and have a look at our application hey there you go congratulations they're saying it's already loaded so let's go to the uh let's go to the dashboard here and now we can view our application so let's just go ahead and make sure everything is working properly with our api keys and everything so let's go ahead and click there and you can see this is our application here now live and deployed on on the web there this is our local host and this is our application live let's go ahead and make sure that we can search a city hey there you go so that is how we can deploy our application live and you even passed in a our api key from our env file now just something to note you guys if you didn't get any errors that's great now whenever it's building your project you may or may not get some errors and guys if you get some errors just walk through there nextgs does a really great job of telling you what the error is and where it is on what line and it does a pretty good job of explaining um just what the error is in general so if you can't figure it out just go ahead and just highlight and select the error and paste it in google you guys chances are somebody somewhere has already ran into this error and they've probably posted about it to help you fix it so that's how you can deploy a next.js application to versailles for free using github and for sale so hope you like the video you guys smash the like button subscribe to the channel and i'll see you on the next one

Channel: Code Commerce

Views: 43,305

Keywords: react js, next js, deploy next js app, deploy next js application, deploy react app, deploy, hosting, web hosting, nextjs hosting, host a next js website, coding, javascript, html, css, vercel, deploy to vercel, deploy next app to vercel, host on vercelrcel

Id: Vcm1anCcuU0

Length: 4min 50sec (290 seconds)

Published: Tue Jun 28 2022