Max Programming
Max Programming
  • 171
  • 465 410
How to use Drizzle ORM in Next.js App Router | Explained with project
Hello, my friends and fellow developers!
In this video, we cover how you can set up and use Drizzle ORM with Next.js App Router also utilising react server components & server actions! We understand by an example of a contact form.
Let me know in the comments below if you want more Next.js & Drizzle ORM content or something else.
Links mentioned in the video:
Drizzle Docs: orm.drizzle.team/docs/overview
Next.js Server Actions: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
GitHub Repo: github.com/max-programming/drizzle-nextjs
reCAPTCHA v3 video: ua-cam.com/video/w-EbCTxI47o/v-deo.html
00:00 - Intro
00:15 - Project starter walkthrough
01:33 - Install Drizzle & SQLite dependencies
02:50 - Drizzle config file
04:54 - Creating a table
06:48 - Generating and running migrations
09:22 - Connecting to the DB
10:10 - Contact form server action
13:58 - Fetching responses from DB
14:59 - Use types from drizzle
15:32 - Add more responses
15:44 - Delete response server action
17:14 - Fixing error using bind method
18:18 - Test the project
18:48 - Conclusion
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: ua-cam.com/video/J8_hwKSeffY/v-deo.html
Connect 🔗 :
Twitter: MaxProgramming1
Facebook: Max-Programming-103081931147293
Github: github.com/max-programming/
VS Code Theme used: Default Dark Modern
Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!
#nextjs #reactjs #programming
Переглядів: 699

Відео

