The BEST way to host Next.js websites

Check out Hostinger's VPS at hostinger.com/bytegrad with discount code BYTEGRAD (paid sponsorship)
Full transparency: I get a commission if you buy something from Hostinger through that link.
Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for auth: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
⏱️ Timestamps:
00:00 Overview of options
01:08 Example app
02:06 npm run build
02:57 Static hosting
04:30 Managed hosting
05:22 CDN vs Edge network
06:09 Serverless vs Long-running
06:53 SSG vs SSR vs ISR
08:36 Self-hosting
08:44 Coolify / SST
09:07 What is a server?
10:04 Is self-hosting cheap / easy / well-supported?
11:18 Node.js server hosting
11:42 Host with Docker
13:01 Container registry (ghcr.io)
14:40 VPS hosting
#webdevelopment #programming #coding

[@VaurionX]

Another great video. I think a lot of new developers are afraid to self-host, but they don't realize that learning Linux and Docker sets you up for the future. It's also helpful because PaaS vendors tend to raise prices and try to lock you in over time. Self hosting is wonderful, because you can take your Docker container to another host in minutes. Bare metal is bare metal, your container will work anywhere.

[@benjamingoller6267]

Within a few videos that I watched from you, you have become my favourite tech youtuber. Your content is well-structures, concise and insightful. I love the practical yet deep insights you are giving on Next JS and adjacent technologies. Thanks!

[@ByteGrad]

Thanks!

[@swastikpatel234]

Really valuable knowledge , have been following you since a long time and you never disappont , really awesome content

[@meal_team_six]

Wow! Never cease to amaze! By far the best tech youtuber. Sincerely appreciate your content. Keep up the good work!

[@davidwserber]

Hi Wesley, just wanted to drop a note to say that your react course is fantastic so far! I'm excited to get to the Next.js portion of the course! Thanks for all the great content!

[@ByteGrad]

Hi, that’s great, enjoy!

[@ahmedalsagir]

Thank you .Totally useful 👍

[@X-Saikat-93]

SST whooooo🕊️🌀

[@xelion7110]

well i'm already suffering with aws Amplify for 6 months and i wanna mention some stuff there security (ddos attacks for example) and scaling i don't know if i could manage VPSs very well at a large scale with zero down time, thanks for the video by the way 😊, and i would be glad if anyone could give me some suggestions.

[@dmnkb]

Great tutorial! Thanks for sharing! Is there any benefit of building the docker image locally over building it directly on the VPS on every push (triggered by a webhook / GH action)? This is how I used to do it, but I'm wondering now if I'm missing out on anything compared to your approach. Also, would be great if you could cover SSL auto renewal in another view… Thank you so much!

[@user-zn7fm1su8x]

Thank you for the wonderful tutorial, please consider deploying without docker in your next video. Best wishes!

[@guenhyoungpark6197]

Awesome tutorial! Does Docker Next.js deployment option support for using “edge-runtime” API when deployed on VPS? I heard it uses Cloudflare Workers API in the background.

[@dickson710]

Once again, amazing job bro!

[@hausgaming]

I'm wondering how PPR would work with self-hosting? A static shell of a page generated build time would be served from a CDN close to the user, and stream the dynamic content on-demand from the server. Any idea how that would work?

[@domson_0478]

Probably it would be a little different. In your case some way of combining parts received from CDN and other received from server should be included. It would be a simple js file to do this. But it requires client to run it and wait. So PPR would be more like that: Client makes request and server starts processing it. Some parts of requested page would be prerendered at build time so server will keep it in memory. During request server will take that parts from memory and include them it the response. Rest of the content that is dynamic would be rendered and streamed to the client (which will already have static content visible in browser). So we save time beacuse we used that static prerendered content from memory

[@joaoarthurbandeira]

Great video, as always! What if i have a separate backend, say in Django Rest Framework from my Nextjs Frontend, how could i do it? Could you show us how could we deploy them together and maybe also separately? Could we dockerize them together and deploy them on a self-hosting platform like hostinger/heroku? And, if separately, could it be something like the frontend in hostinger and the backend in heroku? Many thanks, you are truly one of the best, keep it up!

