Does the widget work with Next.js server components?

The widget div can be placed in a server component since it is just HTML. The Script component is a client component, so if you add it in a server component file, Next.js will handle it correctly. Alternatively, place the Script in your root layout.

Which Script strategy should I use?

Use "lazyOnload" for the best performance. This loads the widget script after the page has fully loaded, ensuring it does not block your content. If you need the widget to appear immediately on page load, use "afterInteractive" instead.

Can I use the widget with the Next.js Pages Router?

Yes. In the Pages Router, add the Script component in your _app.tsx or directly in the page file. The widget div works the same way in both routing approaches.

Will the widget work with next/dynamic or lazy loading?

Yes. If you dynamically import a component that contains the widget div, the Launch Queue script will detect and initialize the widget once the component mounts. No additional configuration is needed.

Integration

Add a Waitlist to Your Next.js App - Launch Queue

Integrate a waitlist signup form into your Next.js application using the built-in Script component. Works with both the App Router and Pages Router.

Get Started Free

Embed Code

component.jsx

import Script from 'next/script'

export default function WaitlistPage() {
  return (
    <div>
      <h1>Join Our Waitlist</h1>
      <div
        data-lq-widget="signup"
        data-api-key="YOUR_API_KEY"
        data-project-id="YOUR_PROJECT_ID"
        data-primary-color="#3B82F6"
        data-button-text="Join the Waitlist"
      ></div>
      <Script
        src="https://launchqueue.app/widget.js"
        strategy="lazyOnload"
      />
    </div>
  )
}

Step-by-step Setup

Add the widget script to your layout or page

Use the Next.js Script component to load the Launch Queue widget script. The "lazyOnload" strategy ensures it does not block page rendering. For the App Router, add it in your layout.tsx or directly in the page component.

jsx

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://launchqueue.app/widget.js"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Add the widget div to your page

Place the widget div wherever you want the waitlist form to appear. Replace YOUR_API_KEY and YOUR_PROJECT_ID with the values from your Launch Queue dashboard.

jsx

// app/waitlist/page.tsx
export default function WaitlistPage() {
  return (
    <section className="max-w-md mx-auto py-16">
      <h1 className="text-3xl font-bold mb-6">
        Join Our Waitlist
      </h1>
      <div
        data-lq-widget="signup"
        data-api-key="YOUR_API_KEY"
        data-project-id="YOUR_PROJECT_ID"
        data-primary-color="#3B82F6"
        data-button-text="Join the Waitlist"
        data-collect-name="true"
      ></div>
    </section>
  )
}

Build and deploy

Run your Next.js development server to test the widget locally, then deploy to Vercel or your preferred hosting platform. The widget will work in both development and production environments.

bash

# Test locally
npm run dev

# Build for production
npm run build

Why use Launch Queue with Next.js

Uses the Next.js Script component for optimized, non-blocking script loading
Works with both the App Router and Pages Router in Next.js 13+
Compatible with server-side rendering (SSR) and static site generation (SSG)
Supports TypeScript projects without additional type definitions
Deploys seamlessly to Vercel, Netlify, or any Node.js hosting platform

Frequently Asked Questions

Add a waitlist to your Next.js site

Start your 14-day free trial. No credit card required.

Start Free Trial