BUZER
Skip to main content
Integration time2 minutes

How to Add Ads to Next.js with Buzer (2026 Guide)

Next.js is the leading React framework for production websites, used by companies from startups to enterprises. Buzer integrates cleanly with both the App Router and Pages Router, supporting SSR, SSG, and client-side rendering. Add ads to your Next.js site in about 2 minutes.

Step-by-Step Integration

1

Sign up for Buzer

Create your Buzer publisher account at buzer.xyz. Authenticate with Face ID or Touch ID. Your wallet is provisioned automatically.

2

Add the script to your layout

In the App Router, add the Buzer script to your root layout using next/script. The afterInteractive strategy ensures the script loads without blocking hydration.

javascript
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.buzer.xyz/x402-ad.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
3

Create a reusable BuzerAd component

Build a client component that renders the Buzer ad container. This keeps your code clean and makes it easy to place ads throughout your app.

javascript
'use client';

export default function BuzerAd({ size = '300x250' }: { size?: string }) {
  return (
    <div
      data-buzer-ad
      data-size={size}
      style={{ display: 'flex', justifyContent: 'center' }}
    />
  );
}
4

Place ads in your pages

Import and use the BuzerAd component anywhere in your Next.js pages. Common placements include between content sections, in sidebars, or below article headers.

javascript
import BuzerAd from '@/components/BuzerAd';

export default function ArticlePage() {
  return (
    <article>
      <h1>My Article Title</h1>
      <p>First paragraph of content...</p>
      <BuzerAd size="728x90" />
      <p>More content below the ad...</p>
      <aside>
        <BuzerAd size="300x250" />
      </aside>
    </article>
  );
}

Why Next.js Developers Choose Buzer

Traditional ad networks were built for static HTML pages and often conflict with React's virtual DOM. Scripts that inject ads via document.write break entirely in SSR environments. Buzer's ad script is designed for modern JavaScript frameworks — it observes the DOM for data-buzer-ad elements and hydrates them client-side.

This means Buzer works out of the box with Next.js App Router, including server components, streaming, and Suspense boundaries. No useEffect hacks, no ref gymnastics, no race conditions.

Payments are in USDC on Base, settled daily, with 85% revenue share. For developer-focused publishers running docs sites, blogs, or tools on Next.js, Buzer is the natural choice.

Handling Route Changes in Next.js

Next.js uses client-side navigation for route changes, which means the page does not fully reload. The Buzer script handles this automatically by using a MutationObserver to detect new ad slots added to the DOM.

When a user navigates to a new page in your Next.js app, the BuzerAd component mounts and the ad container appears in the DOM. The Buzer script detects it and fills the ad slot within milliseconds.

No additional configuration is needed for client-side transitions. The script is loaded once and remains active across all route changes.

Frequently Asked Questions

Does Buzer work with Next.js App Router and Server Components?+
Yes. The Buzer script loads client-side via next/script with the afterInteractive strategy. Ad slot components should be marked with "use client" since they render in the browser. Server components can import and render the BuzerAd client component without issues.
Will Buzer ads affect my Next.js Lighthouse score?+
The Buzer script is under 5KB gzipped and loads asynchronously after hydration (afterInteractive strategy). It does not affect LCP, FID, or CLS when ad containers have explicit dimensions set. Most sites see zero impact on their Lighthouse performance score.
Can I use Buzer with Next.js static export (SSG)?+
Yes. Since the Buzer script runs client-side, it works with any Next.js output mode including static export, SSR, and ISR. The ad containers are hydrated in the browser regardless of how the HTML is generated.

Related Resources

Add Ads to React

Monetize your React app with Buzer ads. Earn 85% revenue share with instant USDC payments. Simple component-based integration for any React project.

Add Ads to Gatsby

Monetize your Gatsby site with Buzer ads. 85% revenue share, instant USDC payments. Works perfectly with Gatsby's static generation and hydration.

Add Ads to Astro

Monetize your Astro site with Buzer ads. 85% revenue share, daily USDC payments. Works with Astro islands architecture and any UI framework.

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start EarningAdvertise With Us