Next.js + BubbleNote

Why BubbleNote works great with Next.js

Next.js apps are fast, dynamic, and often combine server-rendered pages with client-side interactivity. BubbleNote's lightweight JavaScript widget is built for exactly this kind of architecture. It loads asynchronously, doesn't depend on React, and handles route transitions gracefully — whether you're using the App Router, Pages Router, or a mix of both.

Add it with next/script

Installation is a single <Script> component in your root layout or document. Using strategy="lazyOnload" ensures the widget loads after your page is interactive, so it never competes with your application's hydration or initial render.

import Script from 'next/script'

<Script
  src="https://cdn.bubblenote.app/widget.js"
  data-project="YOUR_PROJECT_KEY"
  strategy="lazyOnload"
/>

No npm packages to install, no React context providers to wrap, no build configuration to change. The widget operates entirely outside the React tree, so it won't trigger re-renders or interfere with your component lifecycle.

Full context on every report

When someone on your team submits feedback, BubbleNote captures a screenshot of the current viewport, the page URL (including dynamic route segments), browser and OS information, viewport dimensions, and any console errors. For Next.js developers, this means you can immediately see whether an issue is specific to a particular route, device, or rendering mode — without asking the reporter for details.

No hydration headaches

Because BubbleNote is a vanilla JavaScript widget — not a React component — it doesn't participate in server-side rendering or hydration. It initialises on the client after your page has loaded, watches for route changes via the History API, and re-captures context on each navigation. This means zero hydration mismatches and zero interference with React Server Components.

Get started in under a minute

BubbleNote's free plan includes unlimited team members, projects, and page views. Add the Script component, deploy, and start collecting visual feedback with full technical context today.