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. 🥰
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!
Everything worked fine only for me go to the deployed site and see that the layout and all my css was messed up . What could be causing? Can anyone help me solve this .
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.
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
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.
@@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.
Thanks for making this video! Why is "Build output directory" set to "/.vercel/output/static" when we are using Cloudflare. Is this default in Cloudflare when you select nextjs from framework preset or is there something within your git repo like the next.js.config file that is causing that?
No worries! The reason for that is because that's where the build is when you run the build command. I think that's the default build path but the next-on-pages package could also be building there
if u r encountering " You are using Node.js 18.17.1. For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required. " this error just add env variable during selecting framework preset below that there is a environmental variables section in that add "NODE_VERSION" and add value as "18.18.0" it saved my day
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?
@@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
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?
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
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?
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.
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
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
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
@@xlgabrielwhat providers are you using? Maybe more configuration is needed? I had some problems running Nextauth on the edge runtime even on Vercel but I got it working after tweaking
@@fitimbytyci345 and sorry for late posting, but Cloudflare Functions/Workers has virtually no cold starts which is usually the reason why people stop using edge.
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
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: th-cam.com/video/Ouny4LKe3UM/w-d-xo.html
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: th-cam.com/video/Ouny4LKe3UM/w-d-xo.html
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.
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!
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
@@maghfoorx witch one it is ? is it on your youtube channel ?
Everything worked fine only for me go to the deployed site and see that the layout and all my css was messed up . What could be causing? Can anyone help me solve this .
literally that compatibility flags steps are quite hard to know to add it amazed by this tutorial
Thank you :)
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 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
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.
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
can you make how to enbale or config cloudflare turnstile on next js project & if possible fullstack next js project on cloudflare
Thanks for making this video! Why is "Build output directory" set to "/.vercel/output/static" when we are using Cloudflare. Is this default in Cloudflare when you select nextjs from framework preset or is there something within your git repo like the next.js.config file that is causing that?
No worries! The reason for that is because that's where the build is when you run the build command.
I think that's the default build path but the next-on-pages package could also be building there
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
if u r encountering " You are using Node.js 18.17.1. For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required. " this error just add env variable during selecting framework preset below that there is a environmental variables section in that add "NODE_VERSION" and add value as "18.18.0" it saved my day
you can also solve by setting engines in package.json file
"engines": {
"node": ">= 20.0.0"
}
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
Could you not just declare the edge runtime in root layout?
sadly not :(
@@maghfoorx that’s pretty upsetting to be honest
Yeah, unfortunate
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
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?
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 :)
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
desde windows me sale error: throw er; // Unhandled 'error' event
^
Error: spawn npx ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:286:19)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:292:12)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn npx',
path: 'npx',
spawnargs: [ 'vercel', 'build' ]
}
Hola! como lo solucionaste?
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
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
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.
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! This helped me setup my first page :) Liked and subbed!
You made my day! Thanks I'm glad I could help🙌
Do they support api route handlers?
Yes they do
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
Dude does it support ssr?
yes :)
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
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
Yes that is not an issue unless you run long running jobs
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.
@@xlgabrielwhat providers are you using? Maybe more configuration is needed? I had some problems running Nextauth on the edge runtime even on Vercel but I got it working after tweaking
@@bruwyvn Sorry I just changed everything to Firebase to not use that Auth method
@@xlgabriel that's an understandable change if owning your auth is not a concern
@@fitimbytyci345 and sorry for late posting, but Cloudflare Functions/Workers has virtually no cold starts which is usually the reason why people stop using edge.
Love cloudflare and nextjs
Super helpful. Thank you!!
Thanks man!
i dont see it
tnx for this awesome tutorial .
excellent content bro, thanks
Glad you liked it!
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 TH-cam
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: th-cam.com/video/Ouny4LKe3UM/w-d-xo.html
@@maghfoorx superb! I really appreciate your explanation and time mate.
Definitely will try it tomorrow.
Thank you so much! 🙌
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
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!
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: th-cam.com/video/Ouny4LKe3UM/w-d-xo.html
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
que locura, muchas gracias
Thank you!
You're welcome!
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.
Run the build command in wsl terminal works for me : )
Thank you so very very much!!!
No worries!
@@maghfoorx ❤️