How To Use Google reCAPTCHA v3 in Next.js 14 With Server Actions?
Переглядів 1,5 тис.28 днів тому
Hello, my friends and fellow developers! In this video, we cover how you can use Google's reCAPTCHA v3 in your Next.js 14 project and how you can use it with server actions! I also explained how it works behind the scenes and we don't use any external library for this use-case Let me know in the comments below if you want more Next.js content or something else. Links mentioned in the video: Git...
Build A Responsive Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS
Переглядів 12 тис.5 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can build a Responsive Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS! This is the continuation of the previous video on how to build a sidebar using Next.js and shadcn/ui Previous video: ua-cam.com/video/-vD8DAEEEWE/v-deo.html Let me know in the comments below if you want more Next.js content or s...
Build A Twitter Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS
Переглядів 9 тис.6 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can build a Twitter Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS! Let me know in the comments below if you want more Next.js content or something else. GitHub Repo: github.com/max-programming/shadcn-sidebar Next part: ua-cam.com/video/FYBC3TjRULo/v-deo.html Timestamps: 00:00 - Intro & Sidebar Dem...
Learn Search Params in Next.js 14 by building a project! React | Tailwind | shadcn/ui
Переглядів 4,7 тис.6 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can use query search params effectively in the Next.js 14 app router by building a little project! We also use Tailwind CSS, shadcn/ui, and TypeScript! Let me know in the comments below if you want more Next.js content or something else. 🔗 Links in the video Source Code: github.com/max-programming/shadcn-tabs-query Shadcn ...
You probably don't know these 5 TypeScript utility types
Переглядів 2767 місяців тому
Hello, my friends and fellow developers! In this video, we cover the top 5 rare but incredibly useful utility types in TypeScript! Let me know in the comments below if you want more TypeScript content or something else. TypeScript Utility types docs: www.typescriptlang.org/docs/handbook/utility-types.html Timestamps: 0:00 - Introduction 0:43 - Parameters 1:44 - ReturnType 2:25 - Awaited 3:06 - ...
All you need to know about Hacktoberfest 2023 | No T-Shirt 😱 ?
Переглядів 5 тис.11 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can participate in Hacktoberfest and contribute to open source! We will get into the details of Hacktoberfest and what is different this time... Let me know in the comments below if you want more open-source content or something else. Hacktoberfest is DigitalOcean’s annual event that encourages people to contribute to open...
How to use Credentials Authentication in Next.js with NextAuth?
Переглядів 16 тис.Рік тому
How to use Credentials Authentication in Next.js with NextAuth?
Adding Todos - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 726Рік тому
Adding Todos - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Learn How to Use Local Storage in React With an Easy-to-Understand Example
Переглядів 4,3 тис.Рік тому
Learn How to Use Local Storage in React With an Easy-to-Understand Example
The Coolest VS Code Cursor Effect You Don't Want to Miss!
Переглядів 3,4 тис.Рік тому
The Coolest VS Code Cursor Effect You Don't Want to Miss!
Home Page Build - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 842Рік тому
Home Page Build - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Demo & Setup - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 1,2 тис.Рік тому
Demo & Setup - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Animations with HTML, CSS and LottieFiles - You Won't Believe How EASY it is!
Переглядів 9 тис.Рік тому
Animations with HTML, CSS and LottieFiles - You Won't Believe How EASY it is!
How to build a Contact Form in Node.js and Google Sheets?
Переглядів 6 тис.Рік тому
How to build a Contact Form in Node.js and Google Sheets?
Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks
Переглядів 9 тис.Рік тому
Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks
Learn how to use TypeScript with Node and Express - updated for 2023
Переглядів 879Рік тому
Learn how to use TypeScript with Node and Express - updated for 2023
Master Generics with TypeScript: A Easy-to-Understand Example
Переглядів 142Рік тому
Master Generics with TypeScript: A Easy-to-Understand Example
How to set up your own website analytics with Umami? | Open Source | Self Hosted
Переглядів 3 тис.2 роки тому
How to set up your own website analytics with Umami? | Open Source | Self Hosted
How to use Mongoose with Next.js for MongoDB | Explained with simple project
Переглядів 29 тис.2 роки тому
How to use Mongoose with Next.js for MongoDB | Explained with simple project
Sort imports using Prettier in a JavaScript Project inside VS Code!
Переглядів 4,1 тис.2 роки тому
Sort imports using Prettier in a JavaScript Project inside VS Code!
How to convert a normal React form to use React Hook Form
Переглядів 3082 роки тому
How to convert a normal React form to use React Hook Form
How to build a Random Quote Generator | Part 1 - The Design
Переглядів 2982 роки тому
How to build a Random Quote Generator | Part 1 - The Design
How to make pull request for Hacktoberfest 2021 on GitHub | Open Source | Hacktoberfest
Переглядів 1,3 тис.2 роки тому
How to make pull request for Hacktoberfest 2021 on GitHub | Open Source | Hacktoberfest
What is Hacktoberfest 2021 and how to participate?
Переглядів 7442 роки тому
What is Hacktoberfest 2021 and how to participate?
Build & Deploy a Number Fact Discord Bot using Node.js and Heroku | Node.js | Rapid API
Переглядів 2,1 тис.2 роки тому
Build & Deploy a Number Fact Discord Bot using Node.js and Heroku | Node.js | Rapid API
How to make a Next.js app a PWA with offline support | Progressive Web App
Переглядів 16 тис.3 роки тому
How to make a Next.js app a PWA with offline support | Progressive Web App
How to add SEO to your Next.js app
Переглядів 8 тис.3 роки тому
How to add SEO to your Next.js app
Build & Deploy a YouTube thumbnail fetcher app with React & TypeScript Part 2 | Vite | Tailwind CSS
Переглядів 6823 роки тому
Build & Deploy a UA-cam thumbnail fetcher app with React & TypeScript Part 2 | Vite | Tailwind CSS
Build & Deploy a YouTube thumbnail fetcher app with React & TypeScript Part 1 | Vite | Tailwind CSS
Переглядів 8993 роки тому
Build & Deploy a UA-cam thumbnail fetcher app with React & TypeScript Part 1 | Vite | Tailwind CSS

