Install Talvess with Next.js

Register your website

Sign in and add your website. Register its exact origin, including the protocol, hostname, and any port. Copy the script URL and website ID from your generated setup snippet.

Add the script

For the App Router, add next/script to your root layout, inside the body after your page content.

Replace YOUR_TALVESS_DOMAIN and YOUR_WEBSITE_ID with the values from setup. Add the highlighted lines to your existing file.

import Script from "next/script"
import type { ReactNode } from "react"

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://YOUR_TALVESS_DOMAIN/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Keep your existing fonts, providers, and metadata. The root layout loads the tracker across all routes. You do not need to turn the layout into a Client Component.

See the Next.js script documentation for the framework's configuration details.

Verify installation

1. Publish your changes and open your website in a browser.
2. In Talvess, open your website menu, choose Check installation, then Run checks.
3. Open Analytics and select a date range that includes your visit.

The tracker records the first pageview and follows pathname changes in single-page applications. Do not add a separate pageview call for route changes. Query-string and hash-only changes do not count as pageviews.

If your site uses Content Security Policy, allow your Talvess origin in script-src and connect-src. If visits do not arrive, follow the troubleshooting guide. Read what is collected for browser storage and privacy details.