The BEST way to host Next.js websites

Рет қаралды 21,033

Күн бұрын

Check out Hostinger's VPS at hostinger.com/bytegrad with discount code BYTEGRAD
Full transparency: I get a commission if you buy something from Hostinger through that link.
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 Ай бұрын

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

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

@meal_team_six Ай бұрын

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

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

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

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

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

@ahmedalsagir Ай бұрын

Thank you .Totally useful 👍

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

@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

@jjoksa Ай бұрын

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

@user-zn7fm1su8x Ай бұрын

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

@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

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

thanks your video

@dickson710 Ай бұрын

Once again, amazing job bro!

@marcusdillgen 25 күн бұрын

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

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

SST whooooo🕊️🌀

@neoswann2143 Ай бұрын

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

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

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

@ts8960 29 күн бұрын

thank u

@parannoy Ай бұрын

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

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

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

@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

@victorhugoolvera8773 18 күн бұрын

New devs went full circle 😂

@hakkicengiz Ай бұрын

👌👌👍👍

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