Sphorb
Sphorb
  • Видео 23
  • Просмотров 65 497
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 Dat...
Просмотров: 2 954

Видео

Deploy Next Js on Cloudflare
Просмотров 10 тыс.3 месяца назад
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
Просмотров 3983 месяца назад
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
Просмотров 4,2 тыс.7 месяцев назад
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: ruclips.net/video/rEopVx0FKGI/видео.htmlsi=mJNy7F3IaCuGDwxq sphorbio Source Code: github.com/sphorb/next-js-planetscale-drizzle-integration ...
Next Js 14 Authentication on Edge Runtime
Просмотров 13 тыс.8 месяцев назад
Database Integration Video Available Now: ruclips.net/video/7COYRqixUxU/видео.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 runtim...
LeetCode in Python Over JavaScript (As A Web Developer)
Просмотров 3628 месяцев назад
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
Просмотров 1,2 тыс.8 месяцев назад
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
Просмотров 3,1 тыс.8 месяцев назад
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
Просмотров 4799 месяцев назад
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
Просмотров 67510 месяцев назад
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
Просмотров 2 тыс.10 месяцев назад
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
Просмотров 13610 месяцев назад
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
Просмотров 2,2 тыс.10 месяцев назад
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
Просмотров 35511 месяцев назад
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
Просмотров 64711 месяцев назад
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
Просмотров 8311 месяцев назад
3 VS Code Shortcuts That Turn Beginners Into Professionals
Installing Custom Themes on Neovim
Просмотров 73611 месяцев назад
Installing Custom Themes on Neovim
Fix Linux Suspend Immediately Wakes Up
Просмотров 2,2 тыс.Год назад
Fix Linux Suspend Immediately Wakes Up
Installing Nerd Fonts on Linux
Просмотров 19 тыс.Год назад
Installing Nerd Fonts on Linux
Learning Zig | Creating A Window (1.1)
Просмотров 113Год назад
Learning Zig | Creating A Window (1.1)
Learning Zig | Creating A Window (1.0)
Просмотров 423Год назад
Learning Zig | Creating A Window (1.0)
Desktop App With Electron React | Personal Project (1)
Просмотров 345Год назад
Desktop App With Electron React | Personal Project (1)
Installing Zig Using Snap Package Manager On WSL2 Ubuntu
Просмотров 630Год назад
Installing Zig Using Snap Package Manager On WSL2 Ubuntu

