Next.js에 Google AdSense 광고를 삽입

Next.js에 Google AdSense 광고를 삽입할 수 있습니다. 다만, Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하기 때문에 AdSense 코드가 제대로 실행되려면 클라이언트 사이드에서 실행되도록 설정해야 합니다.

1. Google AdSense 승인 및 코드 발급

먼저, Google AdSense 계정을 승인받고, 광고 코드를 발급받아야 합니다.

2. Next.js에 AdSense 삽입하는 방법

(1) _document.js에 전체 사이트용 스크립트 추가

Google AdSense의 스크립트를 모든 페이지에서 실행하려면 _document.js 또는 _document.tsx 파일을 수정해야 합니다.

📌 pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    
      
        {/* Google AdSense Script */}

); }

(2) 특정 페이지 또는 컴포넌트에 광고 배너 추가

다음은 특정 페이지나 컴포넌트에서 광고를 삽입하는 방법입니다.

📌 components/AdSense.js (광고 컴포넌트)

import { useEffect } from 'react';

const AdSense = ({ adClient, adSlot, format = "auto", responsive = "true" }) => {
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {
      console.error("AdSense error", e);
    }
  }, []);

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

export default AdSense;

이제 광고를 넣고 싶은 페이지에서 다음과 같이 사용하면 됩니다.

📌 pages/index.js (홈페이지에서 광고 삽입)

import AdSense from "../components/AdSense";

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a sample Next.js page with Google AdSense.</p>

      {/* Google AdSense 광고 삽입 */}
      <AdSense adClient="ca-pub-XXXXXXXXXX" adSlot="1234567890" />

    </div>
  );
}

(3) SSR 이슈 해결 (동적 로딩)

Next.js에서는 Google AdSense가 window 객체를 필요로 하기 때문에 SSR에서는 작동하지 않습니다. 이를 해결하기 위해 next/dynamic을 활용해 동적으로 로드해야 합니다.

📌 동적 로딩을 적용한 광고 컴포넌트 사용

import dynamic from 'next/dynamic';

const AdSense = dynamic(() => import('../components/AdSense'), { ssr: false });

export default function Home() {
  return (
    <div>
      <h1>My Next.js Website</h1>
      <AdSense adClient="ca-pub-XXXXXXXXXX" adSlot="1234567890" />
    </div>
  );
}

---

3. 추가 설정 및 고려 사항

1. 광고 반응형 디자인 적용
   • Google AdSense는 반응형 광고를 지원합니다. <ins> 태그 내에 data-full-width-responsive="true"를 추가하면 됩니다.
2. 광고 표시가 안 되는 경우
   • AdSense가 승인이 완료되지 않으면 광고가 표시되지 않습니다.
   • 도메인이 AdSense에 등록되지 않았다면 광고가 나오지 않습니다.
   • ad-block 확장 프로그램이 광고 차단하는 경우도 있음.
3. 페이지 속도 영향 최소화
   • Google AdSense 스크립트가 로딩 속도에 영향을 줄 수 있으므로, 필요한 경우 lazy-loading 기법을 활용하세요.

---

결론

Next.js에서 Google AdSense 광고를 사용하려면:

1. _document.js에 AdSense 스크립트 추가
2. 광고 컴포넌트(AdSense.js)를 만들어 동적으로 로드
3. 특정 페이지에서 next/dynamic을 사용하여 SSR 문제 해결
4. 광고가 표시되지 않을 경우 AdSense 승인 및 도메인 등록 확인

이 방법을 따르면 Next.js에서도 AdSense 광고를 원활하게 삽입할 수 있습니다. 🚀