v3.0.1 — MIT license

react-nextjs-adsense

Google AdSense for React & Next.js — with ethical content filtering, GDPR consent support, and lazy-loading built in.

Install

$ npm install react-nextjs-adsense

Also:yarn add react-nextjs-adsenseorpnpm add react-nextjs-adsense

GitHub npm

Why use it

🛡️

Ethical filtering

Blocks 30+ categories by default

📜

GDPR ready

Consent & NPA patterns built in

⚡

Lazy loads

IntersectionObserver, no CWV hit

📦

TypeScript

Full type definitions

Setup

1Add the AdSense script to your root layout

app/layout.tsx

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXX"
          crossOrigin="anonymous"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

2Place an ad unit in any client component

Ethical content filtering is automatically enabled — no extra config needed.

app/blog/[slug]/page.tsx

"use client";
import { AdSense } from "react-nextjs-adsense";

export default function BlogPost() {
  return (
    <article>
      <AdSense
        client="ca-pub-XXXXXXXXXXXXXXXX"
        slot="1234567890"
        format="auto"
        responsive="true"
      />
    </article>
  );
}

Consent & GDPR

Pass consentState to serve non-personalised ads or pause requests entirely when a user declines ad storage.

Consent example

import { AdSense, ConsentState } from "react-nextjs-adsense";

const consent: ConsentState = {
  ad_storage: "granted",
  // "denied" → serves non-personalised ads
  ad_personalization: "denied",
};

<AdSense
  client="ca-pub-XXXXXXXXXXXXXXXX"
  slot="1234567890"
  consentState={consent}
/>

ad_storage

ad_personal…

result

granted

Personalised

granted

denied

Non-personal.

denied

any

Paused

Live demo

Disable AdBlock to see a live ad — ethical filtering is active.

No ad? Confirm your AdSense account is approved, disable your ad blocker, and check the browser console for errors.

Built by mahmudul-hasan-hridoy — MIT