Next.js Discord

Discord Forum

Integrating an Onboarding Tour in a Next.js 14 App

Unanswered
nik posted this in #help-forum
Open in Discord
nikOP
Hey
I aim to create an interactive and user-friendly onboarding tour for a Next.js 14 application. The tour should pop up when a user logs in for the first time and should be easily dismissible so that it doesn't hinder the user experience for returning users.
initially I was going to use @reactour/tour but then I realise that NextJs 14 doesn't have app directory so there is no way I can wrap the {children} with TourProvider so I'm confused/kind of lost to how to get it set up. I dropped the @reactour/tour approach any ideas what library to use?

2 Replies

Plott Hound
You can use react tour in app router
Since it uses a context you can make a file called providers in your app folder with “use client” at the top. Wrap the context provider around children then import the provider into layout