1 - Sign up for a Google AdSense account
Before starting, make sure you have a Google AdSense account. If not, sign up at .
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.