react-nextjs-adsense v1.1.4

react-nextjs-adsense

A React component for easy integration of Google AdSense in Next.js applications.

Demo: https://toolmaster.vercel.app/adsense-demo

Installation

npm install react-nextjs-adsense

or

yarn add react-nextjs-adsense

Usage

Basic Usage

Here's a basic example of how to use the AdSense component in your Next.js application:

import { AdSense } from 'react-nextjs-adsense';

const MyComponent = () => {
  return (
    <div>
      <h1>My Page Content</h1>
      <AdSense
        client="ca-pub-XXXXXXXXXXXXXXXX"
        slot="1234567890"
      />
    </div>
  );
};

export default MyComponent;

Advanced Usage

You can customize the AdSense component with various props:

import { AdSense } from 'react-nextjs-adsense';

const MyComponent = () => {
  return (
    <div>
      <h1>My Page Content</h1>
      <AdSense
        client="ca-pub-XXXXXXXXXXXXXXXX"
        slot="1234567890"
        style={{ display: 'block' }}
        layout="in-article"
        format="fluid"
        responsive="true"
      />
    </div>
  );
};

export default MyComponent;

Page-Level Ads

To enable page-level ads:

import { AdSense } from 'react-nextjs-adsense';

const MyPage = () => {
  return (
    <div>
      <AdSense
        client="ca-pub-XXXXXXXXXXXXXXXX"
        layoutKey="-fb+5w+4e-db+86"
      />
      {/* Your page content */}
    </div>
  );
};

export default MyPage;

Props

Notes

• Make sure you comply with Google AdSense policies when implementing ads.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.