# Next.js

### 1 · Sign up (or log in)

Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.

### 2 · Add your website in Humblytics

In the sidebar, click **Add Website**.

* **Domain** – enter `your-domain.com` (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Marketing-Prod`)

Copy the snippet from **Install Tracking Code**:

html

```html
<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->
```

Keep this tab open—we'll return and click **Verify Website** once the tag is live.

### 3 · Add the script to your Next.js app

#### For Next.js 13+ (App Router)

1. Open `app/layout.tsx` (or `app/layout.js`)
2. Import the Next.js `Script` component and add before closing `</body>`:

tsx

```tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
```

**Note**: Replace `YOUR_ID_HERE` with your actual project ID.

#### For Next.js 12 or older (Pages Router)

1. Open `pages/_app.tsx` (or `pages/_app.js`)
2. Add the script after your main component:

tsx

```tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
        strategy="afterInteractive"
      />
    </>
  )
}
```

**Note**: Replace `YOUR_ID_HERE` with your actual project ID.

**Why `afterInteractive`?**\
Loads the script after the page becomes interactive—optimal for analytics without blocking initial page load.

### 4 · Deploy and verify

1. Deploy or restart your development server
2. Return to Humblytics and click **Verify Website**
3. Open your live site in a private/incognito window and refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project
* You deployed the latest version
* Script isn't blocked by ad-blockers or browser extensions
* No Content Security Policy (CSP) blocking the script

### 5 · Explore & optimize

* **Dashboard** – see traffic, top pages, and referrers
* **Heatmaps** – auto-generated for user clicks and scroll depth
* **Experiments** – run A/B tests without extra libraries (Experiments → New Test)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.humblytics.com/how-to-get-started/nextjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
