Save Your Time - I deployed Next.js to different services (so you don't have to)

so I want to kind of further investigate other services you can use to deploy next.js and just kind of like weigh out which ones seem like they're better in terms of developer experience and also which ones seem like they're better in terms of performance I will say before you even invest watching this video I did not put thorough Research into most of this I basically just clicked through their setup guide went through their wizard connected it to my git repo and deployed it and now I'm going to show you some Network request times to see how long stuff takes so I have a next JS application setup that is basically just a single landing page with five different components I guess this is actually six components and these are just Tailwind components directly grabbed and copied from the Tailwind UI so the free ones and this is what it kind of looks like you got like different sections some images that will kind of use the next image um optimizer and that's it so let's just go through left or right there's no really organization of this video the first thing I want to kind of talk about is amplify I know I just made a video about amplify and unfortunately Amazon just logged me out so I can't really show you even the dashboard for it because I'm too lazy to log in but regardless I made a lot of videos by amplify um I still think amplify has a really good developer experience if you use like the dashboard when I say amplify there's a bunch of other things that are kind of bundled in the amplify you have like the the dynamodb stuff the database stuff you have the Cognito stuff I'm not talking about any of that stuff when I say amplify I'm specifically just talking about deploying a next.js application as a host web app option when you click through the amplify console so don't conflate the terms I know there's a whole amplify CLI command you can use to like set up a project and deploy stuff I am not talking about that anyway we got that deployed the amplify I would say the developer experience for amplify is actually pretty good I give like 8 out of 10 maybe even a 9 out of ten you basically log in you connect to your git repo it detects you're using next and it just deploys everything like it's it works it's nice now the only caveat is that video I made a couple days ago with like the caching issue if they could fix that or allow you to configure how stuff is cached I'd be more willing to use it on a smaller scale project I'm not going to rehash that whole thing so we have this loaded up the amplifier right here I'm gonna go ahead and refresh so that my stuff gets warmed up again when you're deploying to serverless like environments there's cold starts your lambdas have to warm up usually one or two requests will warm everything up and now let's just do a single request I have cash disable cache turned on and I'm going to walk you through some of these request times so overall most of these are coming back with under 30 milliseconds okay the image optimization stuff is like under 20. save icons 152 for some reason um it's not weird but okay so these are getting hit in Cloud front so they're pretty fast I mean this is pretty performant everything's like sub 30 milliseconds I'm on the East Coast I think so again the performance for amplify I think is pretty good um and the developer experience is pretty good if they could just fix a couple of things so let's move on to the next one I also have an SST deployment using that same exact code and this has a package called open next which allows you to basically deploy a nexjs application to your Amazon account and the benefit of this is that your stuff is not abstracted away you you have the details of your cloudfront distribution you can look into your lambdas you can look into your Cloud watch logs you can look into all this stuff it's not abstracted away and it gives you the flexibility to use the SST library in cdk to manually configure your infrastructure as code if you need to configure or change stuff I like this because if you look at the code they give you ways to change the caching Behavior inside the cdk code right I could just uncompet the stuff and I can change how cookies are cash and that I made a whole video about that but this gives you more flexibility if for some reason amplify is not working the way you need it to using something like open next in SST gives you that flexibility to kind of configure things the way you need at the cost of you have to spend more time understanding how to do all this stuff right understanding how the right infrastructure as code understanding cloud formation is cdk and then on top of that understanding SST it's a lot of overhead to learn all this stuff but as far as getting it set up it was literally just running these three commands and you have a fully working next application with like a a little URL so let's look at the actual deployment here it's the same exact code like I mentioned and we're going to go ahead and refresh this page real quick make sure stuff loads and now let's compare some numbers so let's move this up so right now these numbers are much much higher for some reason I don't know why they're so much higher um I saw it be much lower a second ago so let's try to do any refresh to see yeah we're getting like 60 milliseconds for this stuff so if I were to compare like app 67 milliseconds are we getting cloudfront hits we are so for some reason this is actually taking a decent amount of time longer than amplify I don't know why because I literally tested this like 10 minutes ago before I started recording and amplify in the SST deployment we're kind of on par they were the same load times but now for some reason a lot of these are much higher in terms of load times and by higher I mean like 50 milliseconds that's not too bad right so just to kind of show you that maybe Amazon's having like a Slowdown Let me refresh this a little bit and see yeah again amplifies hitting like 23 seconds every time and uh this one is just a little bit slower I don't know why all right let's move on to the big guns we got vercella over here versel again is probably in developer experience 10 out of 10. this is the best thing you could probably use if you don't mind spending 20 bucks a month for your web application for your next JS application I don't think you can beat this and again in terms of developer experience you basically click a couple of buttons you connect to your git repo and it automatically deploys everything it's on par with amplify I just think that the Purcell dashboard is like um it Leaps and Bounds better in terms of like analytics for example if I go to my project dashboard and I go to usage I can get a breakdown of like all the bandwidth and stuff that's being used I can get a breakdown of like what endpoints are being invoked how long those endpoints take to run how much bandwidth is being used from those endpoints I get a nice breakdown and these are the things you want to kind of know about if you ever need to do some type of optimization so versatile again like 10 out of 10 in terms of developer experience and if you can afford it like just just do it like there's no reason not to do it and if for some reason using versa like the network traffic is too much or they they charge too much then you can start looking the other options but let's look at the deployment so again we have a verse cell deployment notice here in the domain this is Versa about app same stuff we got the images Etc let me just make sure everything's warmed up behind the scenes and I'll do a refresh here so let's look at the times here these times are actually higher than amplify these are actually on par with SST notice you got like 67 seconds 71 seconds 85 seconds the images are like 50 70 40. those were on par with um the SST deployment and amplify was pretty much lower for the most part like I don't know what is different between these things and more specifically I don't know why amplify would be much lower than um the cloudfront deployment for SST maybe the lambdas under the hood have more memory here so they're faster and they're processing requests faster or the fact that I think SST is using an S3 storage bucket for assets would probably slow down a little bit I don't really know but that's I'm just sharing with you the metrics that I'm seeing from deploying the exact same application to these three services and I would say that versel is on par and sometimes even a little bit slower than the SST deployment notice here that we're getting 45 48 49 4450 going to Versa we're hitting like 86 87 and this could also be my location like my laptop location in the US is probably different over sales data center might be further away from me um compared to Amazon's data center that is a possibility I don't really know this stuff could be deployed to the West Coast I would hope it's not um or maybe it's deployed to uh you know the Midwest or the West Coast I don't know but that's just the metrics I'm seeing I'm on the East Coast with a simple deployment these are the numbers I'm seeing so let's talk about the fourth one which was net Lo-Fi so the user experience for navify again was pretty good I mean I basically logged in I set up with Git repo I told it to deploy the repo and everything seems like it's working I again I haven't put a lot of effort into investigating like how everything works there's something about the dashboard that's kind of just like overwhelming and confusing to me so I give it like a again like an 8 out of 10 or 9 out of 10 for developer experience it just it seems cluttered to me I don't know nullify just seems a little cluttered I don't really like it as much as versel um but maybe it's because it's kind of new to me again every time you use like a new service you have to like learn how it all works and stuff but for example like where do I get the analytics on my stuff where do I get the logs on my stuff is there a way to even do that add log drains I mean this is kind of similar to versel where like maybe they don't even provide logging for you which is that's one thing that kind of bothers me about versel the netlify like some of these things don't show you logs until you actually have like the logs up right so until I go to this page I can't see any production logs which that doesn't work in production you need to have like an audit Trail of the stuff that's hitting your apis and your services so you can debug in production when stuff goes wrong amplify an SST out of the box everything is hooked up to Lambda which is automatically hooked up to cloudwatch which means you have every endpoint is going to log out of request and if an error happens it's going to log that out for you I think with the versel you actually have to hook up to a third party service to keep track of those logs now please correct me if I'm wrong about anything but that's what I've seen with my project like you go here you go to logs and um they have a maximum of one hour like that's not gonna work let's be honest that's not going to work for a production system you need to have logs that go back like by days and maybe you get access to that as you upgrade your plan to the 20 a month thing but in terms of like is this thing production ready with like the hobby plan I would say no like you need to have logs and you can't just have like depend on just having this thing open um but yeah overall those are the kind of the trade-offs between those things um now let's go here with netlify let's just go ahead and refresh the page and let's compare some numbers netlify is by far the slowest out of all these if you look at these numbers we're in 113 milliseconds 117 milliseconds um image optimization 84 seconds so this thing is pretty slow I don't know if they do any type of like caching in front of this stuff or if maybe they're in a location that's further away from me I think this is deployed to Ohio which might be further away than like where this other stuff is like I said this video is not very thorough there's probably stuff that I'm not thinking about when I'm sharing this information but yeah I mean netlify seems good the DX something by the Dashboard I just don't like but I think it's pretty good all right let's move on to digitalocean digital ocean I really like digital ocean I like their dashboards I like what they provide you um unfortunately with next let's see is this thing actually deployed right now so I don't even know how to get to my application it says it's done deploying but how do I get to it you know what I mean so like oh Live app there's a big button that says live at let's click it and here we go we got the app right here let's compare um metrics here let's just make sure everything's loaded up here are the runtimes for digital ocean so the difference I think with digital ocean is that they're probably not doing the whole CDN stuff um I think they're just basically spinning up like a Docker container that's running your next application status I don't know what the CF cache status is um maybe they are using cloudfare yeah it looks like they might be using cloudflare behind the scenes to Cache stuff because it is saying a cloudflare cash hit so maybe they do have caching setup and the performance is actually pretty nice it seems like this is pretty pre-performant we're seeing like 30 milliseconds 40 milliseconds maybe it's because they're closer to where I live but overall the developer experience for setting this up wasn't too bad I think I'll give it like a 7 out of 10. or an 8 out of 10 like I don't think it was as intuitive as like clicking through Versa or clicking through amplify and let's kind of look at their logs do they even give you like ways to export these logs and it looks like they just give you a single terminal with like find so in my opinion that's not going to cut it for a production application unless there's a way to like export those things you got access to a console if you want to actually like do stuff on the server for some reason um so like like this this isn't serverless right you're paying five dollars a month for like a running server overall I mean I probably wouldn't personally pick digitalocean to run my next app unless I really needed to but I think this is a good starting point if you just don't care about like Edge Computing and stuff now some honorable mentions I tried render and it just doesn't work right it just doesn't work it doesn't deploy I tried even going to the render docs and they say okay you can go here you can kind of look at this this Fork next.js hello world their docs link you to a hit repo that's about two years old it's on next 11. so I personally would not recommend render I could not get my next app to work although I didn't spend much time trying to figure it out um with these other services basically working with a click of the button like I would not even bother with render kind of a garbage application in terms of next from what I'm what I'm seeing and then the last honorable mention is Railway I tried to get a project set up with Railway and I've used Railway in the past but I signed up with like my new git repo that has only been around for like a couple of months and for some reason even after entering my credit card it cannot verify my GitHub account and I cannot use so that's a big L for Railway in my opinion um you all need to kind of get on that and fix that because my GitHub account has been open for like months now and I have like 17 I have a like almost 200 followers on here I got 17 repos I have activities starting all the way back to January so the fact that you still can allow me to like set up anything unless I upgrade to a team account which is 20 a month um no thank you so Railway Big L there unfortunately because I do kind of like Railway but again it probably wouldn't even be like Edge compatible it'd probably be like a single Docker container that's running your stuff but yeah that's all I want to kind of uh walk you all through in this video if you guys have an alternative place that you guys like to deploying your next applications leave a comment below and kind of you know walk us through like why you like using whatever service that I didn't talk about here and also if there's anything that's kind of um wrong about the way I kind of pointed out these metrics let me know again I think this might be just based on my location and different data centers might be further away depending on like where these people host their stuff I'd have to actually look at like a map and see like where's versel versus where's nello5 versus uh Amazon versus what's the other one um oh digital ocean my final remarks again is if you can afford 20 bucks a month I would just get for sale it's going to be the best experience out of all these and the performance was pretty good otherwise if you want to kind of like do your own thing and get your hands dirty with some like devops and infrastructure code SST is a great option and then finally if you don't mind um some caching issues that I mentioned before amplify again is a pretty good solution if you just kind of Click through their UI and get that stuff set up and netlify was pretty good as well um again it kind of for me it boils down to having access to production logs and versel and netlify don't seem to give you that out of the box so I would probably lean again to SST because I care about my production logs and I want to be able to kind of search through and exceptions are thrown anyway if you enjoyed liking this be sure to comment subscribe press the Bell icon and like always I have a Discord Channel you're welcome to join if you want to talk to me directly or just find a place to hang out with some other developers have a good day and happy coding

Channel: Web Dev Cody

Views: 15,014

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: ixCEmwH1D8c

Length: 16min 28sec (988 seconds)

Published: Fri Apr 28 2023