Source: https://datafa.st/docs/nextjs-app-router
Markdown source: https://datafa.st/docs/nextjs-app-router.md
Description: How to add DataFast to your Next.js App Router (v13+) project

# 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`:

    ```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.

4.  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](/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](/docs/script-configuration).
