Install React Scan in your Next.js Pages Router project using either a script tag or module import.
Script Tag Method
Open your document file
Navigate to pages/_document.tsx (or pages/_document.jsx).
Add the Script component
Import Next.js’s Script component and add React Scan:import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
src="//unpkg.com/react-scan/dist/auto.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Module Import Method
Install the package
npm install -D react-scan
Add to your App component
Open pages/_app.tsx and add React Scan:// react-scan must be the top-most import
import { scan } from "react-scan";
import { useEffect } from "react";
export default function App({ Component, pageProps }) {
useEffect(() => {
// Make sure to run React Scan after hydration
scan({
enabled: true,
});
}, []);
return <Component {...pageProps} />;
}
The react-scan import must be the top-most import in your _app.tsx file.
Running in Production
By default, React Scan only runs in development. To enable it in production:
- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";
Running React Scan in production is not recommended as it may impact performance.