How to Add Product Tours to Next.js Applications
In this tutorial, I will guide you through adding product tours to your Next.js application using a tool called NextStep
. We'll cover setting up a basic product tour and triggering custom tours based on user interactions.
Checkout NextStep here.
🗂️ Table of Contents
Introduction
In today’s fast-paced web environment, product tours are an essential tool to enhance user onboarding. They guide new users through your app, explain core features, and ensure users make the most of your product.
Why Add Product Tours?
Product tours help users quickly grasp your app's key functionalities. They:
- Simplify the onboarding process for new users.
- Convert static documentation into interactive tours.
- Help troubleshoot issues by visually guiding users through fixes.
- Boost engagement and feature adoption, ensuring that users understand new updates and tools.
Step by Step Setup
Step 1: Install the NextStepJS Library
Run the following command to install NextStep
, the library we’ll be using for creating tours:
# npm
npm i nextstepjs framer-motion @radix-ui/react-portal
# pnpm
pnpm add nextstepjs framer-motion @radix-ui/react-portal
# yarn
yarn add nextstepjs framer-motion @radix-ui/react-portal
# bun
bun add nextstepjs framer-motion @radix-ui/react-portal
Step 2: Add NextStep to Tailwindcss Config
Tailwind CSS needs to scan the node module to include the used classes. See configuring source paths for more information.
const config = {
content: [
'./node_modules/nextstepjs/dist/**/*.{js,ts,jsx,tsx}'
]
}
Step 3: Initialise NextStep in Your App
Wrap your app with the NextStepProvider
and NextStep
components. Provide steps to the NextStep. We will define steps in the next section.
- App Router: Global
layout.tsx
-
Pages Router:
_app.tsx
(see NextStepJS Docs for details.)
import { NextStepProvider, NextStep } from 'nextstepjs';
export default function Layout({ children }) {
return (
<NextStepProvider>
<NextStep steps={steps}>
{children}
</NextStep>
</NextStepProvider>
);
}
Step 4: Define Your Product Tour Steps
Create a set of steps for your tour. Each step can have a selector which uses ID of elements in the document. You can also locate the tour Card anywhere to the selected element.
NextStep allows you to navigate between different routes during a tour using the nextRoute
and prevRoute
properties in the step object. These properties enable seamless transitions between different pages of your application.
nextRoute: Specifies the route to navigate to when the "Next" button is clicked.
prevRoute: Specifies the route to navigate to when the "Previous" button is clicked.
const steps = const steps = [
{
tour: "mainTour",
steps: [
{
icon: "👋",
title: "Welcome",
content: "Let's get started with NextStep!",
selector: "#step1",
side: "right",
showControls: true,
showSkip: true
},
// More steps...
]
}
];
Step 5: Start your tour using useNextStep hook
Control your tour programmatically from anywhere in your app. You can also trigger tour changes with events or other buttons within the UI.
import { useNextStep } from 'nextstepjs';
const MyComponent = () => {
const { startNextStep, closeNextStep, currentTour, currentStep, setCurrentStep, isNextStepVisible } = useNextStep();
const handleStartTour = () => {
startNextStep("mainTour");
};
return (
<button onClick={handleStartTour}>Start Tour</button>
);
};
Conclusion
And voila! That's it. Now you can guide your users around your app with interactive product tours.
Remember, the key to effective product tours is to keep them concise, informative, and tailored to your users' needs. As you continue to develop your app, don't forget to update your tours to reflect new features and improvements.
Happy touring!
Top comments (0)