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

Пікірлер: 51

  • @VaurionX
    @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
    @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

    @ByteGrad

    Ай бұрын

    Thanks!

  • @meal_team_six
    @meal_team_sixАй бұрын

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

  • @swastikpatel234
    @swastikpatel234Ай бұрын

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

  • @davidwserber
    @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

    @ByteGrad

    Ай бұрын

    Hi, that’s great, enjoy!

  • @ahmedalsagir
    @ahmedalsagirАй бұрын

    Thank you .Totally useful 👍

  • @dmnkb
    @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!

  • @guenhyoungpark6197
    @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.

  • @404-not-found-service
    @404-not-found-serviceАй бұрын

    thanks your video

  • @X-Saikat-93
    @X-Saikat-93Ай бұрын

    SST whooooo🕊️🌀

  • @user-zn7fm1su8x
    @user-zn7fm1su8xАй бұрын

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

  • @dickson710
    @dickson710Ай бұрын

    Once again, amazing job bro!

  • @bnssoftware3292
    @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?

  • @xelion7110
    @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.

  • @joaoarthurbandeira
    @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!

  • @hausgaming
    @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

    @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

  • @ts8960
    @ts8960Ай бұрын

    thank u

  • @Suz4n650
    @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

  • @jjoksa
    @jjoksaАй бұрын

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

  • @brunodepaula5293
    @brunodepaula5293Ай бұрын

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

  • @marcusdillgen
    @marcusdillgen28 күн бұрын

    👋🏼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

  • @neoswann2143
    @neoswann2143Ай бұрын

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

  • @algnadjib
    @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

    @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

  • @parannoy
    @parannoyАй бұрын

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

  • @domson_0478
    @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

    @ByteGrad

    Ай бұрын

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

  • @jitx2797
    @jitx2797Ай бұрын

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

  • @ivan.jeremic

    @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

    @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.

  • @hakkicengiz
    @hakkicengizАй бұрын

    👌👌👍👍

  • @victorhugoolvera8773
    @victorhugoolvera877321 күн бұрын

    New devs went full circle 😂

  • @C9Sid
    @C9SidАй бұрын

    I also wanna know which database is better with next js

  • @domson_0478

    @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

    @gubocci

    Ай бұрын

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

  • @C9Sid

    @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

    @domson_0478

    Ай бұрын

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

  • @C9Sid

    @C9Sid

    Ай бұрын

    ​@@domson_0478Thanks man 👍

  • @muratkagan4260
    @muratkagan4260Ай бұрын

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

  • @xelion7110

    @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

    @muratkagan4260

    Ай бұрын

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

  • @sidalisaadi1961
    @sidalisaadi1961Ай бұрын

    I tried this method myself but images werent working for me

  • @eduardocouto112

    @eduardocouto112

    Ай бұрын

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

  • @adnanamin3666
    @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!! 🫡