Deploy ANY Next.js app in 9 Minutes (using the Vercel CLI with your own domain name)

yo what is going on guys welcome to another video You're Gonna Learn how to deploy any next.js app we're using the vasel CLI which is super simple and you're going to learn how to map it to a custom domain name so you can have any custom domain name you want in less than 10 minutes let's dive into it this video was made possible by our friends over at hostinger and in fact they've got an amazing Black Friday deal on right now more on that in just a second so diving straight into our next JS app here we've got a beautiful looking next.js application you've got a nice little bit of navigation you've got day and night mode and you've got this beautiful looking responsive website this is actually from the Tailwind UI templates Library so feel free to check it out when you have some time so we all have nextgs projects but we want to go ahead and actually deploy it so this can be on a real URL that anyone can access on the internet first things first we need the vasel CLI so simply head over to the vasel docks I've got a bunch of different options here npm yarn I've actually already installed this but all you need to do is open up a terminal hit base and go ahead ahead and install it globally to your computer once we've done that we're going to go over to our next JS code now here you can see we have a normal nextgs project this will work with next year's 12 or nexjs13 it does not affect the deployment step so I'm going to open up a new terminal and it's so simple to deploy it with the cell all we have to do is simply type in versaille hit enter and now we're going to get a bunch of instructions the first one is asking if we should set up and deploy the following project we're going to hit enter to go ahead and confirm then you've got the Scopes if I'm logged into several accounts it will show up on here on the cell however in this case I've already logged into my account if you're not logged into an account in Versa it will pop up at this point you can log in and then go ahead and proceed I'm going to hit enter now we don't already have an existing project our purpose cell so I'm simply going to click enter for n project name we're going to keep the exact same so we're going to hit enter and what directory your code is located in as our code is located in this main root directory we're simply going to go ahead and continue on with enter and as you can see it sets up a project so here you can customize things a little a bit more if you want to get a bit more granular in your build process but we're going to keep with the default right now and simply hit enter for no this will go ahead and give us a URL let's open up that URL so as you can see right now we have hopped over to the cell and we have a build which is in process so let's give that a second way and just like that we have our build ready and we can go ahead and click on this this is now on the internet and it's ready to go ahead and be viewed by anyone and as you can see everything at first glance seems perfect why everything looks really nice we have our light and dark mode everything seems great except for when I zoom in uh oh we have a missing word at this point so why did this happen well we actually rely on some environment variables when we deploy this project and you're going to run into that same issue and a lot of your projects so I'm going to show you two ways in which you can add your environment variables into your project so the first way is simply going ahead and clicking over at the Tailwind Spotlight heading over into settings and down into environment variables now let's head over to our project and as you can see inside of our project we have a m the local file and here we have two environment variables and then we have the name and in this case the name is what will appear on the user's site over here so this is the expected outcome okay so what we're going to do is we're actually going to copy this right now head over to the cell and paste hit save after selecting which environments you've got your different environments you can deploy to we're going to go ahead and hit save and then that will add it in here so I wanted to show you firstly my preferred way but if you ever do need to go ahead and actually add these variables in I'm going to show you just how to do it through the CLI so let's imagine I want to add in the next public example name via the CLI well it's very simple all we need to do is type in the cell environment add and we paste in the value hit enter and then we're going to get prompted asking us what the value is in this case I'm simply going to go ahead and pop in a sunny Sanger and it's going to ask which environment I want to go ahead and add that to at this point I can hit a enter and it will simply add it to each of those environments or heading back over if I was to refresh now we should should be able to see that that new value is added inside let's go ahead and add in the final value and as you can see our environment variables are set to redeploy our application it's super fast all we need to do is type in the cell and just like that it will trigger a redeployment using the previous settings that we went ahead and configured you can now go ahead and add in an integration so that way whenever you push to GitHub it will go ahead and also deploy the code if you want to see a dedicated video on that let me know in the comments down below or check out one of my previous videos and I'll be sure to get back to you so as you can see that's deployed our app beautifully perfect this is looking just how we want it our app is nicely now deployed the only thing we're missing right now is a beautiful looking URL right I want to have a nice domain name that says sunnysanga.com this is where our friends over at hostinger come in clutch not only have they sorted us out with a exclusive coupon code just for the papa fam using Code sunny but they also have a incredible huge black Friday deal currently on for a limited time so here's a couple of reasons is why I personally trust hosting up with my domain firstly they're incredibly easy to set up they're fast they're quick we're going to go through the entire process right now they have a 99.9 uptime guarantee the websites are incredibly fast their support is top tier it's incredible they've helped me out whenever I've got stuck and it's not one of these complicated control panels they have something called the H panel which is incredibly simple to use in fact I'm going to give you a demo of it in just a second the best part you get a free domain a free SSL certificate and you get a 30-day money-back guarantee so if you're not happy with it you can simply get your money back so if you want to take advantage of this offer the first link in the description simply head over to the hostinger link scroll down to choose your web hosting plan in most cases at the premium web hosting plan is enough for the majority of use cases let's go ahead and add this to our cart the next step is you want to go ahead and select the time frame in this case I truly recommend you do the long time frame because you get a free domain for the entire first year scroll down hit the have a coupon code option and type in sign in and click apply then you're going to get a 10 discount off the existing huge amount of savings from this Black Friday deal as you can see here that's almost 500 pounds of savings now I've actually taken advantage of this and bought myself a beautiful domain name I'm going to show you how to go ahead and access the HP panel and then hook it up to the cell so once you've bought your plan all you need to do is simply click on login go ahead and log into your account and once you've logged in you'll get presented with the incredibly user-friendly hpanel now if we go ahead and scroll down you can see that I've bought a domain name for sunnysanga.com let's go ahead and click on manage now over here you can see we've got a bunch of different options that we can go ahead and configure if we look on the left DNS name servers is typically the only thing that you would actually mess around with so we're going to go ahead and click inside of that here we can add in different records that we may need to use and this is really useful and super simple to find and trust me I've used a lot of different domain managers this is by far the easiest at this point we need to Simply make a connection to the cell head over to your vessel project go over to the domains Tab and I'm simply going to go ahead and put in a different URL so I will show you I've already connected Sunny Sangha but I'm going to show you if I didn't connect here what would happen so if I typed in sunnytest.com and simply hit an add so I'm going to go ahead and redirect everything so let's go ahead and click add and then we'll get two alerts saying that we haven't configured things as we need to so getting this setup is extremely easy firstly we need to add a cname so I'm going to go ahead and copy this value right now head over to my DNS panel change this drop down to AC name and change the target to CNN for cell add record I've already done it so I'm not going to do that right now then you want to do the same thing for the a record so copy this like so head over here paste it in and add the record then you need to give it a bit of time it could be anywhere between five minutes to an hour to propagate through their servers so that way the cell picks it up and that way the records can be updated over on hosting aside as well once that's done you'll see a different message so I'm going to change this now to sunnysanga.com where I've already connected this this is what you'll see once your records have successfully propagated through the hostinger and vessel servers so once we've connected our domain we actually need to do a redeployment but this time to production so when we actually run the vessel command what's really happening here is that it will actually go ahead and give us a preview URL so that way we can constantly deploy it in a safe manner but when we're ready to go ahead and release to our main URL in this case our domain name URL that's when we do a production push so let's look at the difference between a preview right now as you can see this says preview and this is giving us a test URL that we can go ahead and use before we're going to push to our production app now you can see it gives us a little hint here to deploy to production simply run the cell production so let's go ahead and do that right now and now what you will notice that there's a big difference we've actually pushed to production and as you can see this is the actual final URL that we were expecting to sunnysanga.com that's a really important up to make sure that we're pushing to the correct URL so now when we head over to sunnysanga.com you'll see this page pop up on the screen and just like that guys you deployed your next JS app using the vessel CLI and connected up a custom domain name for an absolute Banger of a price that's what I'm talking about if you enjoyed this video make sure you smash the Thumbs Up Button subscribe if you haven't already and as always guys drop a comment down below what you learned the most or what you enjoyed the most about this and I hope this is a useful resource for you to constantly come back to to learn how to redeploy your apps as always guys it's your boy Sunny AKA Papa rat I'll see you in the next video peace I know how to love you [Music]

Channel: Sonny Sangha

Views: 31,617

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript, next js, web development 2022, html tutorial for beginners, front end developer, typescript project, javascript mastery, web development projects, web hosting coupons, web development for beginners, deploy to vercel, deploy nextjs, web hosting, next.js tutorial, nextjs tutorial, next js vs react

Id: W3jKJ3V_4V4

Length: 9min 50sec (590 seconds)

Published: Fri Nov 25 2022