Google Adsense with Next.js 14+ : A Simple Guide for Devs

~
~
Published on
Authors

google-adsense-with-nextjs-banner

Integrating Google Adsense with Next.js 14+: A Simple Guide for Devs

With Next.js 14+ becoming increasingly popular among full-stack engineers, monetizing your web apps efficiently is crucial. Google Adsense remains a top choice for passive income, but setting it up correctly is key.

Step 1: Getting Started

Create a Google Adsense account at adsense.google.com. Ensure your site meets Google’s basic content guidelines and policies.

Step 2: Configuring Next.js 14

Using Next.js 14+? Good news: server components make integrating Adsense easier than ever.

  1. Install dependencies
   npm install next/script

  1. Insert the Adsense script globally in your root layout (app/layout.tsx):

    import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          strategy="lazyOnload"
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          crossOrigin="anonymous"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Step 3: Creating Ads

Use the adsbygoogle component inside your React components:

'use client';
import { useEffect } from 'react';

export default function AdSlot() {
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

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

Troubleshooting Common Issues

  • Ensure your Adsense account is approved.
  • Verify correct placement and visibility of your ads.
  • Check for ad-blocker conflicts during development.

During development you won't be able to see the actual ads, a strategy I have implemented was to use containers as place holders, so it makes it easier to see your layout these get swapped out in production, based on environments.

You create 3 components:

  • AdPlaceholder (mock ad)

export default function AdPlaceholder() {
  return (
    <div
      style={{
        backgroundColor: '#E5E7EB',   
        border: '2px dashed #9CA3AF', 
        width: '100%',
        height: '240px',             
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '0.5rem',       
      }}
    >
      <span
        style={{
          color: '#4B5563', 
          fontWeight: 500,
        }}
      >
        Ad Placeholder
      </span>
    </div>
  )
}

  • Adslot (actual ad code)

// components/AdSlot.tsx
'use client';

import { useEffect } from 'react';

export default function AdSlot() {
  useEffect(() => {
    // @ts-ignore
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

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

  • AdContainer (to add an ad anywhere in your app)

// components/AdContainer.tsx
import React from 'react';
import AdPlaceholder from './AdPlaceholder';
import AdSlot from './AdSlot';

export default function AdContainer() {
  // Next.js automatically sets `process.env.NODE_ENV` to "development" or "production".
  const isProd = process.env.NODE_ENV === 'production';

  if (isProd) {
    return <AdSlot />;
  }
  return <AdPlaceholder />;
}

Integrating Adsense with Next.js 14+ is straightforward with this setup, empowering you to generate passive revenue effectively.