Thanks! Awesome video, I deploy most of my projects on vercel and pair it with cloudflare dns. Looking forward to trying this on my next project. Have you discovered any nextjs features that you lose by deploying to cloudflare?
@aaronflorespasos324016 күн бұрын
Your contet is great, my firts language is not English, so I practice and learn with interesting topics. Gracias 😁
@sphorb16 күн бұрын
Lovely comment. Thanks!
@ashish9931118 күн бұрын
this package cloudflare/next-onpages will work with NUXT 3 pages and SSR of NUXT3?
@sphorb18 күн бұрын
For next the deployment process will be different I believe. They must have how it's done in their documentation
@iPuppyTech18 күн бұрын
Dude does it support ssr?
@mikelCold19 күн бұрын
Oh my god, this is incredible!
@csayantan22 күн бұрын
can you explain how I can deploy Angular 18 with ssr/ssg configured with xata for data retrival on Cloudflare pages ?
@loopsbrother290325 күн бұрын
thanks
@AbuAbdullah_IN25 күн бұрын
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
@swapnilpatel333727 күн бұрын
Vercel announce Next js 15 version 😅
@noahperez963128 күн бұрын
yes leave the error
@aguudАй бұрын
nice video
@ryankenzo9946Ай бұрын
Cloudflare Turnstile with next js please do it
@ryankenzo9946Ай бұрын
can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare
@SystemBeeАй бұрын
It worked perfectly with your help, thank you very much
@albertoprieto522Ай бұрын
Thank you very much for this video, I have a website in nextjs that I couldn't get to run very well on firebase hosting and I have to upload it to vercel, I will try cloudfare and see how it goes
@sphorbАй бұрын
No worries at all, I hope it goes well! Good luck 🤞
@narduАй бұрын
Mine was slow because of the old @next/font after the upgrade. Luckily sorting this out was quick
@JackBrunsionАй бұрын
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
@2029leandroАй бұрын
Nice! I'd like to learn more stuff about Cloudflare and next js, Vercel's pricing is crazy
@agy112Ай бұрын
Thank you, I really like your content. It would be interesting to benchmark Cloudflare vs Vercel vs VPS hosting
@linhanwang4937Ай бұрын
Amazing! Thank you so much!
@laksjfalskfjl1kj234i1ojoАй бұрын
I'm getting the "Your Functions script is over the 1 MiB size limit" when deploying my app.
@MisterZizzy23Ай бұрын
Thank you bro ❤
@sphorbАй бұрын
Glad I could help!
@cangorkemgunesАй бұрын
Hello Mr. If I add mongodb adapter, it gives error and I think it is about edge runtime. (I don't have enough knowledge about edge and node.js runtime) Is there a way to implement the structure where I store sessions in my mongodb(I also use mongoose). Please make video or help me about this.
@Deus-lo-VuiltАй бұрын
Love cloudflare and nextjs
@ifindevАй бұрын
THIS IS SOOOOO GREAAAAAAAT!!!!! Thank you so much for making this, I’m crying so hard, OMG. May God bless you with all the blessings you deserve 😇. I’m so happy that I found someone who do only the Bare Minimum on building fullstack Next app & deploy it to CloudFlare. No fancy features, no fancy CSS, just the BARE MINIMUM that is super easy to follow through. Thank you thank you thank you!! I’ve been scared to deploy prod app to Vercel due to recent pricing changes that made quite on uproar on Twitter/X, where people can get billed for thousands of dollars just for a static app, OMG! Your tutorial is what I’ve been looking for. TursoDB & Drizzle is a fun combination too, really loved how simple everything are. I’m building my business with Nextjs, so pricing is very important for me. So far Cloudflare has flying colors reviews, so it’s definitely a more sane choice compared to Vercel. Thank you & wish me luck guys!
@wilbertduneАй бұрын
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.
@fitimbytyci345Ай бұрын
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?
@raves_r3177Ай бұрын
Subbed! Please do cloudflare deploying full stack next js that uses Image component
@sphorbАй бұрын
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: kzread.info/dash/bejne/gami25aFe8iZhbA.html
@MuhammadIbrahim-ng8jeАй бұрын
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.
@vaisakhkm783Ай бұрын
Can we run other meta frameworks like sveltekit, nuxt, analog or like spring, ruby on railson rails etc.c
@sphorbАй бұрын
I'm not sure about ruby and spring but sveltekit and nuxt for sure you can
@vaisakhkm783Ай бұрын
@@sphorb ho ok thanks
@neeshsamsiАй бұрын
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
@sphorbАй бұрын
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.
@sphorbАй бұрын
My site sphorb.io is on Cloudflare and it uses server actions. Everything works great 😁
@neeshsamsiАй бұрын
@@sphorb Awesome. Definitely going to use this next time
@PlayhouseMediaGroupАй бұрын
we need to see those errors, it gives a more realistic experience
@sphorbАй бұрын
That's very fair, some of the debugging took a bit long I didn't want to include it in the video to waste the viewer's time. But I'll think more about it next time😁😁 thanks for the feedback!👌
@rithik93Ай бұрын
project was actually good and ezpz waiting for some bigger project
@sphorbАй бұрын
Niceee😎😎
@rithik93Ай бұрын
mann cannot figure out what err i get while installing drizzle!
@sphorbАй бұрын
@rithik93 message me on twitter with the error I can help:)
@rithik93Ай бұрын
@@sphorb actually I did resolve it after 1 hour of googling and stuff but anyways thanks. I'm just a newbie uk nvm:)
@sphorbАй бұрын
Ahh nice one good job, that's the way to learn!👌
@0x-003Ай бұрын
first time being here, can you make more of these next js and maybe even React projects for beginners. it helps me create projects to my github and it teaches me. also please show us best practices. please continue to make them beginner friendly
@sphorbАй бұрын
Thank you for the feedback! I will try to make more of these!
@mel-182Ай бұрын
is this included in free tier?
@sphorbАй бұрын
Yep, it's included in free tier and the free tier is quite generous from Cloudflare so you don't have to worry
@rithik93Ай бұрын
Need more vids like this about serverless
@ustav_oАй бұрын
legend🔥 please make more
@sphorbАй бұрын
Thank you man! Will do🫡
@otisranckoАй бұрын
revalidatePath() is called in server actions not as you demonstrated....
@sphorbАй бұрын
Yep I learned it 30 seconds after that point😁 I use it correctly later on in video
@otisranckoАй бұрын
@@sphorb Can you help me out with a project?
@sphorbАй бұрын
Sure! Message me on twitter
@SR-zi1pwАй бұрын
Does cloudfare support all vercel features?
@sphorbАй бұрын
Yes almost all features but Cloudflare in my opinion is better than Vercel for their generous free tier. With Vercel the pricing is really inconsistent and that can mess things up sometimes if something goes wrong. Cloudflare doesn't have the image optimisation for free that Vercel does but I'm looking for a solution. Other than that I think Cloudflare is just better. Unlimited CDN
@scotly_emiАй бұрын
Please can you find a way of using image I have an e-commerce website to deploy
@sphorbАй бұрын
@scotly_emi the images still work and your project will work fine. what will you be using to store the images? I have a couple of projects that have images and they work just as good. You still get free unlimited Cloudflare CDN that caches your images and your site is super fast
@scotly_emiАй бұрын
But without the image optimisation won't that be a problem even if the image works fine? I was planning on using cloudflare R2 bucket for storing images I don't know if that is a good idea and I'm using node js for backend
@sphorbАй бұрын
Ahh there will be no issues @scotly_emi Cloudflare already has a service for images called Cloudflare Images. That service is really really good. Use that instead of R2 and your site will work great!
@quangminhtran7592Ай бұрын
Was the use of client side functions intentional? I would have implemented the functionality using next.js latest server actions. How would this affect the deployment to cloudflare?
@sphorbАй бұрын
Sorry which client side functions do you mean? I did use server actions 😁 I was able to deploy to Cloudflare successfully at the end
@quangminhtran7592Ай бұрын
@@sphorb I had a wrong thought :) Thank you for your response! May I kindly ask if Next.js also works on Cloudflare when you install other npm packages for your app, as they run on Node.js?
@sphorbАй бұрын
No worries! Yes absolutely most npm packages and stuff should work as normal with the `node_compat` flag on Cloudflare 👌
@paarsaJamАй бұрын
Thanks for sharing such an important tutorial.
@sphorbАй бұрын
Thank you man! I appreciate it
@uhtfvtwsgtgfАй бұрын
not working for me using node 20.12 v
@Victor-dd7elАй бұрын
Make a video on how to use Image component in cloudflare for free, I mean how to serve the appropiate image
@sphorbАй бұрын
Will do! Something I'm researching at the moment
@LomasDelMaitenАй бұрын
The best speed improvement that I recently found is to use the turbo mode. On the package json scripts use dev: next dev --turbo
@user-sq8gf9jq9jАй бұрын
Yes, --turbo is much faster, but I have an issue with non-English characters such as japan, korea, china, russia when they are present in a file with 'use client'. Then, when we edit the code in that file, instead of hot reload, it reloads the page every time. Do you experience the same?
@sphorbАй бұрын
Yeah turbo is by far the best. I recorded this video because the load times were extremely slow, I'm talking greater than 10 seconds. Upgrading npm package made them normal again
@alexanderclay5847Ай бұрын
Love this! Please do more videos on cloud flare, trying to move of vercel due to pricing
@sphorbАй бұрын
Will do! That's exactly the reason I started learning about Cloudflare as well
@samnmeje3486Ай бұрын
what else would you like to learn about cloudflare ?
@user-ps6tt3kp7lАй бұрын
Thank you so very very much!!!
@sphorbАй бұрын
No worries!
@user-ps6tt3kp7lАй бұрын
@@sphorb ❤️
@harvey_04Ай бұрын
can writing `export const runtime = "edge" ` on the layout page rather than in each page suffice?
@sphorbАй бұрын
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
@harvey_04Ай бұрын
@@sphorb anything for cloudware's bandwidth lol
@mikhacavinАй бұрын
cloudflare support SSR and RSC ?
@sphorbАй бұрын
Yes it does :)
@mikhacavinАй бұрын
@@sphorb whoaa cloudflare looks OP. they give us unlimited bandwidth 🤯
@sphorbАй бұрын
Exactly! It's sad how many people aren't aware of Cloudflare services. I've taken it upon myself to show people 🤣
@mikhacavinАй бұрын
@@sphorb 😂😂
@Victor-dd7elАй бұрын
@@sphorb how do they support SSR in next14?
@scotly_emiАй бұрын
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
@sphorbАй бұрын
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!
@rubinskyzlatrovich6731Ай бұрын
Ye how to handle next image on cloudflare
@noahperez963128 күн бұрын
@@sphorb witch one it is ? is it on your youtube channel ?
Пікірлер
Thanks! Awesome video, I deploy most of my projects on vercel and pair it with cloudflare dns. Looking forward to trying this on my next project. Have you discovered any nextjs features that you lose by deploying to cloudflare?
Your contet is great, my firts language is not English, so I practice and learn with interesting topics. Gracias 😁
Lovely comment. Thanks!
this package cloudflare/next-onpages will work with NUXT 3 pages and SSR of NUXT3?
For next the deployment process will be different I believe. They must have how it's done in their documentation
Dude does it support ssr?
Oh my god, this is incredible!
can you explain how I can deploy Angular 18 with ssr/ssg configured with xata for data retrival on Cloudflare pages ?
thanks
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
Vercel announce Next js 15 version 😅
yes leave the error
nice video
Cloudflare Turnstile with next js please do it
can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare
It worked perfectly with your help, thank you very much
Thank you very much for this video, I have a website in nextjs that I couldn't get to run very well on firebase hosting and I have to upload it to vercel, I will try cloudfare and see how it goes
No worries at all, I hope it goes well! Good luck 🤞
Mine was slow because of the old @next/font after the upgrade. Luckily sorting this out was quick
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
Nice! I'd like to learn more stuff about Cloudflare and next js, Vercel's pricing is crazy
Thank you, I really like your content. It would be interesting to benchmark Cloudflare vs Vercel vs VPS hosting
Amazing! Thank you so much!
I'm getting the "Your Functions script is over the 1 MiB size limit" when deploying my app.
Thank you bro ❤
Glad I could help!
Hello Mr. If I add mongodb adapter, it gives error and I think it is about edge runtime. (I don't have enough knowledge about edge and node.js runtime) Is there a way to implement the structure where I store sessions in my mongodb(I also use mongoose). Please make video or help me about this.
Love cloudflare and nextjs
THIS IS SOOOOO GREAAAAAAAT!!!!! Thank you so much for making this, I’m crying so hard, OMG. May God bless you with all the blessings you deserve 😇. I’m so happy that I found someone who do only the Bare Minimum on building fullstack Next app & deploy it to CloudFlare. No fancy features, no fancy CSS, just the BARE MINIMUM that is super easy to follow through. Thank you thank you thank you!! I’ve been scared to deploy prod app to Vercel due to recent pricing changes that made quite on uproar on Twitter/X, where people can get billed for thousands of dollars just for a static app, OMG! Your tutorial is what I’ve been looking for. TursoDB & Drizzle is a fun combination too, really loved how simple everything are. I’m building my business with Nextjs, so pricing is very important for me. So far Cloudflare has flying colors reviews, so it’s definitely a more sane choice compared to Vercel. Thank you & wish me luck guys!
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.
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?
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: kzread.info/dash/bejne/gami25aFe8iZhbA.html
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.
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
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
we need to see those errors, it gives a more realistic experience
That's very fair, some of the debugging took a bit long I didn't want to include it in the video to waste the viewer's time. But I'll think more about it next time😁😁 thanks for the feedback!👌
project was actually good and ezpz waiting for some bigger project
Niceee😎😎
mann cannot figure out what err i get while installing drizzle!
@rithik93 message me on twitter with the error I can help:)
@@sphorb actually I did resolve it after 1 hour of googling and stuff but anyways thanks. I'm just a newbie uk nvm:)
Ahh nice one good job, that's the way to learn!👌
first time being here, can you make more of these next js and maybe even React projects for beginners. it helps me create projects to my github and it teaches me. also please show us best practices. please continue to make them beginner friendly
Thank you for the feedback! I will try to make more of these!
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
Need more vids like this about serverless
legend🔥 please make more
Thank you man! Will do🫡
revalidatePath() is called in server actions not as you demonstrated....
Yep I learned it 30 seconds after that point😁 I use it correctly later on in video
@@sphorb Can you help me out with a project?
Sure! Message me on twitter
Does cloudfare support all vercel features?
Yes almost all features but Cloudflare in my opinion is better than Vercel for their generous free tier. With Vercel the pricing is really inconsistent and that can mess things up sometimes if something goes wrong. Cloudflare doesn't have the image optimisation for free that Vercel does but I'm looking for a solution. Other than that I think Cloudflare is just better. Unlimited CDN
Please can you find a way of using image I have an e-commerce website to deploy
@scotly_emi the images still work and your project will work fine. what will you be using to store the images? I have a couple of projects that have images and they work just as good. You still get free unlimited Cloudflare CDN that caches your images and your site is super fast
But without the image optimisation won't that be a problem even if the image works fine? I was planning on using cloudflare R2 bucket for storing images I don't know if that is a good idea and I'm using node js for backend
Ahh there will be no issues @scotly_emi Cloudflare already has a service for images called Cloudflare Images. That service is really really good. Use that instead of R2 and your site will work great!
Was the use of client side functions intentional? I would have implemented the functionality using next.js latest server actions. How would this affect the deployment to cloudflare?
Sorry which client side functions do you mean? I did use server actions 😁 I was able to deploy to Cloudflare successfully at the end
@@sphorb I had a wrong thought :) Thank you for your response! May I kindly ask if Next.js also works on Cloudflare when you install other npm packages for your app, as they run on Node.js?
No worries! Yes absolutely most npm packages and stuff should work as normal with the `node_compat` flag on Cloudflare 👌
Thanks for sharing such an important tutorial.
Thank you man! I appreciate it
not working for me using node 20.12 v
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
The best speed improvement that I recently found is to use the turbo mode. On the package json scripts use dev: next dev --turbo
Yes, --turbo is much faster, but I have an issue with non-English characters such as japan, korea, china, russia when they are present in a file with 'use client'. Then, when we edit the code in that file, instead of hot reload, it reloads the page every time. Do you experience the same?
Yeah turbo is by far the best. I recorded this video because the load times were extremely slow, I'm talking greater than 10 seconds. Upgrading npm package made them normal again
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 ?
Thank you so very very much!!!
No worries!
@@sphorb ❤️
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
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?
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 ?