Integrate Google AdSense in NextJS

Before starting, make sure you have a Google AdSense account. If not, sign up at https://www.google.com/adsense/.

2 - Create an AdSense component

Create a React component to hold the AdSense ad code. Create a new tsx file inside the /components folder and name it AdSense.tsx

src/components/AdSense.tsx

import React, { useEffect } from 'react';

interface AdSenseProps {
  client: string;
  slot: string;
  style?: React.CSSProperties;
}

const AdSense: React.FC<AdSenseProps> = ({ client, slot, style }) => {
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.error(err);
    }
  }, []);

  return (
    <ins
      className="adsbygoogle"
      style={style || { display: 'block' }}
      data-ad-client={client}
      data-ad-slot={slot}
      data-ad-format="auto"
      data-full-width-responsive="true"
    />
  );
};

export default AdSense;

3 - Add AdSense script to `_document.tsx`

Add the AdSense script to inside the <Head> tag of the src/pages/_document.tsx file to ensure it's loaded on every page.

Note: Replace ca-pub-XXXXXXXXXXXXXXXX with your actual AdSense publisher ID.

// ... other code ...

      <Head>
        
        // ... other code ...
        
        <meta
          httpEquiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://pagead2.googlesyndication.com https://partner.googleadservices.com https://tpc.googlesyndication.com https://www.googletagservices.com"
        />
         
        <script
           async
           src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
           crossOrigin="anonymous"
         />
          
      </Head>
         
     // ... other code ...

Note: Replace ca-pub-XXXXXXXXXXXXXXXX with your actual AdSense publisher ID.

4 - Use the AdSense component in pages

Now you can use the AdSense component in any page of your Next.js application.

You can find WordPress Template System pages inside the /src/wp-templates/ folder.

And you can find other pages like: Author page, Seach, Reading list, Submission, ... inside the /src/pages/ folder.

import AdSense from '@/components/AdSense';

const Page: FaustTemplate<GetPageQuery> = (props) => {
  return (
    <div>
     {/* Other page content */}
      <AdSense client="ca-pub-XXXXXXXXXXXXXXXX" slot="1234567890" />
      {/* Other page content */}
    </div>
  );
};

5 - Submit your website for review

After integrating AdSense into your website, submit it for review in your AdSense account.

Important notes:

Make sure to comply with all Google AdSense policies to avoid rejection or account suspension.
Consider the performance impact when adding ads. Too many ads can slow down your website.
Always test thoroughly after implementation to ensure everything works as expected.

PreviousSitemap XML, robot.txt NextSite Settings JSON

Last updated 4 months ago

Was this helpful?

import React, { useEffect } from 'react'; interface AdSenseProps { client: string; slot: string; style?: React.CSSProperties; } const AdSense: React.FC<AdSenseProps> = ({ client, slot, style }) => { useEffect(() => { try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch (err) { console.error(err); } }, []); return ( <ins className="adsbygoogle" style={style || { display: 'block' }} data-ad-client={client} data-ad-slot={slot} data-ad-format="auto" data-full-width-responsive="true" /> ); }; export default AdSense;

// ... other code ... <Head> // ... other code ... <meta httpEquiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://pagead2.googlesyndication.com https://partner.googleadservices.com https://tpc.googlesyndication.com https://www.googletagservices.com" /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossOrigin="anonymous" /> </Head> // ... other code ...

import AdSense from '@/components/AdSense'; const Page: FaustTemplate<GetPageQuery> = (props) => { return ( <div> {/* Other page content */} <AdSense client="ca-pub-XXXXXXXXXXXXXXXX" slot="1234567890" /> {/* Other page content */} </div> ); };

1 - Sign up for a Google AdSense account

2 - Create an AdSense component

3 - Add AdSense script to _document.tsx

4 - Use the AdSense component in pages

5 - Submit your website for review

1 - Sign up for a Google AdSense account

2 - Create an AdSense component

3 - Add AdSense script to _document.tsx

4 - Use the AdSense component in pages

5 - Submit your website for review

3 - Add AdSense script to `_document.tsx`

3 - Add AdSense script to `_document.tsx`