# react-nextjs-adsense
A modern React component library for seamlessly integrating Google AdSense into your Next.js applications, with built-in ethical content filtering.
[](https://www.npmjs.com/package/react-nextjs-adsense)
[](https://github.com/mahmudul-hasan-hridoy/react-nextjs-adsense/blob/main/LICENSE)
Demo: [Click here to see the AdSense demo](https://toolhut.vercel.app/adsense-demo)
---
## Why Choose react-nextjs-adsense?
- **Effortless Integration**: Simple, declarative API designed specifically for Next.js apps
- **Ethical Advertising**: Built-in Islamic content filtering to ensure your ads align with ethical standards
- **Consent-Ready**: Supports Google's `pauseAdRequests` and non-personalised ads patterns for GDPR compliance
- **Developer-Friendly**: Comprehensive TypeScript support and intuitive props
- **Performance Optimized**: Lazy-loads via IntersectionObserver to minimise impact on Core Web Vitals
---
## Getting Started
### Installation
```bash
# npm
npm install react-nextjs-adsense
# yarn
yarn add react-nextjs-adsense
# pnpm
pnpm add react-nextjs-adsense
```
### 1. Add the AdSense script to your layout
Add the script **once** in your root layout. Google's generated ad code uses the `?client=` query param and `crossOrigin="anonymous"` — use this exact form.
```tsx
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
> **Note:** Do not add a second copy of this script. The `` component handles calling `adsbygoogle.push({})` itself — you do not need to do it in the layout.
Alternatively, use Next.js `