Basic Setup for Next.js

Wrap your application in NextStepProvider and NextStep, then supply the steps array to NextStep. See the Tour Steps page for more information about creating steps.

App Router: Global `layout.tsx`

import { NextStepProvider, NextStep } from 'nextstepjs';

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...
    ]
  }
];

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;