Next.js Integration

Popups for Next.js Applications

Add conversion popups to your Next.js app. Works with App Router and Pages Router. Zero npm packages needed.

2 minutes setup

Easy

How to Install Mr. Popup on Next.js

Mr. Popup integrates with Next.js applications through a simple script tag. No npm packages, no build complications, just add and go.

Sign up for Mr. Popup

Create your account and add your Next.js app URL.

Copy your integration code

Get your unique integration code from the dashboard.

Add to Next.js

Add the script to your root layout (App Router) or _document.tsx (Pages Router).

// app/layout.tsx (App Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          id="mrpopup-config"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `window.MRPOPUP_INTEGRATION_CODE = "YOUR_CODE_HERE";`
          }}
        />
      </head>
      <body>
        {children}
        <Script 
          src="https://mrpopup.co/mrpopup-loader.js" 
          strategy="lazyOnload" 
        />
      </body>
    </html>
  )
}

Deploy and test

Deploy your app. Popups work on all routes automatically.

Why Use Mr. Popup with Next.js

Works with App Router and Pages Router

No npm dependencies

SSR and SSG compatible

Works with Vercel, Netlify, any host

No hydration issues

Optimized script loading

Frequently Asked Questions

Ready to Add Popups to Next.js?

Create your first AI-powered popup in seconds. No coding required. Works perfectly with Next.js.

14-day free trial

No credit card required