NextStep - Lightweight Next.js Onboarding Library Logo

NextStep

A lightweight onboarding library for Next.js and React applications.
Create engaging, interactive product tours with ease.

NextStep - Lightweight Next.js Onboarding Library Fazier Badge 2nd Product of the WeekNextStep - Lightweight Next.js Onboarding Library Fazier Badge Daily Product of the DayNextStep - Lightweight Next.js Onboarding Library Uneed POTD3 Badge

Get Started

Install NextStep

Add NextStep to your project with your preferred package manager

Built with

We are improving NextStep with CSS and React support, so you can use it with any framework.

Sign up to hear about our latest updates:

Quick Start Guide

  1. Install NextStep in your project using npm, yarn, or pnpm.
  2. Wrap your app with the NextStepProvider:

    App Router: Global `layout.tsx`

    import { NextStepProvider, NextStep } from 'nextstepjs';
    
    export default function Layout({ children }) {
      return (
        <NextStepProvider>
          <NextStep steps={steps}>
            {children}
          </NextStep>
        </NextStepProvider>
      );
    }

    Pages Router: `_app.tsx`

    import { NextStepProvider, NextStep } from 'nextstepjs';
    
    export default function App({ Component, pageProps }: AppProps) {
      return (
        <NextStepProvider>
          <NextStep steps={steps}>
            <Component {...pageProps} />
          </NextStep>
        </NextStepProvider>
      );
    }

    Troubleshooting for Pages Router

    If you encounter an error related to module exports when using the Pages Router, it is likely due to a mismatch between ES modules (which use `export` statements) and CommonJS modules (which use `module.exports`). The `nextstepjs` package uses ES module syntax, but your Next.js project might be set up to use CommonJS.

    To resolve this issue, ensure that your Next.js project is configured to support ES modules. You can do this by updating your `next.config.js` file to include the following configuration:

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      reactStrictMode: true,
      experimental: {
        esmExternals: true,
      },
      transpilePackages: ['nextstepjs'],
    };
    
    export default nextConfig;
  3. Define your steps:
    import { Tour } from 'nextstepjs';
    
    const steps : Tour[] = [
      {
        tour: "mainTour",
        steps: [
          {
            title: "Welcome",
            content: "Let's get started with NextStep!",
            selector: "#step1",
            // ... other step properties
          },
          // ... more steps
        ]
      }
    ];
  4. Add id attributes to your HTML elements to target them in your steps.
  5. Use NextStep hook to control the tour from your components.
    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>
      );
    };

Frequently Asked Questions

What is NextStepjs?

NextStepjs is an open-source, lightweight onboarding library designed specifically for Next.js applications. It enables developers to create engaging, interactive product tours with ease, enhancing user experience and facilitating seamless onboarding processes.

How do I install NextStepjs in my Next.js project?

To install NextStepjs, use your preferred package manager. For example, with npm, run: npm install nextstepjs framer-motion. This command installs both NextStepjs and Framer Motion, which is utilized for smooth animations.

How do I get started with NextStepjs?

To get started with NextStepjs, first install the package using your preferred package manager. Then, wrap your application with the NextStepProvider and define your onboarding steps. Check the Docs for detailed setup instructions.