GiraffeReactor
GiraffeReactor
  • 48
  • 37 017
Next.js Multiple Themes Tutorial | Light, Dark, and Neon Mode (with Next.js, Tailwind, TypeScript)
Connect with me on LinkedIn: www.linkedin.com/in/khurram-ali1
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/giraffereactor
Github Repo: github.com/giraffereactor/yt-nextjs-multiple-themes
Welcome to a tutorial on multiple themes in next.js.
🚀 Tutorial Highlights:
- Creating light, dark, and neon modes with Tailwind CSS
- Storing the theme in local storage for persistent user preferences
- Creating a custom React hook for theme management
- Preventing theme flicker during website loading
Technologies Covered (all 100% free services):
🚀 Next.js + TypeScript
💨 Tailwind
📚 TypeScript
🕓 Timestamps:
00:00:00 - Demo
01:00 - PART 1: Setting up multiple themes
21:15 - PART 2: Creating a custom hook to save theme in local storage
29:35 - PART 3: Removing flicker on page load with next-themes
🔗 References:
Add Variants in Tailwindcss - tailwindcss.com/docs/plugins#adding-variants
next-themes - github.com/pacocoursey/next-themes/tree/main
Check out my Poetry Book: a.co/d/54CDa0u
#NextJS #TypeScript #TailwindCSS #typescript #themes #react #hooks
มุมมอง: 335

วีดีโอ

Auth.js (Next Auth) V5 (2024) with Next.js, Tailwind, DrizzleORM, NeonDB | Full Tutorial
มุมมอง 10K3 หลายเดือนก่อน
Connect with me on LinkedIn: www.linkedin.com/in/khurram-ali1 ☕ Buy Me A Coffee ➜ www.buymeacoffee.com/giraffereactor Github Repo: github.com/giraffereactor/yt-authjs-v5 Welcome to a tutorial on building an authentication system using Auth.js V5 (next-auth) with Next.js, TypeScript, and Tailwind CSS. In this 9 hour video, we cover everything from client-side user authentication to server-side c...
Kinde Auth Tutorial | Deploying to Vercel with Kinde Auth (with Next.js, Neon.tech, Postgres)
มุมมอง 1744 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Find out how to deploy your Kinde Auth project to Vercel using Next.js, Neon.tech, and Postgres. Github Repo: github.com/giraffereactor/yt-kindeauth-webhook #KindeAuth #Vercel #NextJS #NeonTech #Postgres #WebDevelopment #Tutorial
Kinde Auth Tutorial | Creating Webhooks with Kinde Auth (with Next.js, Neon.tech, Postgres)
มุมมอง 3054 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Discover how to create webhooks with Kinde Auth using Next.js, Neon.tech, and Postgres in this comprehensive guide. Github Repo: github.com/giraffereactor/yt-kindeauth-webhook #KindeAuth #Webhooks #NextJS #NeonTech #Postgres #WebDevelopment #Tutorial
Kinde Auth Tutorial | Setting up Kinde Auth (with Next.js, Neon.tech, Postgres)
มุมมอง 2204 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Learn how to set up Kinde Auth with Next.js, Neon.tech, and Postgres in this step-by-step tutorial. Github Repo: github.com/giraffereactor/yt-kindeauth-setup #KindeAuth #NextJS #NeonTech #Postgres #WebDevelopment #Tutorial
Next.js App Router Course Full Walkthrough (ACME Dashboard)
มุมมอง 9875 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ ☕ Buy Me A Coffee ➜ www.buymeacoffee.com/giraffer... Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js Timestam...
Next.js App Router Course Walkthrough | Chapter 16: Adding Metadata
มุมมอง 705 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 15: Adding Authentication
มุมมอง 1345 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 14: Improving Acessibility
มุมมอง 1215 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 13: Handling Errors
มุมมอง 465 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 12: Mutating Data
มุมมอง 875 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 11: Adding Search and Pagination
มุมมอง 1155 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 10: Partial Prerendering (Optional)
มุมมอง 525 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 9: Streaming
มุมมอง 615 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 8:
มุมมอง 435 หลายเดือนก่อน
Connect with me here: LinkedIn Profile: www.linkedin.com/in/khurram-ali1/ Official Tutorial: nextjs.org/learn/dashboard-app Hello, in this series I will walkthrough Next.js official App Router Course. In this application we will build a financial dashboard application showcasing the best practices and unique capabilities with Next.js #reactjs #nextjs #walkthrough #tutorial #typescript #tailwind...
Next.js App Router Course Walkthrough | Chapter 7: Fetching Data
มุมมอง 1045 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 7: Fetching Data
Next.js App Router Course Walkthrough | Chapter 6: Setting Up Your Database
มุมมอง 2705 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 6: Setting Up Your Database
Next.js App Router Course Walkthrough | Chapter 5: Navigating Between Pages
มุมมอง 555 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 5: Navigating Between Pages
Next.js App Router Course Walkthrough | Chapter 4: Creating Layouts and Pages
มุมมอง 675 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 4: Creating Layouts and Pages
Next.js App Router Course Walkthrough | Chapter 3: Optimizing Fonts and Images
มุมมอง 705 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 3: Optimizing Fonts and Images
Next.js App Router Course Walkthrough | Chapter 2: CSS Styling
มุมมอง 915 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 2: CSS Styling
Next.js App Router Course Walkthrough | Chapter 1: Getting Started
มุมมอง 2725 หลายเดือนก่อน
Next.js App Router Course Walkthrough | Chapter 1: Getting Started
React/NEXT Forms: 21 Techniques
มุมมอง 1467 หลายเดือนก่อน
React/NEXT Forms: 21 Techniques
React Forms (Nextjs + TypeScript) | react-hook-form with Zod Validation Form | Part 20
มุมมอง 567 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | react-hook-form with Zod Validation Form | Part 20
React Forms (Nextjs + TypeScript) | react-hook-form Form | Part 19
มุมมอง 427 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | react-hook-form Form | Part 19
React Forms (Nextjs + TypeScript) | URL Redirect Form | Part 18
มุมมอง 317 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | URL Redirect Form | Part 18
React Forms (Nextjs + TypeScript) | Server Params Form | Part 17
มุมมอง 317 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | Server Params Form | Part 17
React Forms (Nextjs + TypeScript) | Server Actions with Validations Form | Part 16
มุมมอง 257 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | Server Actions with Validations Form | Part 16
React Forms (Nextjs + TypeScript) | Server Actions Form | Part 15
มุมมอง 337 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | Server Actions Form | Part 15
React Forms (Nextjs + TypeScript) | Route Handler Form| Part 14
มุมมอง 457 หลายเดือนก่อน
React Forms (Nextjs TypeScript) | Route Handler Form| Part 14

