Skip to content

Latest commit

 

History

History
65 lines (51 loc) · 1.12 KB

next-js-app-router.md

File metadata and controls

65 lines (51 loc) · 1.12 KB

NextJS App Router Guide

As a script tag

Add the script tag to your app/layout:

// app/layout
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script src="https://unpkg.com/react-scan/dist/auto.global.js" />
        {/* rest of your scripts go under */}
      </head>
      <body>{children}</body>
    </html>
  );
}

As a module import

Create a <ReactScan> client component:

// path/to/ReactScanComponent

"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 <></>;
}

Import the <ReactScan> component into app/layout:

// app/layout

// This component must be the top-most import in this file!
import { ReactScan } from "path/to/ReactScanComponent";

// ...

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