Why Cloudflare Pages May Not Be the Best For Next.js 🤷♂️ | Pages Architecture
Vložit
- čas přidán 28. 06. 2024
- I share my experience trying to deploy my Next.js application on Cloudflare Pages. It was a frustrating experience with custom changes needed to get my app to even deploy. I'm not seeing full support for Next.js on Cloudflare Pages.
Because of this and the missing feature support for Next.js, I am not recommending Cloudflare Pages.
#nextjs #cloudflare #webhosting #cloudflarepages
As someone who wanted to test how well Cloudflare Pages supports Next.js, I was excited to see how it would compare to other hosting providers. However, the results were not what I was expecting. I faced several challenges in getting my app to build on Cloudflare Pages, including the limitations of the edge runtime support and the need to configure server-side routes as edge runtime routes.
This video details my challenges deploying a Next.js app to Cloudflare Pages. I also provide an in-depth look at Next.js feature support on Cloudflare Pages. Spoiler alert: Cloudflare pages are missing support for important Next.js features.
If you are a developer looking to host a Next.js application on Cloudflare Pages, this review will provide valuable insights into what to expect and how to overcome potential obstacles.
Blog Article Version: www.thetombomb.com/posts/next...
Cloudflare Pages Next.js Docs: developers.cloudflare.com/pag...
Vercel Edge Runtime: vercel.com/docs/functions/run...
Next.js Host Check App: github.com/thomas-desmond/hos...
Contact Me: www.thetombomb.com/posts/bio
00:00 Introduction & App Overview
01:11 Cloudflare Pages Next.js Deployment Docs
03:42 Initial Deployment to Cloudflare Pages
05:38 Frustrated Fixing The Broken Build
08:49 Successful Build...but still more changes are required
12:20 Finally testing Next.js Feature Support
13:18 Next.js Feature Support Results
16:16 Closing - Věda a technologie
You saved me hours if not days of frustration
Thank you!
I'm so happy I could help!
@@ThomasDoesDev You should do SST next :)
You are not the first to recommend SST. I briefly looked at it but hopefully I can again soon
Currently Cloudflare Pages is not a good place to deploy 'Server' Next.js - Edge still has many limitations compared to the backend. But the Cloudflare team is working hard, looking forward to it!
I really look forward to the improvements to Cloudflare Pages as I've used and like some of the other services they provide.
Are you a part of the team or know someone on the team. It would be great to get an inside eye on the improvements being made.
@ThomasDoesDev Haha, unfortunately not, I am just an ordinary user who likes Cloudlfare very much😄
I like it! I'll try to keep up with Next.js updates on Cloudflare Pages. If you hear anything, please reach out and I'll give it another go.
@josephgu3558 is the app router the way to go?
I just discovered Cloudflare Pages yesterday, made a static site, and got it working. However, now I know it won't support more complex websites without some sacrifices. Thanks for this video! :)
I'm glad the video was useful to you. I haven't tried Cloudflare Pages for pure static, but it's good to hear that it's working for you. If you make a full stack Next.js app in the future make sure to check out my other videos. So far I have videos on Vercel, AWS Amplify, and Azure Static Web Apps. Hoping to have more soon!
I had the same problem first. But now I know what to do it's okay. I deployed about 8 applications after that and they all work like a charm.
Happy to hear you figured it out and Cloudflare is working for you.
I got it working on next.js 14 and i did not have to put the edge run time on all the pages i just had to put it in the layout that the page is using.
does all the features of Nextjs worked , mainly middleware , SSR , server actions?
Interesting! Are you using the App Router architecture or Pages?
I would like to know too if you could make work the different features.
@@mikenieva any specific features you were interested in?
This was very helpful! Can you do one for Next.js 14?
Testing Next.js 14 is on the list of To-Do's. Not the highest priority right now. I want to test all providers first.
Feel free to clone the repo, upgrade to Next.js 14, and test Cloudflare Pages.
I did not find any proper documents for Coudflare deployment. Thanks for the Video ❤
You're welcome! I'm glad it was helpful.
so, is there any way for image optimisation using cf ? apart from using their cf images product?
Good question. I haven't used any other services besides the built in Next.js image optimization.
But I've heard of others using services like Cloudinary or imagekit. I think there are some open source alternatives as well.
Would you consider bunny optimizer? It cost way cheaper than cloudinary and other providers
I took a quick peek at bunny optimizer and you are correct the pricing is way cheaper. They offer a few other well prices services.
Netlify please
It's on the list! I can prioritize it because I have experience on Netlify. Should be an easier one to test.
Netlify video is out! czcams.com/video/ItyUwNVT1jI/video.html
I don't know why "Error: An error occurred while evaluating the target edge function (next-on-pages-dist/functions/search.func.js)" appeared when I was trying to deploy this demo. Do you know what might have caused it?
Thanks the the question.
Let's see so you are trying to deploy the nextjs-host-check repository to Cloudflare? Are you using the branch named "cloudflare"? It's unlikely that the main branch will deploy properly.
And the error you see is during the build phase? As in your application is never deployed because the build fails?
@@ThomasDoesDev Thank you for your response. I tried using the 'cloudflare' branch again, and it worked perfectly. I really appreciate your help!
Great! Glad to hear that worked.