Skip to main content

tutorials

How to Add a Feedback Widget to a Next.js App

To add a feedback widget to a Next.js app, run npx userdispatch init in your project directory. The CLI auto-detects whether you're using App Router or Pages Router and injects the widget script into app/layout.tsx or pages/_document.tsx respectively. The widget captures bug reports, ratings, and questions with automatic browser metadata.

UserDispatch Team5 min read

Next.js is the most popular React framework for production web apps. Adding a feedback widget takes one command — the UserDispatch CLI handles both App Router and Pages Router automatically.

Last updated: April 3, 2026

Quick start

npx userdispatch init

The CLI detects your Next.js version and router type, injects the widget script into the correct layout file, and configures the MCP server for your coding agent. Total time: about 2 minutes.

How it works with App Router

For Next.js App Router projects, the CLI adds a Script component to your app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://userdispatch.com/widget.js"
          data-api-key="pk_your-api-key"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

The afterInteractive strategy ensures the widget loads after the page is interactive — no impact on initial load or Largest Contentful Paint.

How it works with Pages Router

For Pages Router projects, the CLI adds the script to pages/_document.tsx:

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          src="https://userdispatch.com/widget.js"
          data-api-key="pk_your-api-key"
          defer
        />
      </body>
    </Html>
  )
}

Customization

Configure the widget via data attributes (see the full widget documentation for all options):

<Script
  src="https://userdispatch.com/widget.js"
  data-api-key="pk_your-api-key"
  data-position="bl"           // bottom-left instead of bottom-right
  data-trigger-label="Report"  // custom button text
  data-collect-email="false"   // hide email field
  strategy="afterInteractive"
/>

Connecting your coding agent

The CLI writes a .mcp.json file in your project root. Restart Claude Code, Cursor, or Windsurf and your agent can immediately read feedback via MCP:

"Show me new feedback submissions."

"Triage my inbox and flag critical bugs."

"This user reported a bug on the /dashboard page. Check the dashboard component and propose a fix."

The agent has access to both the feedback (via MCP) and your Next.js codebase (via the editor), so it can trace user-reported bugs to specific components and propose fixes inline. This is the core idea behind agent-native feedback — the agent becomes the first responder. For a deeper look at how the MCP server works, see MCP Server for User Feedback.

Performance

The widget has zero impact on server-side rendering — it's a client-side script that loads after hydration. It doesn't add to your Next.js bundle size, doesn't require any npm packages (the CLI installs @userdispatch/sdk for the API but the widget itself loads from a CDN), and doesn't affect your Vercel Edge Functions or API routes.

Pricing

Free tier: 100 submissions/month, full MCP server, feedback widget. No credit card required.

Try UserDispatch free

Set up AI-powered feedback collection in under two minutes.

Get started

Frequently Asked Questions

Frequently Asked Questions

How do I add a feedback widget to a Next.js app?
Run npx userdispatch init in your Next.js project directory. The CLI detects whether you use App Router or Pages Router and injects the widget script tag into the correct layout file — app/layout.tsx for App Router or pages/_document.tsx for Pages Router.
Does the feedback widget work with Next.js App Router?
Yes. The UserDispatch CLI detects App Router and injects a Script component into your app/layout.tsx file using Next.js's next/script with strategy='afterInteractive'. The widget loads after the page is interactive and renders in a Shadow DOM for full style isolation.
Does the feedback widget work with Next.js Pages Router?
Yes. The CLI detects Pages Router and adds the widget script to your pages/_document.tsx file. If _document.tsx doesn't exist, the CLI creates it with the correct structure.
Will the feedback widget slow down my Next.js app?
No. The widget is under 30KB gzipped, loads asynchronously (afterInteractive strategy), and renders in a Shadow DOM. It has no impact on your Lighthouse score, Core Web Vitals, or server-side rendering.
Can I use the feedback widget with Next.js and Vercel?
Yes. The widget works identically on Vercel, Netlify, AWS, or any hosting provider. It's a client-side script tag — it doesn't interact with your Next.js server or API routes.

Try UserDispatch free

Collect user feedback, bug reports, and feature requests — then let your AI coding agent handle them via MCP.

Get Started
UT

UserDispatch Team

Founders

Related Resources

tutorials

How to Add User Feedback to a Lovable App

Add a feedback widget to any Lovable app in under 5 minutes. Collect bug reports and feature requests, and let your AI coding agent handle triage.

5 min read

tutorials

How to Add User Feedback to a Replit App

Add a feedback widget to any Replit app in under 5 minutes. Collect bug reports and feature requests from your users.

4 min read

tutorials

How to Add User Feedback to a Bolt.new App

Add a feedback widget to any Bolt.new app in under 5 minutes. Collect bug reports from users and let your AI coding agent triage them via MCP.

5 min read
How to Add a Feedback Widget to a Next.js App (2026) | UserDispatch