View demoBuy theme now

Integrate Google AdSense in NextJS

1 - Sign up for a Google AdSense account

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:

  1. Make sure to comply with all Google AdSense policies to avoid rejection or account suspension.

  2. Consider the performance impact when adding ads. Too many ads can slow down your website.

  3. Always test thoroughly after implementation to ensure everything works as expected.

PreviousSitemap XML, robot.txtNextProject initiation

Last updated