Skip to main content
Install React Scan in your Next.js App Router project using either a script tag or module import.

​
Script Tag Method

1

Open your root layout

Navigate to app/layout.tsx (or app/layout.jsx).
2

Add the Script component

Import Next.js’s Script component and add React Scan:
app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="//unpkg.com/react-scan/dist/auto.global.js"
          crossOrigin="anonymous"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

​
Module Import Method

1

Create a ReactScan client component

Create a new file for the React Scan component:
components/react-scan.tsx
"use client";

import { scan } from "react-scan";
import { useEffect } from "react";

export function ReactScan() {
  useEffect(() => {
    scan({
      enabled: true,
    });
  }, []);

  return null;
}
The react-scan import must come before React imports.
2

Add to your root layout

Import the component at the top of app/layout.tsx:
app/layout.tsx
// This component must be the top-most import in this file!
import { ReactScan } from "@/components/react-scan";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <ReactScan />
      <body>{children}</body>
    </html>
  );
}

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us