# Next.js Installation

Never commit API keys. Put `.env.local` in `.gitignore`.

Use a server env var. The key is still emitted on the script tag (tracker keys are public by design).

## App Router

```bash
# .env.local
NEXT_EVENTDASH_API_KEY=ed_your_api_key_here
```

```tsx
// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          strategy="afterInteractive"
          data-api-key={process.env.NEXT_EVENTDASH_API_KEY}
          src="https://www.eventda.sh/tracker.js"
        />
        {children}
      </body>
    </html>
  )
}
```

## Pages Router

Same env var. Add the Script in `pages/_app.tsx` with `strategy="afterInteractive"`.

Page views are tracked automatically on load and SPA navigation.

Then add `data-ed-goal` on primary CTAs. See https://www.eventda.sh/docs/tracking/html-attributes.md