Deploy Next Js on Cloudflare
HTML-код
- Опубликовано: 18 окт 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
Thank you, I really like your content. It would be interesting to benchmark Cloudflare vs Vercel vs VPS hosting
cloudflare is my ♥ and recently started developing apps with nextjs.
Seeing this, that nextjs can be deployed on cloudflare makes me love cloudflare even more. 🥰
Nice to hear!
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
@@maghfoorx witch one it is ? is it on your youtube channel ?
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.
For cloudflare, there is a support list in the article
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?
Glad it was helpful! Didn't notice much most of the stuff just works
Thank you! This helped me setup my first page :) Liked and subbed!
You made my day! Thanks I'm glad I could help🙌
Nice one..SImple and clear video.....
Q: Is there a easy way to add `export const runtime = "edge";` if one has plenty pages?
Thanks! Sadly no. You have to add it on top of each page
Thanks! Sadly no. You have to add it on top of each page
It worked perfectly with your help, thank you very much
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😁
@@maghfoorx 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.
Love cloudflare and nextjs
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
Yes that is not an issue unless you run long running jobs
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 RUclips
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.
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
excellent content bro, thanks
Glad you liked it!
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: ruclips.net/video/Ouny4LKe3UM/видео.html
que locura, muchas gracias
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
@@maghfoorx thank you for the input!
Looking forward to it
@@maghfoorx 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: ruclips.net/video/Ouny4LKe3UM/видео.html
@@maghfoorx superb! I really appreciate your explanation and time mate.
Definitely will try it tomorrow.
Thank you so much! 🙌
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?
NextAuth won't work. That's the first catch I've seen. It's been a nightmare to configure this.
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
@@maghfoorx anything for cloudware's bandwidth lol
Thank you!
You're welcome!
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!
in terms of env variables, how does cloudflare handle serverside env variables? will the app be able to pick it up once you configure them in cloudflare?
Yeah you can add them in cloudflare and the app will have access to them
@@maghfoorx I was able to add them on cloudlfare but it seems like the app is unable to pick them up. Not sure how to debug this lol. I was also looking into using t3-env but I’m assuming I don’t need too
After adding them, redeploy the application that maybe it. Also how are you using them? Like process.env.EVIRONMENT. Like that right?
@@maghfoorx yes correct! I’ll try redeploying again hopefully that works
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
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.
can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare
I'm getting some deprecation warnings, such as:
npm warn deprecated uuid@3.3.2: Please upgrade to version 7 or higher
I just did a fresh node install following a fresh fnm install
Is this a cloudflare problem or a me problem?
It has to do with one of the packages that requires uuid package. You can safely ignore it :)
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
can you explain how I can deploy Angular 18 with ssr/ssg configured with xata for data retrival on Cloudflare pages ?
I haven't worked much with angular but I imagine Cloudflare will have a documentation page if it is possible to deploy an angular project
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 😁
@@maghfoorx Awesome. Definitely going to use this next time
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
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
@@maghfoorx ho ok thanks
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
cloudflare support SSR and
RSC ?
Yes it does :)
@@maghfoorx 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 🤣
@@maghfoorx 😂😂
@@maghfoorx how do they support SSR in next14?
Dude does it support ssr?
yes :)
Could you not just declare the edge runtime in root layout?
sadly not :(
@@maghfoorx that’s pretty upsetting to be honest
Yeah, unfortunate
Cloudflare is way faster than vercel. Saw a noticeable speed difference after switching.
yeah everything seems super fasted when hosted on Cloudflare
I don't know what I have done wrong. I have followed all the steps mentioned in the video, but I am getting an error when I run the command "npm run pages:build".
> courseplayer@0.1.0 pages:build
> npx @cloudflare/next-on-pages
⚡ @cloudflare/next-on-pages CLI v.1.13.5
⚡ Warning: It seems like you're on a Windows system, the Vercel CLI (run by @cloudflare/next-on-pages
⚡ to build your application) seems not to work reliably on Windows so if you experience issues during
⚡ the build process please try switching to a different operating system or running
⚡ @cloudflare/next-on-pages under the Windows Subsystem for Linux
EXIT WHEN NOT EXPECTED
SHELLAC COMMAND FAILED!
STDOUT:
STDERR:
⚡ Unexpected error: {"cmd":"npm --version","stdout":"","stderr":""}
I've been trying to work with Linux WSL and I added two files: "wrangler.toml" and I edited ".eslintrc.json" based on the documentation from Cloudflare. Still same error.
I've been facing errors for the past two days and I'm still unable to solve them. I'm reaching out here for some help.
Do they support api route handlers?
Yes they do
Thank you so very very much!!!
No worries!
@@maghfoorx ❤️
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