The BEST way to host Next.js websites

you've built a nextjs website and now it's time to deploy but which option do you pick so you have broadly three options when it comes to hosting nextjs website there is static hosting so you can do a static export you can go for managed hosting for example with forell and you can also do self hosting for example on a VPS so we're going to compare each option here by looking at how expensive they are how easy they are and if all of the next s features are supported so let's take a quick recap to see which features nextjs has again so nextjs is a full stack framework right so we have both a client side as well as a server side so the core of the server side is server component server actions and these route handlers basically API routes but there are also some other features like middleware streaming the image component Dynamic routing and caching so let's see which options that you have for hosting actually support all of those features and which don't now hosting is a commodity these days so you'll typically be choosing between very cheap for just the essentials or a little bit more expensive for some specialized features and by the end of the tutorial I actually show you how to deploy a nexj application to a VPS hosted by hostinger and they are also today sponsor so actually have an example application here that has the core features so this is just a homepage and there is also some routing here so if I go to the hello page we have some output here from a server component from a server action client component as well as a route Handler so very quickly how does that look like in the code here is my homepage very standard and then I have that hello page right here this is a server component right I have async here so I say hello page this is a server component and it's actually getting a result from a server action right so I'm invoking a server action here it's just returning a string here that's what we output here then I also have this client component right client component and this is actually making a fetch call to a route Handler and it will get a result and that's what it will just output right here right so I have that route Handler right here route. TS so these are like the core features of a modern fullstack nextjs application not important to understand understand how everything is structured here we're just going to use this as an example to see which features are supported by which option now before you push your app to any of these options what I like to do is actually just run a local build so here in package of Json typically for development we run mpm runev but if you want to create an optimized version for production you can run mpm run build if you run this locally you can already fix some issues before you even deploy it so it will actually check the types and linting and it will give you some useful information here about your page as well so I have this/ Hello page you can see it's a static page meaning it can just be cached on a CDN it's just an HTML file so whenever there's a request it can just be served from a CDN if it was a dynamic page whenever there's a request it would have to be computed on the server side so typically if it's possible we actually want it to be statically rendered so I can double check if that is indeed happening correctly also for the homepage so I like what I see here and now I can choose one of these options and actually push my app so let's say we want to do static hosting so we can do a a so-called static export and the only thing we have to do for that is just go to your next config and specify output to be export so if I have this and now I run mpm run build again so now what I actually get is actually this out folder because with a static export you just get a bunch of static assets HTML files CSS files and some JavaScript files so here I have my index.html this is the homepage and here I have that hello page right so I can host this wherever you can host static assets like S3 for example I can put a CDN in front of that and it's just like hosting any static asset and with this option you will not have a server running in the background so you lose those server side features so you can see here these are all the features that are not supported when you go down this route so this option is very cheap because you just host some static assets there's no Dynamic compute on some server it's pretty easy just hosting some static assets but a lot of those serers side features simply won't work so all of those features that we just saw they will not work with a static export so you will not have a server in the background so everything will be running client side so it's basically like a react feed app or create react app so static hosting is maybe an option if you have let's say portfolio website a simple website that doesn't need service side compute basically only displays information there are no backend features necessary so typically we do want to have a server side so we can keep those server side features so in practice most people actually do end up with either of these two now nextjs is actually just a nodejs application so wherever you can run nodejs is also where you can run nextjs take a look at managed hosting so another word for them is actually platform as a service so the popular ones are for sale or netlify they integrate with your GitHub so whenever you push to GitHub they will automatically run that mpm run build script on their server and they do certain caching to speed up the build now nextjs as a framework is actually backed by for sale so they have full support for everything and then they as a platform provide some additional features and they charge money for that right so their business model is about providing additional features and in return there is a price tag so for example for sale does not allow you to host commercial projects on their hobby plan so the minimum for a commercial plan is actually the Pro Plan and it can actually get quite pricey especially as you start to scale and in return for that you get certain features like preview deployment you get a cicd pipeline essentially out of the box and they also have a so-called Edge Network so you probably heard of CDN so if I have an simple HTML file like from a static export I can put that on a CDN so my HTML file is just distrib Ed to multiple servers around the world and so that file can be served very closely to the user so it's very fast now CDN is typically for static assets like HTML or css or a Javascript file but what if you have some Dynamic compute like for all of these server side features that we have with next well that's basically the edge Network right so Edge Computing it's basically a CDN but for dynamic compute that's what you get out of the box with for sale as well so these manage hosts are typically not cheap but they are easy and they do typically support all featur now there there is one thing that you need to know which is that forel and netlify they are so-called serverless so they don't have a what's called a long running server waiting in the background so what forel does behind the scenes is actually just spin up a bunch of AWS Lambda function right so it's a serverless platform and they have certain downside so sometimes you'll have what's called cold start things like websockets may not work easily out of the box you may run into timeouts if you have tasks that take a long time also you don't have a persistent file system so if you're using SQL light for example which is actually just a file part of your file system that may also not work out of the box on a serverless platform but generally speaking the typical features aren't supported and there are some other specialized features that you get access to and in return for that there is a price tag and typically it is very easy to use so typically this option is best if you are a beginner or you have a lot of beginners on your team or you need access to a certain specialized feature so with this option you're really paying for a smooth developer experience now I should also mention the buzz wordss that you'll typically hear about are like SSG SSR and typically also ISR so SSG static site generation is actually what we just saw with the static export you get a set of pages that are already generated we don't need additional compute during request time to get the page and that's what we saw with static export that's SSG that's supported by this option that's also supported by the managed hosting so SSR is when you do need some Dynamic compute during request time right so here for example right so you may have a page component typically these are server components and maybe in there you need access to the logged in users information right so depending on who's logged in you're going to render a different page so that cannot happen statically you cannot do that once during a static exports right because it depends on the current user who's logged in so that requires Dynamic compute and so that page needs to be server sign rendered during request time that's typically what people mean with SSR that's supported by manage hosting as well but not by Static hosting and typically you also hear about ISR incremental static regeneration so it has more to do with this action so let me actually move this over here so SSG is when you create a page just once let's say I have an article page that's just a bunch of text doesn't depend on the logged in user we can just generate that page once and we just put it on the CDN that's optimal for a page like that but what happens if that article actually changes maybe the writer made a mistake we need to update the content if you update the content in a CMS for example that CMS can then send a web hook to one of our route handlers and the route Handler can then regenerate the HTML of a page that is a essentially ISR that's also something that requires compute during runtime right so that's also not supported here but it is supported here so that's managed hosting so now let's talk a little bit about self hosting so we're really going to take matters into our own hand and there are certain benefits to that now I do want to mention that if you do want to keep a platform like experience like forell but you do want to host everything yourself there are some options actually like coolify and SSD so that's maybe something you want to look into if you want to go down the self hosting route and you want to get a similar experience as neton buy or for sell so I know that a lot of you are actually interested in hosting your nexs websites on a VBS a virtual private server now what is a server actually a server is just a box of electronics that's somewhere in a data center somewhere we could buy that physically ourselves and we actually ship it to our homes and actually put the nextjs website on there now there are many downsides to that typically you want to rent one from a company like hostinger and we can rent an entire box the entire Hardware just for ourselves a dedicated as they call it or we can use a so-called VPS which means that we get a lot of control over this box essentially there may be other people also using that Hardware but the experience is very similar as to owning the whole box yourself so you can set up your own operating system and things like that so it's very similar to a dedicated server but it's cheaper than that and just to quickly show you how that looks like so here I have my VPS and I get an IP here and don't worry it looks complicated here I can then open up a terminal but this is a terminal window is the exact same as the terminal window in here but just outside and then here I can do SSH to log in there and set everything up I'll show you how that works in a second let's actually finish the table here first so typically a FBS with hostinger can be pretty cheap it depends on the specs of the server that you want to rent but typically you don't get expensive features out of the box you get a more Bare Bones setup and as a result of that it's cheaper now is it easy and I put a question mark here because it really depends on the experience level of the developer for an experienced developer it shouldn't be too hard to set up a VPS for host posting a nextjs website but for a beginner it may still be a bit tricky are all nextjs features supported and actually yeah because we will actually have a so-called long running server in the background it's just going to be some server that will always run it's not serverless it's a so-called long running so with this one actually you will not run into issues of cold start you can use web sockets you can have tasks that take longer than 5 minutes so there are some benefits of having a long running server generally all of these features should work perfectly fine and it's also true for these Buzz and so these also work when you use a VPS so this option is mostly interesting for experience developer now how would you prepare your nexts website for that so here in the docks they do mention self hosting here with a couple of options so actually static export is technically what we looked at here is actually also self hosting you just don't have a server running in the back end so if you just want to run it as a NOS server you can actually just well copy over all of your files onto a VPS let's say and then you can just run the build and then you can run mpm Run start to run that production build and then you can use engine X and pm2 to set everything up correctly I actually have another video with the hosting or VPS in which we do exactly that now the other option that they give here is actually with Docker and I actually found that it's actually easier with Docker and I know that a lot of you want to deploy it with Docker so I will give you a very quick example of how we can have this next CH application dockerize it and then actually host that on a VPS and don't worry if you don't know anything about Docker it's still helpful to see how how that would work so here we have that server component server action client component route Handler let's see if all of that still works in a Ducker container on a VPS now nextjs actually shows you how to do that they have a Docker image example here so if I go back here to next config here I can actually change it into stand alone it will exec create a server.js file that can serve our entire app and what may also be a good idea is if you're using the nextjs image component to install the sharp package I have the docker desktop application here on my computer when you docker something you essentially create a Docker image as it's called to do that I can just create a Docker file no extension and nextjs will actually tell you what that Docker file contain so here they actually have a Docker file I'm actually just going to copy that and paste that here in the docker file I will also create a Docker ignore file this is similar to a dogit ignore now I can create a Docker image out of our application so I can say Docker build from the docker file in this directory now that Docker image that we'll get we need to put that on our VPS and you cannot just push it directly to the VPS instead we're going to push it to a container registry first so Docker Hub is a container registry but we actually also have one on GitHub under packages here we can push our Docker image and this is also where you would push your mpm packages now for the tag or name I need to make it a specific name to properly push it to that container registry so that container registry is actually called GitHub container registry. and then my username on GitHub byr and then a more casual name example nextjs app and then I give it some version tag latest now I'm on Mac and my VPS will be running on Linux Ubuntu that will be an AMD 64 chip now my Mac has an arm armm 64 chip so I need to specify I want to build this image for Linux amd64 all right so that may take some time it will create a Docker image which will contain everything that is necessary to run our nextjs application so all the dependencies it will just be confined within that one Docker image so then I can send over that Docker image or to somebody else or to my VPS that's why Docker has become so popular because it's very portable the application will run the same everywhere all right so after sometime that is finished now if I go to Docker desktop you can see I have a Docker image of my nextjs application to push there though we do need an access token which is essentially something you need whenever you want to do something programmatically with your GitHub account and need access to write and read now I can log in now I can log in I can say Docker login and which container registry well it's this one I can use my GitHub account name and then the password is actually the access token I copied that I paste it right here it won't show it in the terminal and now I can say Docker push all right let's see what we get now you can see we have another package here we can pull this Docker image onto the VPS so here in hostinger dashboard I can get the IP address and I need to SSH into this all right I typed the password you won't see it but now you can see I'm logged into the VPS so I just ran clear and actually the first thing we want to do is probably just update the Ubuntu packages so we get the latest version of the Ubuntu packages and then we can install Docker I will use docker.io all right so after that we should see something now in the world of Docker there's an easy way to check if everything went all right which is just to try running a Docker image called hello world which is hosted by Docker Hub so locally it's not installed so it's going to automatically find that one from Docker Hub you can see this image confirms that the installation is successful we need to make sure that we can log in cuz it's private so then we say B grat and then we need the access token again I will just paste that right there I'm logged in now I can actually just try running it will automatic Al pull it from that container registry can't find it locally but it will automatically try to pull it from the container registry all right so after some time you can see the familiar nextjs logging and so here we should now be able to use the IP address of that VPS now remember it's Port 3000 so let's see what we get if we go there and now we can see our nextjs application running on that hostinger VPS let's actually go to that hello route so we can see if all the features are still working and you can see all of the core nextjs features server component server action client component route Handler all of that is still working here we can set up DNS so we have a nice clean domain name we can configure SSL and add other features as well a lot of that can be done here within hostinger so you can see self-hosting on a VPS is a very realistic option I would say it's mostly interesting for experienced developers that are not willing to pay the premium for managed hosting so make sure you check out hostinger for their FPS offering in that case so if you go to hostinger.com SLB Grant they've even given us in a discount code so here they show you the options you have this should be more than enough for multiple nextjs apps even if you're including the database with them with for example SQL light now it gets even more attractive because if we scroll down here you will also be able to add my coupon code so if you go here and you type bite grad you can apply that and you get an even more attractive price So when you buy a VPS you'll go through an onboarding process let me quickly show you how that works you can just start here and you can pick a location for the VPS so it's actually a Lithuanian company so maybe that's why they put it at the top but what I usually do is just pick the United States I'm actually going to go with this one so I'm going to go with Cloud panel here and Ubuntu so I'm going to click continue here I'm not going to install anything in addition right now so I just typed in my panel password all right so then here we need to set up a password so that we can SSH into our VPS right so that's how you will access your VPS okay so I just added a password I'm going to continue here and we get a nice overview and now we're going to finish the setup all right so then we have our VPS information right here and they will also give you this IP address which we will use to connect to our VPS as well as when we go to the browser to visit our application I want to thank hostinger for sponsoring this video and I want to thank you for watching this video I'll see you the next one bye

Channel: ByteGrad

Views: 13,632

Keywords:

Id: wIkn3aG3rr8

Length: 17min 37sec (1057 seconds)

Published: Mon Apr 15 2024