Deploy Next Js on Cloudflare
Vložit
- čas přidán 18. 04. 2024
- I really think cloudflare is a really good option for hosting your Next Js application but I think it goes under the radar for a lot of people. Recording this quick video to show people how to deploy your Next Js Application on Cloudflare. Cloudflare's free tier is much more friendly when compared with their competitors such as Vercel, Netlify or AWS. Espacially the unlimited CDN!
_____________________________________
Follow my journey on Twitter: / sphorbio - Věda a technologie
Thank you, I really like your content. It would be interesting to benchmark Cloudflare vs Vercel vs VPS hosting
Love this! Please do more videos on cloud flare, trying to move of vercel due to pricing
Will do! That's exactly the reason I started learning about Cloudflare as well
what else would you like to learn about cloudflare ?
Can you make an in depth tutorial on this topic because of some other issues like deploying a full stack project and also use next image please
Thanks for the feedback! Yeah I'm planning on creating a full video building a project and deploying it on Cloudflare and then more complex projects in the future!
Ye how to handle next image on cloudflare
@@sphorb witch one it is ? is it on your youtube channel ?
It worked perfectly with your help, thank you very much
This looks awesome. One common concern that I have heard with nextjs devs is the 10s timeout for severless functions. Will we be able to overcome the same when we deploy it on cloud flare? If yes, can u plz let us know how? Thanks in advance
it would great a side by side comparison, like what works, what doesn't work on nextjs with cloudflare. side by side comparison with Vercel.
Love cloudflare and nextjs
Hey man thank you. Can you please implement it using a larger application. I have already deployed it but the results are not good. Some id/slug pages are either crashing or not navigating upon click. Also how to work with next API's.
There must be a catch right? if all NextJS features work as they should.
Didn’t Lee wrote a post on twitter that they stopped using edge on v0?
does not npx directly run the comman on the fly? why do you need to install the package you are about to run with it as a dev dependency too? regardless good video, keep it up
can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare
I'll try that today. I've been using a VPS to host my Next pages (mostly landing pages to sell digital products) and using Cloudflare as DNS/Proxy. Do you know if the Free tier can be used to host commercial sites? Vercel doesn't allow it.
Yeah that's another neat thing about Cloudflare. You can use it for your business without any restriction like that!
5 hours later, I migrated my whole landing page to Cloudflare
Nice! Was there anything weird you encountered? I imagine if everything works properly you want have to pay for VPS anymore😁
@@sphorb Yeah, there were some issues. Couldnt get tRPC or NextAuth to work. But they weren't needed at all. I used the T3 stack by Theo and both tRPC and NextAuth were included in the boilerplate. I'm still using a VPS to host a backend to save leads to a database and display a dashboard to my clients.
Looks superb! Thank you so much for sharing master! 🔥
Could you please consider creating a CRUD with Next 14 and server actions?
And deploy it to Cloudflare, IDK if is neccesary to use Workers o something else?
I'm hesitating between having everything in a fullstack mono repo, or creating a backend with Hono.. Hopefully you can bring some light with this..
Thank you in advance mate!
Hey thanks! I can try to make a video on this:) but for your use case you don't need a separate backend at all. Next Js has everything you need to build a simple CRUD app
@@sphorb thank you for the input!
Looking forward to it
@@sphorb cool, I want to know it
hey @naylord5 :) I created a simple CRUD application and hosted it on cloudflare, just as you requested 😁 I hope you find it helpful! here's the link: czcams.com/video/Ouny4LKe3UM/video.html
@@sphorb superb! I really appreciate your explanation and time mate.
Definitely will try it tomorrow.
Thank you so much! 🙌
can writing `export const runtime = "edge" ` on the layout page rather than in each page suffice?
Sadly not at the moment, you have put it at the top of every page and API route. A better way in the future would be able to define it in your next configuration 😁but not possible atm
@@sphorb anything for cloudware's bandwidth lol
nice video, you got s sub here!!
Plz make videos about deploys I love this
Thank you so much man! Will do. Will try to cover anything you can't find a video about on CZcams
Have you tried making a Nextjs + Drizzle and cloudflare's database? I just wanted to know the setup required to do that.
hey hey @kapatidkumusta I haven't actually tried using Cloudflare's D1 database yet. I will explore this in the future. But for now I am really enjoying Turso Database. Their free tier and developer experience is really good with Drizzle
@sphorb Yeah, Turso is quite good as I have also used it with Nextjs. The problem is I sometimes get these "socket hang up" errors, which the Turso team has already acknowledged as a bug, but they are having a hard time debugging it till this day.
Wonderful video mate 👏, I have a video request to share with you. How best can I reach out to you?
Thank you man! Sure you can either type it here and I'll add it to my list. Or you can DM me on twitter @sphorbio :) whichever you prefer!
Can we run other meta frameworks like sveltekit, nuxt, analog or like spring, ruby on railson rails etc.c
I'm not sure about ruby and spring but sveltekit and nuxt for sure you can
@@sphorb ho ok thanks
Subbed! Please do cloudflare deploying full stack next js that uses Image component
hey thanks!
I created a mini course showing how you can create a full stack application with this stack! Hope you find it helpful. Let me know about anything more you'd like!
here's the link: czcams.com/video/Ouny4LKe3UM/video.html
Does cloudflare pages support all features of Next? Because I recently ran a project on Netlify to try and move off Vercel and server actions didn't seem to be working
Ahh that's interesting, I use server actions in almost all my applications and I deploy it on Cloudflare. It all seems to work totally fine.
My site sphorb.io is on Cloudflare and it uses server actions. Everything works great 😁
@@sphorb Awesome. Definitely going to use this next time
Thank you 🙏 Does the Cloudflare hosting setup you demonstrated support app API routes in Next.js , or is it just for static sites?
Thank you man! Yes! It works for API routes as well. Just make sure to put export const runtime = "edge" for your API routes as well
is this included in free tier?
Yep, it's included in free tier and the free tier is quite generous from Cloudflare so you don't have to worry
Make a video on how to use Image component in cloudflare for free, I mean how to serve the appropiate image
Will do! Something I'm researching at the moment
cloudflare support SSR and
RSC ?
Yes it does :)
@@sphorb whoaa cloudflare looks OP. they give us unlimited bandwidth 🤯
Exactly! It's sad how many people aren't aware of Cloudflare services. I've taken it upon myself to show people 🤣
@@sphorb 😂😂
@@sphorb how do they support SSR in next14?
Is it cheaper?
Yep Cloudflare's pricing is much cheaper compared to Vercel, they offer you unlimited CDN for free but Vercel has a limit on that as well even on free tier
Thank you so very very much!!!
No worries!
@@sphorb ❤️