Optimize your Next.js project with React Scan and improve your application’s performance.
Script
import { Script } from "next/script"; // src/app/layout.tsx export default function RootLayout({ children }) { return ( <html lang="en"> <head> <Script src="https://unpkg.com/react-scan/dist/auto.global.js" />; {/* Place here your Analytics script */} </head> <body>{children}</body> </html> ); }
npm i react-scan
src/components/ReactScan.tsx
"use client"; // react-scan must be imported before react import { scan } from "react-scan"; import { JSX, useEffect } from "react"; export function ReactScan(): JSX.Element { useEffect(() => { scan({ enabled: true, }); }, []); return <></>; }
ReactScan
// src/components/global/providers.tsx // This component must be the top-most import in this file! import { ReactScan } from "@/components/ReactScan"; // ... const Providers = ({ children, }: Readonly<{ children: React.ReactNode; }>) => { const { theme } = useTheme(); return ( <ThemeProvider attribute="class" defaultTheme={config.theme.general} enableSystem={config.theme.general === "system"} > {/* ... */} <ReactScan /> {/* ... */} </ThemeProvider> ); };
Was this page helpful?