Build Tour Guide in Next.js 15 and React.js | react-joyride

In this tutorial, you will learn how to build a customizable tour guide in next.js 15 using react-joyride package. It will be fully customizable that you can customize colors, styles, layout, enable or disable any elements and can add media files as well. I will also show you different built in props in the packages and how to add custom code to detect steps number within tour guide by using different state variables. You can follow along with this in next.js or react projects.

00:05 Demo
04:58 Create new next.js 15 project
05:49 Install react joyride package
07:07 Add start stop tour guide state variables
09:18 Add start tour guide button
12:20 import react joyride functions
14:25 Add tour guide state variables
15:20 Generate tour steps hooks
21:35 Render Joyride component
27:12 Add content within tour window
28:50 Customize styles
32:50 Add step 2 tour window
40:00 Update default button contents
44:00 Add step 3 and step 4 window
46:45 Detect progress and restart tour guide

#next15 #tourguide #react-joyride #nextjs #reactjs

Useful Links:
https://www.npmjs.com/package/react-j...
https://docs.react-joyride.com/props
https://codesandbox.io/p/devbox/githu...

Follow Whatsapp Channel:
https://whatsapp.com/channel/0029Va7y...

React tutorials:
   • React.js Tutorials  

JavaScript Tutorials and Projects:
   • JavaScript Tutorial and Projects  

Angular Tutorials:
   • Angular 16 Life Cycle Hooks - Explain...  

Docker Tutorials & CI/CD:
   • Docker Tutorials & CI/CD  

Angular 16 Crash Course For Beginners:
   • Angular 16 Crash Course  

Tech Tutorials - Random:
   • Postman Tutorial - Testing APIs and B...  

Complete Next.js 13 Tutorials:    • Next.js 13 Tutorials - App Directory  

Next.js 14 Tutorials:
   • Next.js 14 Tutorials - App Directory  

Node Express MongoDB Bootcamp:    • Build REST API with Node Express MongoDB  

ChatGPT Tutorials:    • ChatGPT  

Join our facebook group:
  / 996305460498149  

Github Repo (Give it a Star):
https://github.com/umairjameel321/rea...

Contact us for development services:
  / umair-jameel-24aa5368