User Onboarding for Next.js | BreakGround

User Onboarding for Next.js

BreakGround installs in any Next.js project via a single script tag, regardless of routing strategy. App Router, Pages Router, SSR, ISR, and edge — the runtime SDK adapts to whichever rendering mode each route uses.

BreakGround works with Next.js 13, 14, and 15 across both App Router and Pages Router. The snippet is a client-side script, so it never interferes with SSR or ISR — Next.js renders the page server-side, then the SDK initializes after hydration. Edge runtime is supported because the SDK runs in the browser, not the server. Route changes are detected through Next.js's `next/router` events and the History API, so guides targeting specific routes fire correctly.

How to set up

  1. Install via the App Router root layout: Add the snippet to `app/layout.tsx` so it loads on every route.
  2. Identify users in a client component: Once the user is authenticated, identify them from a client component to enable segment-aware guides.
  3. Generate your first guide: Paste your deployed Next.js app URL into the BreakGround dashboard. AI generates the first onboarding guide automatically — no manual authoring.

Capabilities

  • App Router and Pages Router both supported: Same snippet, both routers. No code-path forking based on which router your app uses.
  • SSR-safe: The SDK is client-only and uses Next.js's `Script` strategy=`afterInteractive`, so server rendering is never blocked.
  • Route-aware guides: Guides can target specific Next.js routes — `/dashboard`, `/onboarding/[step]` — and only fire on the right page.
  • Vercel and self-hosted deploys: Works on Vercel, Cloudflare Pages, AWS Amplify, or your own server — the SDK runs in the user's browser, not your deploy environment.

Frequently asked questions

Does the snippet break SSR or hydration?

No. The script loads with Next.js's `Script strategy="afterInteractive"` so it only runs after hydration completes. Server rendering and ISR continue to work without modification.

Can I use BreakGround with the App Router?

Yes. Install the snippet in `app/layout.tsx` using `next/script`. The same guides, tooltips, and analytics work identically across App Router and Pages Router.

Will the BreakGround snippet slow down my site?

The runtime SDK is loaded asynchronously and tree-shaken to ship only what each user needs. Typical impact on Core Web Vitals is below 50ms. The snippet does not block first paint.