Add DataFast to your Next.js App Router project

Follow these steps to integrate DataFast analytics into your Next.js application using the App Router (v13+).

Add tracking script to Root Layout

The recommended way to add scripts to all pages in a Next.js App Router application is by using the root layout file.

  1. Open your project's root layout file, typically located at app/layout.jsx.

  2. Import the Script component from next/script.

  3. Add the DataFast tracking script to the <head> section of your layout component.

Here's an example for app/layout.jsx:

import Script from "next/script";

export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head>
           <Script
             data-website-id="dfid_******"
             data-domain="your_domain.com"
             src="https://datafa.st/js/script.js"
             strategy="afterInteractive"
           />
         </head>
         <body>{children}</body>
       </html>
     );
}

Replace dfid_****** with your actual Website ID from DataFast. Replace your_domain.com with your website's root domain.

  1. Save the file, commit and deploy your changes.

DataFast is disabled on localhost to avoid tracking your own traffic.

Verify installation

After deploying your changes:

  • Visit your live website.
  • Check your DataFast dashboard for incoming data. It might take a few minutes for the first pageviews to appear.

For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the script configuration reference.

Something missing? Suggest features ✍️