Yahoo!ショッピングの広告リンクを追加する（Next.js）

Next.js

microCMS

2026/01/31

PRを含みます

最近、Yahoo!ショッピングでアフィリエイト広告が配信できるようになったようだ。以前は当サイトではヤフーショッピングのリンクは一律固定のものになってしまっていたが、商品ごとに今後は紹介できるようになったので、サイト側も対応できるようにしたいと思う。

ヤフーショッピングのアフィリエイト広告開始（2026/1/26～）

以前はバリューコマースなど一部でしかYahoo!ショッピングのアフィリエイトをできなかったが、最近ヤフーショッピング側でアフィリエイトが始まった形だ。詳しくは以下のサイトを参照してほしい

事前のカスタマイズ

本記事は以下で実施したカスタマイズの追加修正になる。以下も参考にしてほしい

microCMS側の対応

microCMSで記事を書く際にブログパーツのような形で広告を配信できるようにしたいので、カスタムフィールドの追加を行った。

自分の場合はフィールドIDを「yahoo_link」に、表示名を「Yahoo!ショッピングリンク」、種類を「テキストフィールド」にした

articleコンポーネント側の対応

Next.jsのコンポーネント側で呼び出しできるようにカスタマイズを行った。記事を呼び出しているarticleコンポーネントを以下のように改修した

        <div className={styles.content}>
          {data.main.map((block, index) => {
            if (block.fieldId === "main_text" || block.fieldId === "html") {
              const cleanHtml = (
                block.fieldId === "main_text" ? block.editor : block.html
              ).replace(
                /<script.*?\bplatform\.twitter\.com\/widgets\.js\b.*?>.*?<\/script>/gi,
                "",
              );

              return (
                <div
                  key={`${block.fieldId}-${index}`}
                  dangerouslySetInnerHTML={{ __html: cleanHtml }}
                  className={styles.content}
                />
              );
            }
            if (block.fieldId === "product") {
              return (
                <div key={`product-${index}`} className={styles.product}>
                  <Image
                    src={block.product_image.url}
                    alt={block.product_name}
                    width={block.product_image.width}
                    height={block.product_image.height}
                    className={styles.product_image}
                  />
                  <div className={styles.product_info}>
                    <span className={styles.product_name}>
                      {block.product_name}
                    </span>
                    <div className={styles.product_links}>
                      <a
                        href={block.amazon_link}
                        target="_blank"
                        className={`${styles.link} ${styles.amazon}`}
                      >
                        Amazon
                      </a>
                      <a
                        href={block.rakuten_link}
                        target="_blank"
                        className={`${styles.link} ${styles.rakuten}`}
                      >
                        楽天市場
                      </a>
                      <a
                        href={block.yahoo_link}
                        target="_blank"
                        className={`${styles.link} ${styles.yahoo}`}
                      >
                        Yahoo!ショッピング
                      </a>
                    </div>
                  </div>
                </div>
              );
            }
            return null;
          })}
        </div>

microcms.tsの修正

Mainで記事コンテンツ部分を呼び出していて、今回yahoo_linkも呼び出せるように追加する

export type Main = {
  fieldId: string;
  editor: string;
  html: string;
  product_name: string;
  product_link: string;
  amazon_link: string;
  rakuten_link: string;
  yahoo_link: string; //追加
  product_image: {
    url: string;
    width: number;
    height: number;
  };
};