Next.jsで作成した関連記事にMultiplex広告を追加する

Next.js

microCMS

AdSense

2025/10/13

2026/01/31

PRを含みます

スマホ版イメージ

PC版イメージ

実装方法

関連記事の実装方法は以下の記事も参考にしてみてください。今回は以下の記事にアドセンスのタグを追加します。

Next.jsで関連記事（レコメンド）を作る

import type { News } from "@/app/_libs/microcms";
import Image from "next/image";
import Link from "next/link";
import styles from "./index.module.css";
import Date from "@/app/_components/Date";
import { RECOMMEND_LIST_LIMIT } from "@/app/_constants/";

type Props = {
  contents: News[];
  title: string;
};

export default function Recommend({ contents, title }: Props) {
  if (!contents || contents.length === 0) {
    return <div>記事がありません</div>;
  }

  const limitedContents = contents.slice(0, RECOMMEND_LIST_LIMIT);

  return (
    <section className={styles.recommendContainer}>
      <div className={styles.cardContainer}>
        <div className={styles.recommendItems}>
          {limitedContents.map((item) => (
            <div key={item.id} className={styles.recommendItem}>
              <Link href={`/blog/${item.id}`} className={styles.recommendLink}>
                <Image
                  src={item.thumbnail?.url || "/no-image.png"}
                  alt={item.title}
                  width={1200}
                  height={630}
                  className={styles.thumbnail}
                  priority
                />
                <div className={styles.titleContainer}>
                  <h4 className={styles.titleText}>{item.title}</h4>
                  {item.publishedAt && <Date date={item.publishedAt} />}
                </div>
              </Link>
            </div>
          ))}
        </div>
      </div>

      {/* AdSenseの広告タグ */}
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="XXXXXXXXXX"
        data-ad-format="autorelaxed"
      ></ins>
    </section>
  );
}

関連記事コンポーネントの広告タグの箇所がそうです。固有のパラメータは適宜置き換えて実装してみてください。なおアドセンスで読みこむJSタグですが全ページに表示しているサイドメニューでも読み込んでいるので本サイトでは省略していますが、必要な場合は以下のようにしてください

{/* AdSenseの広告タグ */}
<ins
 className="adsbygoogle"
 style={{ display: "block" }}
 data-ad-client="ca-pub-6783574511450629"
 data-ad-slot="4324807365"
 data-ad-format="autorelaxed"
></ins>

{/* AdSenseのスクリプトを読み込む */}
<Script id="adsbygoogle-init" strategy="afterInteractive">
 {`(adsbygoogle = window.adsbygoogle || []).push({});`}
</Script>