ความคิดเห็น

  • @Jacob-od8rl
    @Jacob-od8rl 19 ชั่วโมงที่ผ่านมา

    This is the content is one of the best content ever seen. !!! 10 out of 10.!! I got 2 questions. 1: what's the name of the extension or settings when you type a code there are guide you to comment "session is possibly null or undefined" ? - if it's "Error Lens", could you share the settings? or how to enable/disable showing "null | undefined" error? 2. What's the name of extension when you type console.log then show the result beside?

    • @GiraffeReactor
      @GiraffeReactor 52 นาทีที่ผ่านมา

      Hello, thanks for the comment! 1. it is error lens, i dont think i set up any custom settings for it 2. second one is called console ninja, unfortunately the free version doesnt work with the newest version of next.js which sucks because i really like the extension

  • @오수진-f2e
    @오수진-f2e 15 วันที่ผ่านมา

    Thank you!!!!! it;s very helpful to me.

  • @furkankaracan2076
    @furkankaracan2076 18 วันที่ผ่านมา

    thank you for your service sir

    • @GiraffeReactor
      @GiraffeReactor 18 วันที่ผ่านมา

      @@furkankaracan2076 Thank you for your comment!

  • @HenokGebresenbet
    @HenokGebresenbet 18 วันที่ผ่านมา

    this video is underrated

    • @GiraffeReactor
      @GiraffeReactor 18 วันที่ผ่านมา

      @@HenokGebresenbet thanks for the comment!

  • @nabiljara9626
    @nabiljara9626 24 วันที่ผ่านมา

    I have an error in the auth-core-d.ts file line 5 that says: Type 'AdapterUser' recursively references itself as a base type.ts How could I fix it?

    • @GiraffeReactor
      @GiraffeReactor 24 วันที่ผ่านมา

      Try to use same versions of my next-auth and authcore Try to remove the extends default adapter user part Try to use same version of my nextjs Hopefully one of these works, all source code is in the description of the video

    • @nabiljara9626
      @nabiljara9626 24 วันที่ผ่านมา

      @@GiraffeReactor I tried changing the versions but it didn't work. How would the code look if I removed the extends default adapter user part?

    • @GiraffeReactor
      @GiraffeReactor 24 วันที่ผ่านมา

      @@nabiljara9626 import type { AdapterUser as DefaultAdapterUser } from "@auth/core/adapters"; import { users } from "@/drizzle/schema"; declare module "@auth/core/adapters" { export interface AdapterUser { role: (typeof users.$inferSelect)["role"]; } } If that doesn't work just do a // @ts-ignore and move on so you don't get stuck on it

    • @nabiljara9626
      @nabiljara9626 24 วันที่ผ่านมา

      That fixed it thanks! Excellent tutorial

    • @GiraffeReactor
      @GiraffeReactor 24 วันที่ผ่านมา

      @@nabiljara9626 thank you for the comment!

  • @udumizisolomon5009
    @udumizisolomon5009 24 วันที่ผ่านมา

    Nice!!

  • @zhenobiikuzo4957
    @zhenobiikuzo4957 25 วันที่ผ่านมา

    holy shems this is gold

    • @GiraffeReactor
      @GiraffeReactor 25 วันที่ผ่านมา

      @@zhenobiikuzo4957 appreciate the comment

  • @stormbby880
    @stormbby880 26 วันที่ผ่านมา

    Does this tutorial include password hashing?

    • @GiraffeReactor
      @GiraffeReactor 26 วันที่ผ่านมา

      @@stormbby880 yes timestamps are in the description 00:56:04 - Password Hashing (Argon2)

    • @stormbby880
      @stormbby880 18 วันที่ผ่านมา

      Just finished the tutorial, awesome work, thank you! Do you have any configurations for connecting to supabase instead of neon?

    • @GiraffeReactor
      @GiraffeReactor 18 วันที่ผ่านมา

      @@stormbby880 yeah you can simply use supabase as a connection string to a postgres database there's also a guide to using it with drizzle from postgres itself supabase.com/docs/guides/database/drizzle I am unsure how it works with the RLS (row level security)

  • @PierreAtman
    @PierreAtman 28 วันที่ผ่านมา

    Great video ! at 6:14:21, i guess it doesn't work because you typed "insertData.role === USER_ROLES.ADMIN" instead of "insertData.role = USER_ROLES.ADMIN", i guess the first return false :)

    • @GiraffeReactor
      @GiraffeReactor 28 วันที่ผ่านมา

      @@PierreAtman ahh I see good eye, funny how I never figured that out just rewrote it with a ternary xD

    • @PierreAtman
      @PierreAtman 28 วันที่ผ่านมา

      ​@@GiraffeReactor as long as it works :D thanks again for the video, i learned a lot :)

    • @GiraffeReactor
      @GiraffeReactor 27 วันที่ผ่านมา

      @@PierreAtman appreciate it means a lot that I can help at least one person

  • @PierreAtman
    @PierreAtman 28 วันที่ผ่านมา

    Great video ! at 6:14:21, i guess it doesn't work because you typed "insertData.role === USER_ROLES.ADMIN" instead of "insertData.role = USER_ROLES.ADMIN", i guess the first return false :)

  • @AlexanderMoyer-k3b
    @AlexanderMoyer-k3b 29 วันที่ผ่านมา

    a. local postgres server with prisma b. start with auth js -> that's why we're watching the tutorial.

  • @CyrilUrban-nw8vd
    @CyrilUrban-nw8vd 29 วันที่ผ่านมา

    Nextjs is shit framework

  • @pavelk9152
    @pavelk9152 29 วันที่ผ่านมา

    One of worst tutorials ever. Why should I watch you smashing your keyboard for 9 hours?

  • @alexandervasilenko7773
    @alexandervasilenko7773 หลายเดือนก่อน

    Nice work. Lets continue in the same manner... But you've to dive deeper in the db transactions principle.

    • @GiraffeReactor
      @GiraffeReactor 24 วันที่ผ่านมา

      What would you like to see?

    • @alexandervasilenko7773
      @alexandervasilenko7773 24 วันที่ผ่านมา

      @@GiraffeReactor When you trying to execute several queries (select, update...) to the db it should be less dangerous to execute all of them in one transaction. Just an experience - nothing else, bro :)

  • @codernerd7076
    @codernerd7076 หลายเดือนก่อน

    Have you ever found a way to fix the button issue without reloading the full page?!

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@codernerd7076 nope, you can try the built in signIn, signOut functions from import { signIn, signOut } from "next-auth/react those might give you better luck but then you'll be using them directly in your client component honestly though I see no problem with a full page change, it also helps guarantee no user info is left over from the previous login

  • @nadjibm7
    @nadjibm7 หลายเดือนก่อน

    still the same 2 errors after restarting the react app in 34:40 !, anyone could help please?

    • @nadjibm7
      @nadjibm7 หลายเดือนก่อน

      i solve it by removing the proxy key and value from package.json and user cors in the backend it much better

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@nadjibm7 yeah I will be using cors in version 2 of this tutorial, good job on fixing the issue!

  • @jeremiahgd1924
    @jeremiahgd1924 หลายเดือนก่อน

    Whats the name of that font

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      for my vs code? I believe I used cascadia code for the next.js app I believe it's Inter

    • @corpsedad7368
      @corpsedad7368 หลายเดือนก่อน

      K

  • @rezwanulhaque9935
    @rezwanulhaque9935 หลายเดือนก่อน

    great

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@rezwanulhaque9935 thank you for the comment

  • @SheriffKoder9
    @SheriffKoder9 หลายเดือนก่อน

    I was able to finally get rid of flickering and also learned a new way for implementing themes, Thank you!

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@SheriffKoder9 appreciate the comment, glad it was helpful!

  • @morganalex1930
    @morganalex1930 หลายเดือนก่อน

    Good day @GirraffeReactor . I just completed the tutorial. I really liked you teaching methods, and I really appreciate the content. I completed the tutorial successfully, everything works fine. but i did come across a slight issue. I noticed after deleting an account for the databases. and try creating a new account with the same email, I have problems verifying the account. the mail is sent, the token is in the mail and in the verifiedToken table. but the users does not get updated with the new date. and it only happens with emails that have been used to create an account before, but has been deleted from the database. Apart from that, everything works flawlessly. Thank you again for the video

  • @Ritzeeeee
    @Ritzeeeee หลายเดือนก่อน

    To anyone who is making this, this has only one database which is not created for each user separately, so the todo list becomes shared. Keep that in mind while making this. This is a good tutorial for clearing your coding concepts but if the todo app is not personalised then what is the benefit

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      You're correct, it can still be used as a showcase for a portfolio. I did not add auth or personalized users to keep the tutorial less complex but I do plan on making videos in the future with authentication.

    • @Ritzeeeee
      @Ritzeeeee หลายเดือนก่อน

      @@GiraffeReactor Sir, if you are reading this, I would like to thank you from the bottom of my heart, for making such a good MERN intro video. If you can bring some other projects in the same format (which is live coding, debugging on the go) such as Blog app, Ecommerce website,etc it will blow up very hard as there is a big gap on youtube. Please do consider this opinion.

  • @shinuy-yk2mv
    @shinuy-yk2mv หลายเดือนก่อน

    I can't believe youtube is recommending me such high quality bloggers, I'm following you decisively!

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      Thank you for the comment!

    • @shinuy-yk2mv
      @shinuy-yk2mv หลายเดือนก่อน

      @@GiraffeReactor Such long videos are really great, I've been watching continuously for four hours, although I'm really sleepy 😁

  • @yixie-hu2jm
    @yixie-hu2jm หลายเดือนก่อน

    100% wonderful project!!!!!!!!!! It is the fourth day to follow coding!!!! The last chapter now.. so happy!!!!!!!!!!!!!!

  • @kennedymungai1
    @kennedymungai1 หลายเดือนก่อน

    drizzle-kit push works better than drizzle-kit generate then drizzle-kit migrate IMO

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@kennedymungai1 I probably should have used drizzle-kit push for this specific tutorial since it's not about drizzle But I think they serve two different purposes, drizzle-kit push just pushes your database changes for quick prototyping, but drizzle-kit generate and drizzle-git migrate gives you an SQL file which you can use to migrate without drizzle in the future

    • @kennedymungai1
      @kennedymungai1 หลายเดือนก่อน

      @@GiraffeReactor Did not think about that. Noted

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@kennedymungai1 yeah I learned about it when using prisma, if its just a personal project i say just drizzle-kit push all the way

  • @GiraffeReactor
    @GiraffeReactor หลายเดือนก่อน

    Hello, I hope I got the audio situation figured out please let me know 😅

  • @yixie-hu2jm
    @yixie-hu2jm หลายเดือนก่อน

    what happened with your hair.. .. ^_^

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@yixie-hu2jm needed a reset haha, realized I'm zoomed way to in on my face

    • @yixie-hu2jm
      @yixie-hu2jm หลายเดือนก่อน

      @@GiraffeReactor btw... your video about next-auth is so perfect.... I have follow your video two days and learned a lot. hope you publish a whole project about next15. best wishes

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      @@yixie-hu2jm thank you for the comment I plan on doing some smaller next.js projects in the future

  • @张仕祺
    @张仕祺 หลายเดือนก่อน

    that's a pretty nice video,i am looking for this tutorial

  • @corpsedad7368
    @corpsedad7368 หลายเดือนก่อน

    I want to know something can the roles be implemented here i dont know how to implement roles like one admin , user and other roles if i want for general manager or any other from the super admin type. I know its complex but hope please make a short video to include that please

    • @GiraffeReactor
      @GiraffeReactor หลายเดือนก่อน

      I cover roles at 01:08:15 - Drizzle Schema Setup 05:46:03 - PART 6: User Roles (USER vs ADMIN) i only use two roles in this tutorial user and admin the process to add a third role like moderator or something is exactly the same as adding a 2nd role like I did with admin, if I have time I will make another video covering three roles.

  • @SpiceDune
    @SpiceDune 2 หลายเดือนก่อน

    This is one of the best tutorials. I love the approach. Everything is well thought out, which makes it easy to understand, not just copy-paste like other tutorials. Also loved how you broked down each part into sub parts. Would love to see more tutorials from you.

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      Appreciate the comment does help me want to make more, have some ideas but currently low on time~!

  • @enes6223
    @enes6223 2 หลายเดือนก่อน

    i get errors after i wrote npm i @vercel/postgres. They are like : npm warn ERESOLVE overriding peer dependency npm warn While resolving: agent-base@6.0.2 npm warn Found: peer eslint-plugin-react@"^7.11.0" from eslint-config-airbnb@17.1.0 npm warn node_modules/.pnpm/agent-base@6.0.2/node_modules/agent-base/node_modules/eslint-config-airbnb npm warn dev eslint-config-airbnb@"17.1.0" from agent-base@6.0.2 npm warn node_modules/.pnpm/agent-base@6.0.2/node_modules/agent-base npm warn npm warn Could not resolve dependency: npm warn peer eslint-plugin-react@"^7.11.0" from eslint-config-airbnb@17.1.0 npm warn node_modules/.pnpm/agent-base@6.0.2/node_modules/agent-base/node_modules/eslint-config-airbnb npm warn dev eslint-config-airbnb@"17.1.0" from agent-base@6.0.2 npm warn node_modules/.pnpm/agent-base@6.0.2/node_modules/agent-base

    • @tagmos6011
      @tagmos6011 หลายเดือนก่อน

      me too, haven't found a fix for it yet

  • @martinriedl1505
    @martinriedl1505 2 หลายเดือนก่อน

    6:00:56 - coffee break ☕

  • @bhavyachadha
    @bhavyachadha 2 หลายเดือนก่อน

    Thank You!

  • @nelco63
    @nelco63 2 หลายเดือนก่อน

    Great Work, would love your thoughts on removing third party Auth (Google/Github etc) and replacing with Passkeys in a Next Js SaaS application?

  • @ZakariAdamu714
    @ZakariAdamu714 2 หลายเดือนก่อน

    I just deployed my app and it's live on render. Thanks bro

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      Good stuff, thanks for watching

    • @zakariadamu9345
      @zakariadamu9345 2 หลายเดือนก่อน

      @@GiraffeReactor but it seems render can be very slow at loading web apps, am gonna try Vercel hosting and see the difference

  • @engelbertteh552
    @engelbertteh552 2 หลายเดือนก่อน

    Thank you just what I needed, you're so kinde!

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      @@engelbertteh552 😂 thanks for the comment!

  • @Hoangnguyen-fy9px
    @Hoangnguyen-fy9px 2 หลายเดือนก่อน

    I got a "Syntax error:syntax error at or near" when I tried to run "SELECT * FROM customers:" any suggestions?

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      It should be a semicolon ; not a colon :

  • @cubeunicorn4055
    @cubeunicorn4055 2 หลายเดือนก่อน

    Great video Nice work or dividing in multiple parts bur my issue is i don't want to create the first part so if you can provide the code according to part by part is will be very easy to work with please provide this one thanks

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      I understand, I should have prepared that better in advance I have a very similar repo that has part 1, part 2, part 3, part 4, part 5 in different git branches so you can look there github > destocot > authjs-practice-070804

  • @Pure_Islamic_Teachings
    @Pure_Islamic_Teachings 2 หลายเดือนก่อน

    nice tut, subscribed! just a quick question, why did you specify or downgrade your Node version on deployment??

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      Thank you for the comment, its been a while so I dont really remember but I think it had something to do with MongoDB issues in deployment it might not be necessary now not sure

    • @Pure_Islamic_Teachings
      @Pure_Islamic_Teachings 2 หลายเดือนก่อน

      @@GiraffeReactor Alright thanks

  • @nanatahirhammond1400
    @nanatahirhammond1400 2 หลายเดือนก่อน

    Sir please more projects your style of teaching is superbeb. Projects like E-commerce

    • @GiraffeReactor
      @GiraffeReactor 2 หลายเดือนก่อน

      Thank you for the comment, Im working on more videos slowly!

  • @mohamedyoussef8835
    @mohamedyoussef8835 3 หลายเดือนก่อน

    Wow... awesome video.

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@mohamedyoussef8835 thank you!

  • @thecoder1631
    @thecoder1631 3 หลายเดือนก่อน

    just came across your channel, definitely want to try the new auth, this would be perfect video. audio has bit of problem but i think you're aware of it :) thank you for putting so much effort into this. cheers.

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@thecoder1631 hey thanks for the comment, yeah definitely know about the Audio TT, considered remaking it or dubbing over it but it took me quite a while to make it not sure if it's worth it, just wanted to provide a free resource + the repo for everyone to view

    • @thecoder1631
      @thecoder1631 3 หลายเดือนก่อน

      @@GiraffeReactor nah i think that would be too much work, should put that energy and time into making another project or something :) maybe new ai tools can help you with audio ? not sure just guessing.

  • @sanjanaj6542
    @sanjanaj6542 3 หลายเดือนก่อน

    This was one of the best tutorials I've come across after months. I tried my hand at a few projects but they were so poorly explained I couldn't learn much. The simplicity of this is what made it great. This was really helpful, Thank You.

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@sanjanaj6542 thank you ^^ slowly working on a 2024 version of this course feel free to check it out when it comes out

  • @yoJuicy
    @yoJuicy 3 หลายเดือนก่อน

    Love the stack, thanks for sharing. Your audio is only coming out thru the left. I would suggest using a better mic next time.

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@yoJuicy I know! I'm so upset 😭 I think my webcam mic was enabled instead of my regular mic I'll be sure to triple check everything next time

    • @yoJuicy
      @yoJuicy 3 หลายเดือนก่อน

      @@GiraffeReactor all good homie. Could still hear you just fine in one ear😁

  • @kushaltanna5569
    @kushaltanna5569 3 หลายเดือนก่อน

    wow..! great video

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@kushaltanna5569 thanks appreciate the comment!

    • @zatakzataks
      @zatakzataks 2 หลายเดือนก่อน

      @@GiraffeReactor hey bro you made my day thanks bro love you

  • @alexdin1565
    @alexdin1565 3 หลายเดือนก่อน

    The big problem with this Authjs is facebook provider doesn't work

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@alexdin1565 I've never worked with the Facebook provider but I want to for a future personal project so maybe I'll take a look

    • @martinriedl1505
      @martinriedl1505 2 หลายเดือนก่อน

      works for me

  • @SSECA
    @SSECA 3 หลายเดือนก่อน

    Thank you for this course on Next.js & Auth. It helped me to better understand the dynamics of authentication within Next.js.

    • @GiraffeReactor
      @GiraffeReactor 3 หลายเดือนก่อน

      @@SSECA appreciate the comment!