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
• Step-by-Step Setup
• Conclusion

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!