Next.js Integration

Add FrictaSolv to your Next.js application in 2 minutes

1. Check Your Next.js Version

Run this command to see your Next.js version:

npx next --version

Or check package.json:

cat package.json | grep next

Next.js 13+

App Router

If your project has an app/ directory, use this approach:

Step 1: Update app/layout.tsx

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://api.frictasolv.com/solv.js"
          strategy="afterInteractive"
          data-api-key="frcta_YOUR_ORG_API_KEY"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Step 2: Replace API Key

Replace frcta_YOUR_ORG_API_KEYwith your organization's API key.

Find it in: Dashboard → Settings → API Key

Done! 🎉

FrictaSolv now tracks frustration signals on every page automatically. Events appear in your dashboard within seconds.

Next.js 12 or earlier

Pages Router

If your project has a pages/ directory, use this approach:

Option A: Using _app.tsx

import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://api.frictasolv.com/solv.js"
        strategy="afterInteractive"
        data-api-key="frcta_YOUR_ORG_API_KEY"
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

Option B: Using _document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://api.frictasolv.com/solv.js"
          strategy="afterInteractive"
          data-api-key="frcta_YOUR_ORG_API_KEY"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Use Option A (_app.tsx) if you already have it. Otherwise create _document.tsx.

Step 2: Replace API Key

Replace frcta_YOUR_ORG_API_KEYwith your organization's API key.

Find it in: Dashboard → Settings → API Key

✓ Verify Installation

1. Open your Next.js site in a browser
2. Open DevTools → Console (F12)
3. You should NOT see any errors (SDK loads silently)
4. Go to FrictaSolv Dashboard → Events
5. You should see events appearing in real-time

What Gets Tracked?

✓ Automatic

Failed API calls (4xx, 5xx)
JavaScript errors
Rage clicks (repeated clicks)
Page load time
Dead clicks (unresponsive buttons)

📊 User Frustration

Frustration score (0-100)
Session ID
Page URL
Browser + OS
Timestamp

❓ Troubleshooting

No events appearing?

✓ Check API key is correct (copy from dashboard)
✓ Ensure site URL is registered in organization
✓ Check Network tab in DevTools for SDK script load
✓ Hard refresh (Ctrl+Shift+R) to clear cache

Script not loading?

✓ Verify domain allows cross-origin requests
✓ Check browser console for CORS errors
✓ Ensure data-api-key attribute is present

Next Steps

→ Configure Alerts: Set up email/Slack notifications for high-frustration sessions

→ Add Thresholds: Set per-page frustration thresholds (home page vs checkout)

→ Invite Team: Add team members to your organization dashboard

→ Export Data: Download events as CSV for analysis