[@404-not-found-service]

thanks your video

[@brunodepaula5293]

You can host it on lambda functions, which is extremely cheap...and you can leveragrle nextjs server side processing.

[@Suz4n650]

Amazing videos ! Something weird though, i have an issue with sharp doing the exact same steps for building the docker image ... Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. It's killing me ahahaah

[@jeanmax1me]

Alright take my affiliation money, you deserved it

[@marcusdillgen]

👋🏼Hey, another great video. I would like to see a more detailed look at the supported Next.js features. What about self-hosting on a VPS with middleware? i18n Routing is where I feel a bit lost so far. AWS Amplify for example does not support middleware with Next 14 yet. The ISR setup would also be interesting. Otherwise, as I said, great overview. Thanks

[@ts8960]

thank u

[@domson_0478]

1:37 That was not a server action. You forget to add "use server" at the top, so it worked as normal server side function

[@ByteGrad]

Nice catch! It doesn't make a difference in the results though.

[@bnssoftware3292]

Is it possible to combine both export and standalone outputs so we can host the static oart on a cdn ans the docker image on a server?

[@neoswann2143]

Can you do a video on using coolify to host our Next JS Applications?

[@jjoksa]

what about SSL, how to set it up with docker on the Hostinger?

[@algnadjib]

After building the app Can you serve static pages from a CDN and dynamic pages from a dynamic server at the same time?

[@domson_0478]

This is interesting. I host my projects on VPS. One of them uses ISR on home page (revalidates every hour). Also there is cloudflare CDN used, but during every request for this home page still full request is needed. This is fairly simple. Client needs to check if page was revalidated or not. But the rest of assets (like js or css) are servered from CDN. Getting to the point. I don't really know how it work with fully static pages. I am going to test that. It will really depend on Next.js and which http headers are set

[@victorhugoolvera8773]

New devs went full circle 😂

[@hakkicengiz]

👌👌👍👍

[@parannoy]

Where does something like Google Cloud Run fall into this picture?

[@jitx2797]

11:10 correct me if I am wrong but does ISR works when self deploying??? I think its a platform feature

[@ivan.jeremic]

ISR is nothing special and it has been proven that you don't need it, SSR + Caching has same speed as static

[@domson_0478]

It simply works. It is nothing different than storing rendered page in memory. Nothing special. Then when it's needed server serves it and revalidate sometimes.

[@C9Sid]

I also wanna know which database is better with next js

[@domson_0478]

You can choose any database you want. Db should be selected based on project requirements. However, any database should work properly with next.js as good as it works with node.js (it is the same). Only choose proper ORM (many of them support multiple kind of db's)

[@gubocci]

Tell me you don't have a slightest clue what you are doing without saying it...

[@C9Sid]

@@gubocci Currently I am using MongoDB, but vercel provides us an option for Postgres SQL. That’s why I am confused a bit.

[@domson_0478]

@@C9Sid Yes, Vercel also offers PostgreSQL, but you don't have to use it. You can use what you want

[@C9Sid]

​@@domson_0478Thanks man 👍

[@sidalisaadi1961]

I tried this method myself but images werent working for me

[@eduardocouto112]

Did you install the sharp package ? It's necessary for VM method

[@janyumi1995]

coolify

[@adnanamin3666]

Your explanations are well thought out and on point. Everytime I have something to learn, and I come here, I don't get lost in all those unnecessary technical jargons that I actually don't need to get something done. Love your approach to solutions and much respect for the effort you put into these videos for the community. Super amazing! Bless you!! 🫡

[@muratkagan4260]

what about security ? If a Nextjs app is deployed on a VPS, how must security be done as equal to Vercel deploy ?

[@xelion7110]

i'm not sure what do you mean but if you talking about ddos attacks for example Cloudflare would your choise or AWS WAF if you are using aws and you wanna keep everything in one place

[@muratkagan4260]

@@xelion7110 i mean which security measures must be taken on a VPS ? cloudflare for DDOS attacks is ok. other measures ?