GiraffeReactor
GiraffeReactor
  • Видео 48
  • Просмотров 35 292
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 ...
Просмотров: 269

Видео

Auth.js (Next Auth) V5 (2024) with Next.js, Tailwind, DrizzleORM, NeonDB | Full Tutorial
Просмотров 9 тыс.2 месяца назад
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)
Просмотров 1613 месяца назад
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)
Просмотров 2923 месяца назад
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)
Просмотров 1993 месяца назад
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)
Просмотров 9284 месяца назад
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
Просмотров 524 месяца назад
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
Просмотров 1225 месяцев назад
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
Просмотров 1105 месяцев назад
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
Просмотров 425 месяцев назад
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
Просмотров 795 месяцев назад
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
Просмотров 995 месяцев назад
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)
Просмотров 395 месяцев назад
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
Просмотров 515 месяцев назад
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:
Просмотров 365 месяцев назад
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
Просмотров 775 месяцев назад
Next.js App Router Course Walkthrough | Chapter 7: Fetching Data
Next.js App Router Course Walkthrough | Chapter 6: Setting Up Your Database
Просмотров 2085 месяцев назад
Next.js App Router Course Walkthrough | Chapter 6: Setting Up Your Database
Next.js App Router Course Walkthrough | Chapter 5: Navigating Between Pages
Просмотров 415 месяцев назад
Next.js App Router Course Walkthrough | Chapter 5: Navigating Between Pages
Next.js App Router Course Walkthrough | Chapter 4: Creating Layouts and Pages
Просмотров 465 месяцев назад
Next.js App Router Course Walkthrough | Chapter 4: Creating Layouts and Pages
Next.js App Router Course Walkthrough | Chapter 3: Optimizing Fonts and Images
Просмотров 465 месяцев назад
Next.js App Router Course Walkthrough | Chapter 3: Optimizing Fonts and Images
Next.js App Router Course Walkthrough | Chapter 2: CSS Styling
Просмотров 705 месяцев назад
Next.js App Router Course Walkthrough | Chapter 2: CSS Styling
Next.js App Router Course Walkthrough | Chapter 1: Getting Started
Просмотров 2205 месяцев назад
Next.js App Router Course Walkthrough | Chapter 1: Getting Started
React/NEXT Forms: 21 Techniques
Просмотров 1436 месяцев назад
React/NEXT Forms: 21 Techniques
React Forms (Nextjs + TypeScript) | react-hook-form with Zod Validation Form | Part 20
Просмотров 566 месяцев назад
React Forms (Nextjs TypeScript) | react-hook-form with Zod Validation Form | Part 20
React Forms (Nextjs + TypeScript) | react-hook-form Form | Part 19
Просмотров 426 месяцев назад
React Forms (Nextjs TypeScript) | react-hook-form Form | Part 19
React Forms (Nextjs + TypeScript) | URL Redirect Form | Part 18
Просмотров 306 месяцев назад
React Forms (Nextjs TypeScript) | URL Redirect Form | Part 18
React Forms (Nextjs + TypeScript) | Server Params Form | Part 17
Просмотров 306 месяцев назад
React Forms (Nextjs TypeScript) | Server Params Form | Part 17
React Forms (Nextjs + TypeScript) | Server Actions with Validations Form | Part 16
Просмотров 256 месяцев назад
React Forms (Nextjs TypeScript) | Server Actions with Validations Form | Part 16
React Forms (Nextjs + TypeScript) | Server Actions Form | Part 15
Просмотров 326 месяцев назад
React Forms (Nextjs TypeScript) | Server Actions Form | Part 15
React Forms (Nextjs + TypeScript) | Route Handler Form| Part 14
Просмотров 456 месяцев назад
React Forms (Nextjs TypeScript) | Route Handler Form| Part 14