Next.js Google AdSense
npm install next-google-adsense !Lint, Format, and Test  
Add Google AdSense to your Next.js app.
This package is deeply inspired by nextjs-google-adsense.
Why I don't use nextjs-google-adsense directly? Because it only support Auto Ads and Responsive Display Ad. I want to use In-article Ads. So I decided to create a new package. (read 👾 Why next-google-adsense? for more details)
Give me a ⭐ if you like it.
- Support SSR (Server-Side Rendering), SSG (Static Site Generation) and CSR (Client-Side Rendering)
- Support TypeScript
- Zero Dependencies
- Dummy Ad Support for Development - Preview ads locally without real AdSense integration
- Theoretically support all AdSense AD types (see 🎨 Create a custom layout for more details)
- Create ads.txt automatically (see Initialization / Verification for more details)
- 👾 Why next-google-adsense?
- 📦 Requirements
- 🚀 Getting Started
- Installation
- Initialization / Verification
- Usage
- Auto Ads
- Manual Ads
- Dummy Ads for Development
- 📖 API Reference
- Components
- GoogleAdSense
- AdUnit
- Ad Sizes
- Display Ad Sizes
- In-Article Ad Sizes
- 🎨 Create a custom layout
- How to convert the given html to a custom layout?
- 🐛 Known Issues
- ⭐ TODO
- 🤝 Contributing
- 📝 License
- ☕ Donation
| | next-google-adsense (this) | nextjs-google-adsense |
| -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
| TypeScript | ✅ | ✅ |
| Support Auto Ads | ✅ | ✅ |
| Support Display Ad | ✅ | ✅ |
| Support In-feed Ad | ✅ | ❌ |
| Support In-article Ad | ✅ | ❌ |
| Support Matched Content Ad | ✅ | ❌ |
| Dynamic ads.txt | ✅ | ❌ |
| Multiple ADs on one page | ✅ | ⚠️\*1 |
| Dummy Ad for Development | ✅ | ❌ |
\*1: According to the their documentation seems it is ok to use multiple ADs on one page. But I found that it will cause an error.
- Next.js 11.0.0 or higher.
- React 17.0.0 or higher.
``bash`
npm install next-google-adsense
Visit the npm page.
There are two ways to verify your site (of course you can implement both):
1. AdSense code snippet
`typescript
// pages/_app.tsx
// import the module
import { GoogleAdSense } from "next-google-adsense";
const App = ({ Component, pageProps }) => {
return (
<>
isAutoAd={false} // 👈 true if you want to use Auto Ads
/>
{/ or /}
);
};
export default App;
`
You can also add the publisherId as environment variable as NEXT_PUBLIC_ADSENSE_PUBLISHER_ID. The environment variable will override the prop if both are set.
> [!NOTE]\ No need to add the prefix ca- to the publisherId. The package will add it automatically.
2. Ads.txt snippet
`js`
// package.json
// ...
"scripts": {
"build": "next build && create-ads-txt", // 👈 if you want to create ads.txt automatically, recommended
"create-ads-txt": "create-ads-txt" // 👈 if you want to create ads.txt manually
},
// ...
> [!WARNING]\ Your old ads.txt will be overwritten during the generation process.
You must set NEXT_PUBLIC_ADSENSE_PUBLISHER_ID as environment variable. The environment variable will be used to generate the ads.txt.
#### Auto Ads
If you decide to use Auto Ads, you are good to go. The ads will be automatically displayed on your page. (Setup Auto Ads)
#### Manual Ads
> [!NOTE]\
> Google AdSense does't work in local environment. You need to test it in production or use Dummy Ads for Development.
`typescript
import { AdUnit } from "next-google-adsense";
const Page = () => {
return (
<>
slotId="XXXXXXXXXX" {/ 👈 10 digits /}
layout="display" {/ See the API Reference for more options /}
/>
{/ or /}
slotId="XXXXXXXXXX"
layout="display"
/>
);
};
export default Page;
`
#### Dummy Ads for Development 🧪
Perfect for development and testing! Show realistic ad placeholders without needing actual AdSense approval.
`typescript
import { AdUnit, DISPLAY_AD_SIZES, ARTICLE_AD_SIZES } from "next-google-adsense";
const Page = () => {
return (
<>
{/ Using predefined sizes /}
layout="display"
dummySize="LEADERBOARD" {/ 728x90 /}
/>
layout="in-article"
dummySize="MEDIUM_RECTANGLE" {/ 300x250 /}
/>
{/ Using custom dimensions /}
layout="display"
dummySize={{ width: 600, height: 400 }}
/>
{/ Using size objects directly /}
layout="display"
dummySize={DISPLAY_AD_SIZES.BANNER} {/ 468x60 /}
/>
);
};
export default Page;
`
> [!NOTE]\
> Dummy ads only appear when the dummySize prop is provided. In production (when NODE_ENV/NEXT_PUBLIC_ENV is not "development"), real ads will be displayed instead.
#### Initializes the Google AdSense
`typescript`
| Parameter | Optional | Type | Default | Description |
| ----------- | -------- | ------ | ------- | --------------------------------------------------------------------------------------------------- |
| publisherId | Yes | string | n/a | You can skip this parameter if you set the environment variable NEXT_PUBLIC_ADSENSE_PUBLISHER_ID. |
| isAutoAd | Yes | boolean| false | Whether to enable Auto Ads. |
| debug | Yes | boolean| false | Enable Google AdSense debug mode. |
#### Manual AD
`typescript`
| Parameter | Optional | Type | Default | Description |
| ------------ | -------- | --------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------- |
| publisherId | Yes | string | n/a | You can skip this parameter if you set the environment variable NEXT_PUBLIC_ADSENSE_PUBLISHER_ID. |layout
| slotId | No | string | n/a | Google AdSense Slot ID. |
| layout | Yes | "display" \| "in-article" \| "custom" | "display" | The layout of the AD. |
| customLayout | Yes | JSX.Element | n/a | The custom layout of the AD. This parameter is required if is set to "custom". |
| dummySize | Yes | DisplayAdSize \| ArticleAdSize \| {width: number, height: number} | n/a | Show dummy ad for development. Only appears when this prop is provided. |
All available ad sizes for the dummySize prop:
#### Display Ad Sizes
For layout="display" ads:
| Size Name | Key | Dimensions | Best For |
| -------------------- | ---------------------- | ----------- | --------------------------- |
| Leaderboard | "LEADERBOARD" | 728 × 90 | Top of page, headers |"BANNER"
| Banner | | 468 × 60 | Above content |"HALF_BANNER"
| Half Banner | | 234 × 60 | Small horizontal spaces |"MEDIUM_RECTANGLE"
| Medium Rectangle | | 300 × 250 | Within content, sidebars |"LARGE_RECTANGLE"
| Large Rectangle | | 336 × 280 | Above the fold |"VERTICAL_BANNER"
| Vertical Banner | | 120 × 240 | Narrow sidebars |"WIDE_SKYSCRAPER"
| Wide Skyscraper | | 160 × 600 | Wide sidebars |"SKYSCRAPER"
| Skyscraper | | 120 × 600 | Narrow sidebars |"MOBILE_BANNER"
| Mobile Banner | | 320 × 50 | Mobile devices |"LARGE_MOBILE_BANNER"
| Large Mobile Banner | | 320 × 100 | Mobile devices, larger |
#### In-Article Ad Sizes
For layout="in-article" ads:
| Size Name | Key | Dimensions | Best For |
| ---------------- | -------------------- | ---------- | ---------------------------- |
| Small Square | "SMALL_SQUARE" | 200 × 200 | Small content breaks |"SQUARE"
| Square | | 250 × 250 | Content breaks |"MEDIUM_RECTANGLE"
| Medium Rectangle | | 300 × 250 | Between paragraphs |"LARGE_RECTANGLE"
| Large Rectangle | | 336 × 280 | Longer content breaks |
#### Usage Examples
`typescript
import { AdUnit, DISPLAY_AD_SIZES, ARTICLE_AD_SIZES } from "next-google-adsense";
// Using predefined size keys
// Using size objects
// Using custom dimensions
`
No layout fits your needs? Let's create a custom layout.
Sample custom layout:
`typescript`
export const InFeedAd = () => {
return (
style={{ display: "block" }}
data-ad-format="fluid"
data-ad-layout-key="
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
);
};
Example (provided by Google AdSense):
`html`
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
crossorigin="anonymous"
>
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
>
1. Remove all the