Revly
Documentation menu

Next.js

Revly works with Next.js App Router out of the box. Use the next/script component in your root layout to load the tracker, then pass the strategy that fits your needs.

1. Load the script

Add the tracker to your app/layout.tsx. The afterInteractive strategy loads the script after the page is interactive without blocking rendering.

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.revly.pro/tracker.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

2. Identify logged-in users

Because layout.tsxis a Server Component, you can't call window.revly.identify() directly. The solution is a small Client Component that renders nothing and fires identify in a useEffect:

// components/revly-identify.tsx
'use client'
import { useEffect } from 'react'

export function RevlyIdentify({ userId, name }: { userId: string; name: string }) {
  useEffect(() => {
    window.revly?.identify({ userId, name })
  }, [userId, name])

  return null
}

Then use it in your layout, reading the session on the server:

// app/layout.tsx
import Script from 'next/script'
import { RevlyIdentify } from '@/components/revly-identify'
import { getSession } from '@/lib/auth'

export default async function RootLayout({ children }) {
  const session = await getSession()

  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.revly.pro/tracker.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
        {session?.user && (
          <RevlyIdentify userId={session.user.email} name={session.user.name} />
        )}
      </body>
    </html>
  )
}

The Client Component runs only in the browser after the tracker script is loaded, so window.revly is always available when identify is called.

Need help? Reach out at contact@revly.pro