Комментарии

  • @elvisc
    @elvisc День назад

    Do they support api route handlers?

    • @sphorb
      @sphorb День назад

      Yes they do

  • @inkon48
    @inkon48 2 дня назад

    great❤

  • @Rakiraa
    @Rakiraa 10 дней назад

    Really useful tutorial! Thanks!

    • @sphorb
      @sphorb 10 дней назад

      Thank you! Glad I could help

  • @xerogear
    @xerogear 10 дней назад

    Great video! Easy to follow even for a linux noob like myself.

  • @Milo_1010_
    @Milo_1010_ 11 дней назад

    could you do a more common prod project as a blog with dynamic routes and export static files from build to cloudflare cdn with next 14 ? it would be awesome

  • @Pepenator-creator
    @Pepenator-creator 14 дней назад

    pure gold! thanks mate!

    • @sphorb
      @sphorb 14 дней назад

      Glad I could help!

  • @gobeksalata
    @gobeksalata 15 дней назад

    nice content, quick question: what extension is that in vscode you can pop-up vim like commands (q enter to close etc)

    • @sphorb
      @sphorb 15 дней назад

      Thanks! It's the neovim VSCode plugin that allows you to use VIM bindings in your editor

  • @priyanshsrivastava554
    @priyanshsrivastava554 22 дня назад

    what about file hosting on cloudflare using next js and speed of downloading content

  • @samueldelmar5237
    @samueldelmar5237 23 дня назад

    excellent content bro, thanks

  • @pablom8854
    @pablom8854 29 дней назад

    same issue..downgraded from 21 to 20.15 (lts) but didn't work

  • @mwolf84
    @mwolf84 Месяц назад

    Cloudflare is way faster than vercel. Saw a noticeable speed difference after switching.

  • @shahipapon833
    @shahipapon833 Месяц назад

    I have never seen in my life like this tutorial. Really Its a great tutorial over the time. Thanks a lot.

  • @view
    @view Месяц назад

    Wow!! So I just found your video, ranking near the top, on deploying Next.js on Cloudflare while searching "cloudflare r2 nextjs." I loved the tutorial and your other videos after noticing the quality content. I had to subscribe haha! When you mentioned creating the project for a convention you volunteer at yearly, that made me relate and after seeing "AIMS ID", it confirmed what you were talking about lol. Great feeling to discover you and your channel in such a way! Wishing you all the best and rooting for you ❤

  • @view
    @view Месяц назад

    Great video

  • @RexonLacaba
    @RexonLacaba Месяц назад

    helps a lot! thanks!

  • @claytonbennett7797
    @claytonbennett7797 Месяц назад

    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?

  • @codewrangler
    @codewrangler Месяц назад

    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 Месяц назад

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

    • @sphorb
      @sphorb Месяц назад

      Lovely comment. Thanks!

  • @ashish99311
    @ashish99311 Месяц назад

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

    • @sphorb
      @sphorb Месяц назад

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

  • @iPuppyTech
    @iPuppyTech Месяц назад

    Dude does it support ssr?

  • @mikelCold
    @mikelCold Месяц назад

    Oh my god, this is incredible!

  • @csayantan
    @csayantan 2 месяца назад

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

  • @loopsbrother2903
    @loopsbrother2903 2 месяца назад

    thanks

  • @AbuAbdullah_IN
    @AbuAbdullah_IN 2 месяца назад

    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 2 месяца назад

    Vercel announce Next js 15 version 😅

  • @noahperez9631
    @noahperez9631 2 месяца назад

    yes leave the error

  • @aguud
    @aguud 2 месяца назад

    nice video

  • @ryankenzo9946
    @ryankenzo9946 2 месяца назад

    Cloudflare Turnstile with next js please do it

  • @ryankenzo9946
    @ryankenzo9946 2 месяца назад

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

  • @SystemBee
    @SystemBee 2 месяца назад

    It worked perfectly with your help, thank you very much

  • @albertoprieto522
    @albertoprieto522 2 месяца назад

    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 2 месяца назад

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

  • @nardu
    @nardu 2 месяца назад

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

  • @JackBrunsion
    @JackBrunsion 2 месяца назад

    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 2 месяца назад

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

  • @agy112
    @agy112 2 месяца назад

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

  • @linhanwang4937
    @linhanwang4937 2 месяца назад

    Amazing! Thank you so much!

  • @laksjfalskfjl1kj234i1ojo
    @laksjfalskfjl1kj234i1ojo 2 месяца назад

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

  • @MisterZizzy23
    @MisterZizzy23 2 месяца назад

    Thank you bro ❤

    • @sphorb
      @sphorb 2 месяца назад

      Glad I could help!

  • @cangorkemgunes
    @cangorkemgunes 2 месяца назад

    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 2 месяца назад

    Love cloudflare and nextjs

  • @ifindev
    @ifindev 2 месяца назад

    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 2 месяца назад

    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 2 месяца назад

    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 2 месяца назад

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

    • @sphorb
      @sphorb 2 месяца назад

      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

  • @MuhammadIbrahim-ng8je
    @MuhammadIbrahim-ng8je 2 месяца назад

    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 2 месяца назад

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

    • @sphorb
      @sphorb 2 месяца назад

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

    • @vaisakhkm783
      @vaisakhkm783 2 месяца назад

      @@sphorb ho ok thanks

  • @neeshsamsi
    @neeshsamsi 3 месяца назад

    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 3 месяца назад

      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 3 месяца назад

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

    • @neeshsamsi
      @neeshsamsi 3 месяца назад

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

  • @PlayhouseMediaGroup
    @PlayhouseMediaGroup 3 месяца назад

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

    • @sphorb
      @sphorb 3 месяца назад

      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 3 месяца назад

    project was actually good and ezpz waiting for some bigger project

    • @sphorb
      @sphorb 3 месяца назад

      Niceee😎😎

  • @rithik93
    @rithik93 3 месяца назад

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

    • @sphorb
      @sphorb 3 месяца назад

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

    • @rithik93
      @rithik93 3 месяца назад

      @@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 3 месяца назад

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