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

```javascript
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](/content/dashboard/index.html) 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](/content/docs/script-configuration/index.html).

Something missing? [Suggest features](https://feedback.datafa.st/) ✍️