nextjs-hotjar

Hotjar for Next.js

This package optimizes script loading using Next.js Script tag, which means that it will only work on apps using Next.js >= 11.0.0.

Installation

pnpm install nextjs-hotjar

Instructions

Add the Hotjar component to your custom App file:

// pages/_app.js
import { Hotjar } from "nextjs-hotjar";

const App = ({ Component, pageProps }) => {
	return (
		<>
			<Hotjar id={YOUR_APP_ID} sv={YOUR_APP_SCRIPT_VERSION} />
			<Component {...pageProps} />
		</>
	);
};

export default App;

Props

Name	Type	Required	Description
id	string	Yes	Your Hotjar app ID.
sv	string	Yes	Your Hotjar app script version.
strategy	'beforeInteractive', 'afterInteractive', 'lazyOnload'	No	Script strategy oprions provided by Nextjs Script package. We excluded the 'worker ' strategy since is not compatibile with Hotkar loading system