Install guide

Add Formleak to Next.js

Add a <Script> to your root layout.

No cookies. Never reads what people type.

Step 1: Open your root layout
App Router: open app/layout.tsx. Pages Router: open pages/_app.tsx.
Step 2: Import Script
At the top of the file add: import Script from "next/script".
3
Step 3: Add the Formleak script
Inside <body> (App Router) or after <Component {...pageProps} /> (Pages Router), add the line below. Next.js passes data-site through to the script and loads it once for the whole site.
Add this to app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
```
<Script src="https://formleak.com/t.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" />
```
Replace YOUR_SITE_KEY with your own key: log in or add your website to see your code here.
Add this to app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
```
<Script src="https://formleak.com/t.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" />
```
Step 4: Deploy
Deploy as usual. Forms on pages people reach by client-side navigation are picked up too.
Step 5: Check it's working
Open a page on your live site that has a form and click into a field. Then open your website in Formleak: the setup check turns green as soon as data arrives.
Open the setup check Open the setup check

Good to know

Don't add defer yourself: the strategy setting controls loading.
If you use a Content-Security-Policy, allow https://formleak.com for scripts and connections (and pass your nonce if you use one).

Based on Next.js's own help pages: Next.js: Script component, Next.js: scripts guide. Menus change from time to time; if something looks different, their help pages have the latest.