Dashboard

Getting Started With Next.js

Setup Flowgrid on your Next.js app in just a few easy steps. Follow the instructions below to get started using app router (version 13+).

Add the tracking script to app layout

Create your new website and add the following script tag preferably in the layout.jsx section:

  1. Open your project's app/layout.jsx file.
  2. Add the Flowgrid tracking script tag inside the head section:
layout.jsx
1import Script from 'next/script'; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en"> 6 <head> 7 <Script 8 src="https://www.flow-grid.xyz/scripts/track.js" 9 data-site="YOUR_WEBSITE_ID" 10 strategy="afterInteractive" 11 /> 12 </head> 13 <body>{children}</body> 14 </html> 15 ); 16} 17

Note:

Replace YOUR_WEBSITE_ID with your actual website ID.

Tracking is disabled on localhost. CORS policies ensure only whitelisted sites send data, so local requests will fail and no data is sent to your dashboard during development.

Verify installation

After adding the script do the following to verify that the installation was successful:

  1. Open your website that you are now tracking in the browser.
  2. Go to your dashboard, click on your website and click the go to website's dashboard to see if the incoming traffic are being tracked.