# Install in a Next.js app
> Install @scriptmonitoring/next and render ScriptMonitoringScript in pages/_document.tsx or your root layout, so the tag loads first on every page.
Source: https://docs.scriptmonitoring.com/install/nextjs/ · Plan: All plans · Updated 2026-10-13
On Next.js you install Script Monitoring with the `@scriptmonitoring/next` package: render its `ScriptMonitoringScript` component in `pages/_document.tsx` (Pages Router) or your root layout (App Router). The component renders the synchronous script tag the dashboard gives every other method, so there is no `index.html` for you to edit.
## How do I install the package?
In the dashboard, open **Developers > Setup**, go to step 3, **Install**, and pick **NextJS**. Step 1 of the panel, **Install package**, has the command for your package manager:
```shell
npm i @scriptmonitoring/next
# or
yarn add @scriptmonitoring/next
# or
pnpm i @scriptmonitoring/next
```
## How do I add the script with the Pages Router?
Render `ScriptMonitoringScript` inside `` in `pages/_document.tsx`. This is the dashboard's **Pages Router** snippet, with your script URL filled in:
```tsx
// pages/_document.tsx
export default function Document() {
return (
{/* <- Here */}
);
}
```
## How do I add the script with the App Router?
Render `ScriptMonitoringScript` in your root layout, before `{children}`. This is the dashboard's **App Router** snippet:
```tsx
// layout.tsx
export default function Layout({ children }) {
return (
<>
{/* <- Here */}
{children}
);
}
```
## What does ScriptMonitoringScript render?
A plain `