![Sphorb](/img/default-banner.jpg)
- 23
- 57 420
Sphorb
Registrace 2. 02. 2023
Helping you build cool things and become a better engineer!
Next Js 14 Mini Course | Build and Deploy Fullstack Application on Cloudflare with Turso Database
In this short course, I show you how you can build a simple Fullstack Next Js app using Turso database, server actions and host it on Cloudflare.
I encountered a bunch of errors throughout this course but I decided to keep them and not gloss over them or hide them to showcase anything you might encounter and how to go about fixing them.
I hope you found this helpful. If you would like me to cover any topic, just drop it in my comments and I'll be sure to have a look :)
Follow me on twitter!: sphorbio
__________________________________________________
TimeStamps:
0:00 - Introduction
0:52 - Setting Up Fresh Next Js Project
2:03 - Shadcn Setup & Frontend Components
5:35 - Create Turso Database
7:22 - Drizzle Setup & Creating Tables
15:00 - Adding Server Actions & Logic
26:37 - Deplying Application on Cloudflare
35:10 - Outro
__________________________________________________
Docs:
shadcn: ui.shadcn.com/docs/installation/next
drizzle: orm.drizzle.team/learn/tutorials/drizzle-with-turso
I encountered a bunch of errors throughout this course but I decided to keep them and not gloss over them or hide them to showcase anything you might encounter and how to go about fixing them.
I hope you found this helpful. If you would like me to cover any topic, just drop it in my comments and I'll be sure to have a look :)
Follow me on twitter!: sphorbio
__________________________________________________
TimeStamps:
0:00 - Introduction
0:52 - Setting Up Fresh Next Js Project
2:03 - Shadcn Setup & Frontend Components
5:35 - Create Turso Database
7:22 - Drizzle Setup & Creating Tables
15:00 - Adding Server Actions & Logic
26:37 - Deplying Application on Cloudflare
35:10 - Outro
__________________________________________________
Docs:
shadcn: ui.shadcn.com/docs/installation/next
drizzle: orm.drizzle.team/learn/tutorials/drizzle-with-turso
zhlédnutí: 2 476
Video
Deploy Next Js on Cloudflare
zhlédnutí 7KPřed měsícem
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 jou...
PlanetScale to Turso With Drizzle ORM in Next Js
zhlédnutí 340Před 2 měsíci
Since planetscale got rid of their hobby tier, I show you how to migrate your project to Turso, a really good alternative to planetscale in Next Js using Drizzle ORM. Turso Documentation: docs.turso.tech/quickstart Drizzle Turso Documentation: orm.drizzle.team/learn/tutorials/drizzle-with-turso Follow my journey on Twitter: sphorbio My SaaS: generatejobdescription.com
Next Js 14 PlanetScale Drizzle Integration for Authentication on Edge Runtime
zhlédnutí 4,1KPřed 6 měsíci
I show you how to implement drizzle adapter for next js authentication. I also show you how to create your database in planetscale and connect that with your application. See my previous video showing authentication implementation with Auth V5: czcams.com/video/rEopVx0FKGI/video.htmlsi=mJNy7F3IaCuGDwxq sphorbio Source Code: github.com/sphorb/next-js-planetscale-drizzle-integration 0...
Next Js 14 Authentication on Edge Runtime
zhlédnutí 13KPřed 6 měsíci
Database Integration Video Available Now: czcams.com/video/7COYRqixUxU/video.htmlsi=1H10mRCpRi1s26Af I show you how to implement authentication in next js that is compatible for the edge runtime. Currently the next-auth package does not offer this so a lot of people have to use clerk that does offer it. However, in the new update that's in beta, next-auth will be compatible for the edge runtime...
LeetCode in Python Over JavaScript (As A Web Developer)
zhlédnutí 360Před 7 měsíci
I recently started learning leetcode with JavaScript to learn data structures and algorithms. However very soon into my journey, I switched to Python and in this video I discuss the reasons why I made the switch. Timestamps: 01:07 - 1st Reason 03:59 - 2nd Reason 05:16 - 3rd Reason 06:00 - 4th Reason 07:25 - Final Thoughts sphorbio
12 Months in Software Development Changed My Life
zhlédnutí 1,1KPřed 7 měsíci
In this video I go through my journey of learning how to code and getting a software engineer job without a Computer Science degree. What side projects I worked on. How I got first job. My portfolio that I used to apply for software engineer jobs. sphorbio 00:00 - Introduction 00:37 - My background 02:00 - My Plan to Get a Job 02:55 - Applying to Jobs 04:24 - Showcasing Portfolio & ...
Simple Fix Long Page Compile Times When You Upgrade To Next Js 14
zhlédnutí 2,5KPřed 7 měsíci
I recently upgraded to next js 14 for my side porject. But my page compile times locally were extremely slow taking longer than 11 seconds 12 seconds. I upgraded my node version to fix this and thought I might share it incase it fixes it for other people as well. Maybe its just a problem with the upgrade itself and theyll fix it in future updates. But hope it helps you :D
Authentication Setup In Next Js 13+ Using Firebase
zhlédnutí 475Před 8 měsíci
This video is a guide to show how to implmenet authentication in next js using the next-auth package and firebase to implement signing in with google.
Be Careful With Your Image Links In Next Js
zhlédnutí 667Před 8 měsíci
Recently I found out that if you dont properly define your image urls in your next js application, it can be exploited to do damage to your website. I share the correct way to define image domains in your next js application.
3 Things To Consider Before Using Bun 1.0 As A Beginner
zhlédnutí 2KPřed 9 měsíci
Bun 1.0 release has gotten a lot of hype recently and for the right reasons. A lot beginners might see this in the tech space and may want to try it. I share some concerns they should think through before picking up Bun in their tech stack.
Build An Accordion | React Components Made Easy
zhlédnutí 124Před 9 měsíci
Super fast tutorial to show you how to build a customisable custom accordion component for a react application. Sorry for the misspelling of accordion throughout the video. I only learned its an O not an A while I was editing.
Build a Toast Message | React Components Made Easy
zhlédnutí 1,9KPřed 9 měsíci
super fast tutorial on how to create your own toast message component in react using HTML CSS and regular javascript react hooks. Not using any library like react-toastify or react-hot-toast. You have full control over your component and it's good to have knowledge on how to build this component yourself.
Build a Tooltip | React Components Made Easy
zhlédnutí 305Před 9 měsíci
In this video I show you how to create a react tooltip component that you can use anywhere in your project. This component doesn't use any library and built using only HTML and CSS.
Build a Modal | React Components Made Easy
zhlédnutí 611Před 10 měsíci
Creating modals in react has become really easy now since the HTML Dialog element update. Now you dont need to use any fancy third party library or Nested Divs to have functional modals.
3 VS Code Shortcuts That Turn Beginners Into Professionals
zhlédnutí 81Před 10 měsíci
3 VS Code Shortcuts That Turn Beginners Into Professionals
Fix Linux Suspend Immediately Wakes Up
zhlédnutí 1,8KPřed 10 měsíci
Fix Linux Suspend Immediately Wakes Up
Learning Zig | Creating A Window (1.1)
zhlédnutí 105Před 11 měsíci
Learning Zig | Creating A Window (1.1)
Learning Zig | Creating A Window (1.0)
zhlédnutí 372Před 11 měsíci
Learning Zig | Creating A Window (1.0)
Desktop App With Electron React | Personal Project (1)
zhlédnutí 328Před 11 měsíci
Desktop App With Electron React | Personal Project (1)
Installing Zig Using Snap Package Manager On WSL2 Ubuntu
zhlédnutí 549Před rokem
Installing Zig Using Snap Package Manager On WSL2 Ubuntu
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: czcams.com/video/Ouny4LKe3UM/video.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 ?