Sphorb
Sphorb
  • 23
  • 57 420
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
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
Installing Custom Themes on Neovim
zhlédnutí 617Před 10 měsíci
Installing Custom Themes on Neovim
Fix Linux Suspend Immediately Wakes Up
zhlédnutí 1,8KPřed 10 měsíci
Fix Linux Suspend Immediately Wakes Up
Installing Nerd Fonts on Linux
zhlédnutí 17KPřed 11 měsíci
Installing Nerd Fonts on Linux
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

Komentáře

  • @codewrangler
    @codewrangler Před 12 dny

    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?

  • @aaronflorespasos3240
    @aaronflorespasos3240 Před 13 dny

    Your contet is great, my firts language is not English, so I practice and learn with interesting topics. Gracias 😁

    • @sphorb
      @sphorb Před 13 dny

      Lovely comment. Thanks!

  • @ashish99311
    @ashish99311 Před 15 dny

    this package cloudflare/next-onpages will work with NUXT 3 pages and SSR of NUXT3?

    • @sphorb
      @sphorb Před 14 dny

      For next the deployment process will be different I believe. They must have how it's done in their documentation

  • @iPuppyTech
    @iPuppyTech Před 15 dny

    Dude does it support ssr?

  • @mikelCold
    @mikelCold Před 15 dny

    Oh my god, this is incredible!

  • @csayantan
    @csayantan Před 19 dny

    can you explain how I can deploy Angular 18 with ssr/ssg configured with xata for data retrival on Cloudflare pages ?

  • @loopsbrother2903
    @loopsbrother2903 Před 22 dny

    thanks

  • @AbuAbdullah_IN
    @AbuAbdullah_IN Před 22 dny

    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

  • @swapnilpatel3337
    @swapnilpatel3337 Před 24 dny

    Vercel announce Next js 15 version 😅

  • @noahperez9631
    @noahperez9631 Před 25 dny

    yes leave the error

  • @aguud
    @aguud Před 29 dny

    nice video

  • @ryankenzo9946
    @ryankenzo9946 Před měsícem

    Cloudflare Turnstile with next js please do it

  • @ryankenzo9946
    @ryankenzo9946 Před měsícem

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

  • @SystemBee
    @SystemBee Před měsícem

    It worked perfectly with your help, thank you very much

  • @albertoprieto522
    @albertoprieto522 Před měsícem

    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

    • @sphorb
      @sphorb Před měsícem

      No worries at all, I hope it goes well! Good luck 🤞

  • @nardu
    @nardu Před měsícem

    Mine was slow because of the old @next/font after the upgrade. Luckily sorting this out was quick

  • @JackBrunsion
    @JackBrunsion Před měsícem

    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

  • @2029leandro
    @2029leandro Před měsícem

    Nice! I'd like to learn more stuff about Cloudflare and next js, Vercel's pricing is crazy

  • @agy112
    @agy112 Před měsícem

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

  • @linhanwang4937
    @linhanwang4937 Před měsícem

    Amazing! Thank you so much!

  • @laksjfalskfjl1kj234i1ojo
    @laksjfalskfjl1kj234i1ojo Před měsícem

    I'm getting the "Your Functions script is over the 1 MiB size limit" when deploying my app.

  • @MisterZizzy23
    @MisterZizzy23 Před měsícem

    Thank you bro ❤

    • @sphorb
      @sphorb Před měsícem

      Glad I could help!

  • @cangorkemgunes
    @cangorkemgunes Před měsícem

    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.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Před měsícem

    Love cloudflare and nextjs

  • @ifindev
    @ifindev Před měsícem

    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!

  • @wilbertdune
    @wilbertdune Před měsícem

    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.

  • @fitimbytyci345
    @fitimbytyci345 Před měsícem

    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?

  • @raves_r3177
    @raves_r3177 Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

      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

  • @MuhammadIbrahim-ng8je
    @MuhammadIbrahim-ng8je Před měsícem

    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.

  • @vaisakhkm783
    @vaisakhkm783 Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

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

    • @vaisakhkm783
      @vaisakhkm783 Před měsícem

      @@sphorb ho ok thanks

  • @neeshsamsi
    @neeshsamsi Před měsícem

    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 Před měsícem

      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 Před měsícem

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

    • @neeshsamsi
      @neeshsamsi Před měsícem

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

  • @PlayhouseMediaGroup
    @PlayhouseMediaGroup Před měsícem

    we need to see those errors, it gives a more realistic experience

    • @sphorb
      @sphorb Před měsícem

      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!👌

  • @rithik93
    @rithik93 Před měsícem

    project was actually good and ezpz waiting for some bigger project

    • @sphorb
      @sphorb Před měsícem

      Niceee😎😎

  • @rithik93
    @rithik93 Před měsícem

    mann cannot figure out what err i get while installing drizzle!

    • @sphorb
      @sphorb Před měsícem

      @rithik93 message me on twitter with the error I can help:)

    • @rithik93
      @rithik93 Před měsícem

      @@sphorb actually I did resolve it after 1 hour of googling and stuff but anyways thanks. I'm just a newbie uk nvm:)

    • @sphorb
      @sphorb Před měsícem

      Ahh nice one good job, that's the way to learn!👌

  • @0x-003
    @0x-003 Před měsícem

    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

    • @sphorb
      @sphorb Před měsícem

      Thank you for the feedback! I will try to make more of these!

  • @mel-182
    @mel-182 Před měsícem

    is this included in free tier?

    • @sphorb
      @sphorb Před měsícem

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

  • @rithik93
    @rithik93 Před měsícem

    Need more vids like this about serverless

  • @ustav_o
    @ustav_o Před měsícem

    legend🔥 please make more

    • @sphorb
      @sphorb Před měsícem

      Thank you man! Will do🫡

  • @otisrancko
    @otisrancko Před měsícem

    revalidatePath() is called in server actions not as you demonstrated....

    • @sphorb
      @sphorb Před měsícem

      Yep I learned it 30 seconds after that point😁 I use it correctly later on in video

    • @otisrancko
      @otisrancko Před měsícem

      @@sphorb Can you help me out with a project?

    • @sphorb
      @sphorb Před měsícem

      Sure! Message me on twitter

  • @SR-zi1pw
    @SR-zi1pw Před měsícem

    Does cloudfare support all vercel features?

    • @sphorb
      @sphorb Před měsícem

      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

    • @scotly_emi
      @scotly_emi Před měsícem

      Please can you find a way of using image I have an e-commerce website to deploy

    • @sphorb
      @sphorb Před měsícem

      @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

    • @scotly_emi
      @scotly_emi Před měsícem

      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

    • @sphorb
      @sphorb Před měsícem

      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!

  • @quangminhtran7592
    @quangminhtran7592 Před měsícem

    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?

    • @sphorb
      @sphorb Před měsícem

      Sorry which client side functions do you mean? I did use server actions 😁 I was able to deploy to Cloudflare successfully at the end

    • @quangminhtran7592
      @quangminhtran7592 Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

      No worries! Yes absolutely most npm packages and stuff should work as normal with the `node_compat` flag on Cloudflare 👌

  • @paarsaJam
    @paarsaJam Před měsícem

    Thanks for sharing such an important tutorial.

    • @sphorb
      @sphorb Před měsícem

      Thank you man! I appreciate it

  • @uhtfvtwsgtgf
    @uhtfvtwsgtgf Před měsícem

    not working for me using node 20.12 v

  • @Victor-dd7el
    @Victor-dd7el Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

      Will do! Something I'm researching at the moment

  • @LomasDelMaiten
    @LomasDelMaiten Před měsícem

    The best speed improvement that I recently found is to use the turbo mode. On the package json scripts use dev: next dev --turbo

    • @user-sq8gf9jq9j
      @user-sq8gf9jq9j Před měsícem

      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?

    • @sphorb
      @sphorb Před měsícem

      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

  • @alexanderclay5847
    @alexanderclay5847 Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

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

    • @samnmeje3486
      @samnmeje3486 Před měsícem

      what else would you like to learn about cloudflare ?

  • @user-ps6tt3kp7l
    @user-ps6tt3kp7l Před měsícem

    Thank you so very very much!!!

  • @harvey_04
    @harvey_04 Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

      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 Před měsícem

      @@sphorb anything for cloudware's bandwidth lol

  • @mikhacavin
    @mikhacavin Před měsícem

    cloudflare support SSR and RSC ?

    • @sphorb
      @sphorb Před měsícem

      Yes it does :)

    • @mikhacavin
      @mikhacavin Před měsícem

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

    • @sphorb
      @sphorb Před měsícem

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

    • @mikhacavin
      @mikhacavin Před měsícem

      @@sphorb 😂😂

    • @Victor-dd7el
      @Victor-dd7el Před měsícem

      @@sphorb how do they support SSR in next14?

  • @scotly_emi
    @scotly_emi Před měsícem

    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 Před měsícem

      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 Před měsícem

      Ye how to handle next image on cloudflare

    • @noahperez9631
      @noahperez9631 Před 25 dny

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