- 48
- 37 017
GiraffeReactor
United States
เข้าร่วมเมื่อ 23 ต.ค. 2023
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
☕ 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 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
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?
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
Thank you!!!!! it;s very helpful to me.
thank you for your service sir
@@furkankaracan2076 Thank you for your comment!
this video is underrated
@@HenokGebresenbet thanks for the comment!
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?
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
@@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?
@@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
That fixed it thanks! Excellent tutorial
@@nabiljara9626 thank you for the comment!
Nice!!
holy shems this is gold
@@zhenobiikuzo4957 appreciate the comment
Does this tutorial include password hashing?
@@stormbby880 yes timestamps are in the description 00:56:04 - Password Hashing (Argon2)
Just finished the tutorial, awesome work, thank you! Do you have any configurations for connecting to supabase instead of neon?
@@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)
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 :)
@@PierreAtman ahh I see good eye, funny how I never figured that out just rewrote it with a ternary xD
@@GiraffeReactor as long as it works :D thanks again for the video, i learned a lot :)
@@PierreAtman appreciate it means a lot that I can help at least one person
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 :)
a. local postgres server with prisma b. start with auth js -> that's why we're watching the tutorial.
Nextjs is shit framework
One of worst tutorials ever. Why should I watch you smashing your keyboard for 9 hours?
Nice work. Lets continue in the same manner... But you've to dive deeper in the db transactions principle.
What would you like to see?
@@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 :)
Have you ever found a way to fix the button issue without reloading the full page?!
@@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
still the same 2 errors after restarting the react app in 34:40 !, anyone could help please?
i solve it by removing the proxy key and value from package.json and user cors in the backend it much better
@@nadjibm7 yeah I will be using cors in version 2 of this tutorial, good job on fixing the issue!
Whats the name of that font
for my vs code? I believe I used cascadia code for the next.js app I believe it's Inter
K
great
@@rezwanulhaque9935 thank you for the comment
I was able to finally get rid of flickering and also learned a new way for implementing themes, Thank you!
@@SheriffKoder9 appreciate the comment, glad it was helpful!
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
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
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.
@@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.
I can't believe youtube is recommending me such high quality bloggers, I'm following you decisively!
Thank you for the comment!
@@GiraffeReactor Such long videos are really great, I've been watching continuously for four hours, although I'm really sleepy 😁
100% wonderful project!!!!!!!!!! It is the fourth day to follow coding!!!! The last chapter now.. so happy!!!!!!!!!!!!!!
drizzle-kit push works better than drizzle-kit generate then drizzle-kit migrate IMO
@@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
@@GiraffeReactor Did not think about that. Noted
@@kennedymungai1 yeah I learned about it when using prisma, if its just a personal project i say just drizzle-kit push all the way
Hello, I hope I got the audio situation figured out please let me know 😅
what happened with your hair.. .. ^_^
@@yixie-hu2jm needed a reset haha, realized I'm zoomed way to in on my face
@@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
@@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
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
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.
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.
Appreciate the comment does help me want to make more, have some ideas but currently low on time~!
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
me too, haven't found a fix for it yet
6:00:56 - coffee break ☕
Thank You!
Great Work, would love your thoughts on removing third party Auth (Google/Github etc) and replacing with Passkeys in a Next Js SaaS application?
I just deployed my app and it's live on render. Thanks bro
Good stuff, thanks for watching
@@GiraffeReactor but it seems render can be very slow at loading web apps, am gonna try Vercel hosting and see the difference
Thank you just what I needed, you're so kinde!
@@engelbertteh552 😂 thanks for the comment!
I got a "Syntax error:syntax error at or near" when I tried to run "SELECT * FROM customers:" any suggestions?
It should be a semicolon ; not a colon :
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
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
nice tut, subscribed! just a quick question, why did you specify or downgrade your Node version on deployment??
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
@@GiraffeReactor Alright thanks
Sir please more projects your style of teaching is superbeb. Projects like E-commerce
Thank you for the comment, Im working on more videos slowly!
Wow... awesome video.
@@mohamedyoussef8835 thank you!
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.
@@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
@@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.
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.
@@sanjanaj6542 thank you ^^ slowly working on a 2024 version of this course feel free to check it out when it comes out
Love the stack, thanks for sharing. Your audio is only coming out thru the left. I would suggest using a better mic next time.
@@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
@@GiraffeReactor all good homie. Could still hear you just fine in one ear😁
wow..! great video
@@kushaltanna5569 thanks appreciate the comment!
@@GiraffeReactor hey bro you made my day thanks bro love you
The big problem with this Authjs is facebook provider doesn't work
@@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
works for me
Thank you for this course on Next.js & Auth. It helped me to better understand the dynamics of authentication within Next.js.
@@SSECA appreciate the comment!