NextJs: Element is not Defined when using Intro.js

Because intro.js uses the DOM API and on the SSR your document object model is not available.

You need to dynamically import intro.js into your project and disable ssr for it. Something like this should solve your problem:

// component with your intro.js logic

const Steps = dynamic(() => import('intro.js-react').then(mod => mod.Steps), {
  ssr: false
});
const Hints = dynamic(() => import('intro.js-react').then(mod => mod.Hints), {
  ssr: false
});