КОМЕНТАРІ

  • @DN-ui3bd
    @DN-ui3bd 3 дні тому

    Doesn't this script connection block the main thread?

    • @MaxProgramming
      @MaxProgramming 3 дні тому

      I don't think they necessarilty block the main thread but they're the first priority. And this script we're adding should load before the page hence we added the `beforeInteractive` strategy nextjs.org/docs/app/api-reference/components/script#beforeinteractive

  • @mickeykadimov7128
    @mickeykadimov7128 4 дні тому

    Nicely done and well explained brother I've built it in my app! I would love to see prisma & providers & credentials with Next-Auth. Here's a challenge for you 🤝🤝

    • @MaxProgramming
      @MaxProgramming 4 дні тому

      @@mickeykadimov7128 Thanks for the idea. I do have a video on next auth and credentials provider but that was with pages router. Maybe I'll make an updated one for app router ua-cam.com/video/fqXC2V-MSV4/v-deo.html

  • @ZahmPlays
    @ZahmPlays 6 днів тому

    a comment just to support ur great work <3

  • @uniwebr
    @uniwebr 9 днів тому

    Thanks for the video👌I was able to setup Drizzle ORM in my Next JS project. Drizzle has 2 methods to connect to MySQL. 1. single client connection (await mysql.createConnection) 2. pool (mysql.createPool) I was unable to use single client connection method due to the error "await is only valid in async functions and the top level bodies of modules". So I couldn't use "await mysql.createConnection" method in index.ts file. what worked for me is pool method (mysql.createPool) in index.ts

    • @MaxProgramming
      @MaxProgramming 9 днів тому

      Here's a solution if you want to use createConnection: 1̶. I̶n̶ y̶o̶u̶r̶ t̶s̶c̶o̶n̶f̶i̶g̶.j̶s̶o̶n̶, s̶e̶t̶ "t̶a̶r̶g̶e̶t̶" t̶o̶ "e̶s̶2̶0̶1̶7̶", "m̶o̶d̶u̶l̶e̶" t̶o̶ "e̶s̶n̶e̶x̶t̶" a̶n̶d̶ "a̶l̶l̶o̶w̶I̶m̶p̶o̶r̶t̶i̶n̶g̶T̶s̶E̶x̶t̶e̶n̶s̶i̶o̶n̶s̶" t̶o̶ t̶r̶u̶e̶ 2̶. R̶e̶n̶a̶m̶e̶ "i̶n̶d̶e̶x̶.t̶s̶" t̶o̶ "d̶b̶.m̶t̶s̶" 3̶. W̶h̶e̶r̶e̶v̶e̶r̶ y̶o̶u̶ h̶a̶v̶e̶ i̶m̶p̶o̶r̶t̶ {̶ d̶b̶ }̶ f̶r̶o̶m̶ "@̶/d̶b̶", m̶a̶k̶e̶ t̶h̶a̶t̶ i̶m̶p̶o̶r̶t̶ {̶ d̶b̶ }̶ f̶r̶o̶m̶ "@̶/d̶b̶/d̶b̶.m̶t̶s̶" M̶T̶S̶ (̶E̶S̶ M̶o̶d̶u̶l̶e̶ T̶S̶)̶ f̶i̶l̶e̶s̶ c̶a̶n̶ u̶s̶e̶ t̶o̶p̶-̶l̶e̶v̶e̶l̶ a̶w̶a̶i̶t̶ a̶n̶d̶ w̶e̶ s̶i̶m̶p̶l̶y̶ c̶h̶a̶n̶g̶e̶ o̶u̶r̶ T̶S̶ f̶i̶l̶e̶ t̶o̶ a̶n̶ M̶T̶S̶ f̶i̶l̶e̶ 1. In your tsconfig.json, set "target" to "es2017" and "module" to "esnext" 2. Make sure the Next.js version is higher than 13.4.5 3. Restart the dev server, if it errors out, delete the .next folder and then restart the dev server

    • @uniwebr
      @uniwebr 9 днів тому

      @@MaxProgramming thanks so much for the solution. I did exactly as you said, but getting this error Build Error Failed to compile Module parse failed: Unexpected token (3:73) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. again thanks so much for your time bro!

    • @MaxProgramming
      @MaxProgramming 9 днів тому

      @@uniwebr Can you restart your server once? And does your nextjs config have anything extra like webpack config?

    • @MaxProgramming
      @MaxProgramming 9 днів тому

      @@uniwebr I updated the above solution. No need to use any MTS files as Next.js already supports top-level await

    • @uniwebr
      @uniwebr 9 днів тому

      ​@@MaxProgramming thanks for the response! I did exactly as your updated solution, and deleted the .next folder, restarted VSCode, restarted dev server but I'm getting the following error Unhandled Runtime Error Error: await is only valid in async functions and the top level bodies of modules thanks for your time bro, I'm trying to find a solution to this. If I find a solution, I will add a comment here.

  • @hiddenworld8280
    @hiddenworld8280 10 днів тому

    Easy, to the point tutorial with a standarized implementation. Loved it :)

  • @davidolufemi9247
    @davidolufemi9247 11 днів тому

    Make this into an extension

    • @MaxProgramming
      @MaxProgramming 11 днів тому

      Maybe VS Code Extension API doesn't allow so much... That's why you need to add a manual css file in VS Code

  • @benbaker9931
    @benbaker9931 13 днів тому

    Excellent guide - thank you. This approach really helped to roll-in Recaptcha as a supportive utility within form submissions processes through server actions.

    • @MaxProgramming
      @MaxProgramming 13 днів тому

      Yea server actions are definitely a big advantage for this approach

  • @user-hc7og6ej4k
    @user-hc7og6ej4k 17 днів тому

    Thanks so much. Do you have a more in depth vid of offline support with next js ? Or even documentation would help.

    • @MaxProgramming
      @MaxProgramming 17 днів тому

      @@user-hc7og6ej4k With the app router I don't have a video. But I'll make one soon. Thanks for the idea ✌️

  • @codearenaofficial
    @codearenaofficial 22 дні тому

    Well Explained, usman!

  • @alessandro_carta
    @alessandro_carta 23 дні тому

    Instructive video, you explain very well, thanks

  • @YSGTV-ht2se
    @YSGTV-ht2se 23 дні тому

    Big up bro😊. Abdulrafiu here 😊

  • @KevinNewcombe
    @KevinNewcombe 23 дні тому

    This was great! Very concise and easy to follow along with.

  • @ridloghifary3041
    @ridloghifary3041 24 дні тому

    looks easy with your tutorial, thanks...

  • @muhammadwaqar1610
    @muhammadwaqar1610 26 днів тому

    It's the biggest hack like let suppose you miss this thing instead use this one but concept is empty for this one.

    • @MaxProgramming
      @MaxProgramming 26 днів тому

      Can you clarify what you mean by "concept was empty" and what you think is wrong with the video?

  • @canProg
    @canProg 26 днів тому

    Thank you

  • @mohammedgazi786
    @mohammedgazi786 27 днів тому

    👍🏻

  • @mohammedgazi786
    @mohammedgazi786 27 днів тому

    👍🏻

  • @boriskoslowski7176
    @boriskoslowski7176 28 днів тому

    You missed a semicolon

    • @MaxProgramming
      @MaxProgramming 28 днів тому

      @@boriskoslowski7176 I left it for prettier 😉

  • @pranupranav5563
    @pranupranav5563 28 днів тому

    Thanks buddy. I missed it in my search api.😂 Will patch it😂

    • @pranupranav5563
      @pranupranav5563 28 днів тому

      Buddy you still working??🔥

    • @MaxProgramming
      @MaxProgramming 28 днів тому

      @pranupranav5563 Takes just a second to acknowledge the comment. Thanks for commenting 🙂

  • @rickmotta
    @rickmotta 29 днів тому

    Nice, straight forward explanation 👍🏼

  • @lyricon4043
    @lyricon4043 Місяць тому

    thanks man.. it works

  • @trithiennguyen7400
    @trithiennguyen7400 Місяць тому

    Thanks a lot lot. Great content and code

  • @user-rr7fu4lq9k
    @user-rr7fu4lq9k Місяць тому

    Nice explanations! Easy to understand Thank you😆

  • @neoswann2143
    @neoswann2143 Місяць тому

    Did anyone experience layout shifts and scroll issues when implementing this? When I use it to switch tabs on my settings page and let's say I scrolled b4 searchParams finished updating, It causes my layout UI to shift and and hides the top part of the layout. I think it's related more to the tabs components maybe tho....

    • @MaxProgramming
      @MaxProgramming Місяць тому

      You're right. The layout shift does happen when navigating from one tab to another. I guess that happens because the page gets re-rendered (as we navigate with Link component to modify the search params) Not sure what could possibly be the solution. But if I find one, I'll reply Thanks for pointing this out!

  • @dragos.cojocaru
    @dragos.cojocaru Місяць тому

    Hey, Can you tell me the extension name that adds vertical color to the opening and closing tags?

    • @MaxProgramming
      @MaxProgramming Місяць тому

      @@dragos.cojocaru It's called Indent Rainbow. And there are more palettes in other extension called "Indent Rainbow Palettes"

    • @dragos.cojocaru
      @dragos.cojocaru Місяць тому

      @@MaxProgramming thanks

  • @DiogoGraciano-y7q
    @DiogoGraciano-y7q Місяць тому

    how to integrate with teams?

    • @MaxProgramming
      @MaxProgramming Місяць тому

      It's very similar to discord and there are a few minor changes... learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook?tabs=newteams%2Cjavascript

  • @meka4996
    @meka4996 Місяць тому

    Why didn't you use TailwindCss to make the SidebarDesktop responsive: className="hidden sm:block" ?

    • @MaxProgramming
      @MaxProgramming Місяць тому

      There was a particular reason I don't remember now. Maybe you try making it work without that hook

  • @meka4996
    @meka4996 Місяць тому

    You are the Man! Thanks!

  • @Mary-k2p
    @Mary-k2p 2 місяці тому

    Just found your channel. You explain things so well, really! Kudos. I'll watch your other videos. I subscribe to this. Thank you.

    • @MaxProgramming
      @MaxProgramming 2 місяці тому

      @@Mary-k2p Thank you for your kind words

    • @Mary-k2p
      @Mary-k2p 2 місяці тому

      @@MaxProgramming You're welcome. Please don't stop making videos like this; explaining concepts practically.

  • @AbdulSalam-iq1yf
    @AbdulSalam-iq1yf 2 місяці тому

    The video i was searching for that.

  • @dreamsachiever212
    @dreamsachiever212 2 місяці тому

    thanks. been racking my brain for 2 days about convenient way to implement this

  • @jasmeetkaur-py6pi
    @jasmeetkaur-py6pi 2 місяці тому

    Amazing video! thank you!

  • @zorancepuran1374
    @zorancepuran1374 2 місяці тому

    Very nice tutorial with clean and professional presentation. Keep up the good work. Thank you.

  • @DerellPigram
    @DerellPigram 2 місяці тому

    Short and sweet. Love it.

  • @yourfellowyoungcoder
    @yourfellowyoungcoder 2 місяці тому

    thanks

  • @jmcabc
    @jmcabc 3 місяці тому

    great vid

  • @biniyamd4709
    @biniyamd4709 3 місяці тому

    Can I have your VS code setting.json file. Looks amazing

    • @MaxProgramming
      @MaxProgramming 2 місяці тому

      Hey Biniyam! I'm glad you liked the VS Code setup. I'm afraid I can't share the entire settings.json file as there's a ton of useless/old settings there so it's huge and mostly filled with useless settings. But feel free to ask for any settings and I'll help you out with that

  • @MaxProgramming
    @MaxProgramming 3 місяці тому

    Sorry for the bad audio quality on this one. For some reason, OBS Studio did not pick up my microphone and I did not realise that this entire stream

  • @nayana622
    @nayana622 3 місяці тому

    Thanks for the great video! Your explanation was super clear and really helped me. Looking forward to more content like this! 🙌

  • @lautaro17
    @lautaro17 3 місяці тому

    Great video ! Which font do you use ?

  • @malikgenius4u
    @malikgenius4u 3 місяці тому

    Can you please use shadcn Command component for search, its awesome but commandlist / dropdown pushes other objects down on the page .. i dont know how to avoid that.

    • @MaxProgramming
      @MaxProgramming 3 місяці тому

      I'll investigate what you're facing and possibly make a video on it

  • @amaryadav8703
    @amaryadav8703 3 місяці тому

    Top quality video, informative and succinct!

  • @ViashimaGerald-cg5wr
    @ViashimaGerald-cg5wr 3 місяці тому

    nice

  • @jmcabc
    @jmcabc 3 місяці тому

    quality code practice - I learned a lot - thank you.

  • @jersonarmijo3241
    @jersonarmijo3241 3 місяці тому

    A pesar de la diferencia de idioma se entiende muy bien, muchas gracias

    • @MaxProgramming
      @MaxProgramming 3 місяці тому

      Gracias por sus amables palabras. Me alegro que sea fácil de entender.

  • @UnitedCodManServices
    @UnitedCodManServices 3 місяці тому

    Hey buddy could u help me lol Brillant video Very understanding

    • @MaxProgramming
      @MaxProgramming 3 місяці тому

      Yeah. What help are you looking for?

    • @UnitedCodManServices
      @UnitedCodManServices 3 місяці тому

      @@MaxProgramming let me explain. i have a website and discord and would like to receive notifications when a customer buy some think from my website or click the BUY button is that possible to make a simple webhook please but i dont know how?

    • @MaxProgramming
      @MaxProgramming 3 місяці тому

      @@UnitedCodManServices A webhook is a simple Rest API URL where you can send a POST request to call it. In the video, I mentioned how I did it for my website, you can do it similarly for yours 🙂

  • @akashjena2002
    @akashjena2002 3 місяці тому

    Thank you brother 🫡🙇

  • @mitchellejohnlight
    @mitchellejohnlight 3 місяці тому

    What if I want a notification that says copied once I have clicked the copy icon

    • @MaxProgramming
      @MaxProgramming 3 місяці тому

      There are different ways to show a notification. You can show a toast message with react-hot-toast or some popover etc. It's as simple as writing the code for showing the notification right after the copy() function

    • @mitchellejohnlight
      @mitchellejohnlight 3 місяці тому

      @@MaxProgramming thank you. This helped. I used the react toast

  • @canitbeapplied2500
    @canitbeapplied2500 4 місяці тому

    Very useful video, thank you for taking the time to make it.

  • @alexiizz1222
    @alexiizz1222 4 місяці тому

    👏👏👏