Deploy Next Js on Cloudflare

Ғылым және технология

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

Пікірлер: 66

  • @agy112
    @agy11215 күн бұрын

    Thank you, I really like your content. It would be interesting to benchmark Cloudflare vs Vercel vs VPS hosting

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

    @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

    @rubinskyzlatrovich6731

    Ай бұрын

    Ye how to handle next image on cloudflare

  • @noahperez9631

    @noahperez9631

    5 күн бұрын

    @@sphorb witch one it is ? is it on your youtube channel ?

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

    Love this! Please do more videos on cloud flare, trying to move of vercel due to pricing

  • @sphorb

    @sphorb

    Ай бұрын

    Will do! That's exactly the reason I started learning about Cloudflare as well

  • @samnmeje3486

    @samnmeje3486

    28 күн бұрын

    what else would you like to learn about cloudflare ?

  • @SystemBee
    @SystemBee12 күн бұрын

    It worked perfectly with your help, thank you very much

  • @wilbertdune
    @wilbertdune23 күн бұрын

    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.

  • @AbuAbdullah_IN
    @AbuAbdullah_IN2 күн бұрын

    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

  • @fitimbytyci345
    @fitimbytyci34523 күн бұрын

    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?

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt22 күн бұрын

    Love cloudflare and nextjs

  • @MuhammadIbrahim-ng8je
    @MuhammadIbrahim-ng8je26 күн бұрын

    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.

  • @JackBrunsion
    @JackBrunsion13 күн бұрын

    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

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

    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.

  • @sphorb

    @sphorb

    Ай бұрын

    Yeah that's another neat thing about Cloudflare. You can use it for your business without any restriction like that!

  • @vogelcodes

    @vogelcodes

    Ай бұрын

    5 hours later, I migrated my whole landing page to Cloudflare

  • @sphorb

    @sphorb

    Ай бұрын

    Nice! Was there anything weird you encountered? I imagine if everything works properly you want have to pay for VPS anymore😁

  • @vogelcodes

    @vogelcodes

    Ай бұрын

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

  • @ryankenzo9946
    @ryankenzo994610 күн бұрын

    can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare

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

    can writing `export const runtime = "edge" ` on the layout page rather than in each page suffice?

  • @sphorb

    @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

    @harvey_04

    Ай бұрын

    @@sphorb anything for cloudware's bandwidth lol

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

    nice video, you got s sub here!! Plz make videos about deploys I love this

  • @sphorb

    @sphorb

    Ай бұрын

    Thank you so much man! Will do. Will try to cover anything you can't find a video about on KZread

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

    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!

  • @sphorb

    @sphorb

    Ай бұрын

    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

  • @naylord5

    @naylord5

    Ай бұрын

    @@sphorb thank you for the input! Looking forward to it

  • @Victor-dd7el

    @Victor-dd7el

    Ай бұрын

    @@sphorb cool, I want to know it

  • @sphorb

    @sphorb

    29 күн бұрын

    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: kzread.info/dash/bejne/gami25aFe8iZhbA.html

  • @naylord5

    @naylord5

    29 күн бұрын

    @@sphorb superb! I really appreciate your explanation and time mate. Definitely will try it tomorrow. Thank you so much! 🙌

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

    Have you tried making a Nextjs + Drizzle and cloudflare's database? I just wanted to know the setup required to do that.

  • @sphorb

    @sphorb

    Ай бұрын

    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

  • @kapatidkumusta

    @kapatidkumusta

    Ай бұрын

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

  • @raves_r3177
    @raves_r317724 күн бұрын

    Subbed! Please do cloudflare deploying full stack next js that uses Image component

  • @sphorb

    @sphorb

    24 күн бұрын

    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

  • @neeshsamsi
    @neeshsamsi28 күн бұрын

    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

    @sphorb

    28 күн бұрын

    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

    @sphorb

    28 күн бұрын

    My site sphorb.io is on Cloudflare and it uses server actions. Everything works great 😁

  • @neeshsamsi

    @neeshsamsi

    28 күн бұрын

    @@sphorb Awesome. Definitely going to use this next time

  • @vaisakhkm783
    @vaisakhkm78327 күн бұрын

    Can we run other meta frameworks like sveltekit, nuxt, analog or like spring, ruby on railson rails etc.c

  • @sphorb

    @sphorb

    27 күн бұрын

    I'm not sure about ruby and spring but sveltekit and nuxt for sure you can

  • @vaisakhkm783

    @vaisakhkm783

    27 күн бұрын

    @@sphorb ho ok thanks

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

    Wonderful video mate 👏, I have a video request to share with you. How best can I reach out to you?

  • @sphorb

    @sphorb

    Ай бұрын

    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!

  • @Victor-dd7el
    @Victor-dd7elАй бұрын

    Make a video on how to use Image component in cloudflare for free, I mean how to serve the appropiate image

  • @sphorb

    @sphorb

    Ай бұрын

    Will do! Something I'm researching at the moment

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

    Thank you 🙏 Does the Cloudflare hosting setup you demonstrated support app API routes in Next.js , or is it just for static sites?

  • @sphorb

    @sphorb

    Ай бұрын

    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

  • @mel-182
    @mel-18229 күн бұрын

    is this included in free tier?

  • @sphorb

    @sphorb

    29 күн бұрын

    Yep, it's included in free tier and the free tier is quite generous from Cloudflare so you don't have to worry

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

    cloudflare support SSR and RSC ?

  • @sphorb

    @sphorb

    Ай бұрын

    Yes it does :)

  • @mikhacavin

    @mikhacavin

    Ай бұрын

    @@sphorb whoaa cloudflare looks OP. they give us unlimited bandwidth 🤯

  • @sphorb

    @sphorb

    Ай бұрын

    Exactly! It's sad how many people aren't aware of Cloudflare services. I've taken it upon myself to show people 🤣

  • @mikhacavin

    @mikhacavin

    Ай бұрын

    @@sphorb 😂😂

  • @Victor-dd7el

    @Victor-dd7el

    Ай бұрын

    @@sphorb how do they support SSR in next14?

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

    Is it cheaper?

  • @sphorb

    @sphorb

    Ай бұрын

    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

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

    Thank you so very very much!!!

  • @sphorb

    @sphorb

    Ай бұрын

    No worries!

  • @user-ps6tt3kp7l

    @user-ps6tt3kp7l

    Ай бұрын

    @@sphorb ❤️