【Next.js】リンクカードの実装方法について

async function fetchOGPData(url: string) {
  // 応答の遅いサイトが1つあるだけでページ全体の生成が止まるので、必ず打ち切る
  const response = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const html = await response.text();
  const $ = cheerio.load(html);

  const getMetaTag = (name: string) => {
    return (
      $(`meta[property="og:${name}"]`).attr('content') ||
      $(`meta[name="twitter:${name}"]`).attr('content') ||
      $(`meta[name="${name}"]`).attr('content')
    );
  };

  return {
    title: getMetaTag('title'),
    description: getMetaTag('description'),
    image: getMetaTag('image'),
  };
}

const html = "ブログの内容をHTML形式に変換したものを代入";

const parse_body = cheerio.load(html);

// 外部から取ってきた文字列をそのまま HTML に入れると、
// リンク先の meta タグに仕込んだタグがそのまま展開されてしまう
const escapeHtml = (value: string) =>
  value
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');

// 全てのリンク要素を取得（同じ URL は 1 回だけ取りにいく）
const links = new Set<string>();
parse_body('a').each((_, link) => {
  const href = parse_body(link).attr('href');
  if (href && !href.startsWith('#')) {
    links.add(href);
  }
});
const uniqueLinks = Array.from(links);

// 各リンクのOGPデータを非同期で取得（効率化のため並列実行）
// Promise.all だと 1 件の失敗で全部落ちるので allSettled を使う
const ogpDataResults = await Promise.allSettled(
  uniqueLinks.map((href) => fetchOGPData(href))
);

// hrefとOGPデータをマッピング（取れなかったものは入れない）
const hrefToOgpData = new Map<string, { title?: string; image?: string }>();
uniqueLinks.forEach((href, index) => {
  const result = ogpDataResults[index];
  if (result.status === 'fulfilled') {
    hrefToOgpData.set(href, result.value);
  }
});

// リンクカードの生成とHTMLの更新
parse_body('a').each((_, link) => {
  const href = parse_body(link).attr('href');
  if (!href || href.startsWith('#')) {
    return;
  }

  const meta = hrefToOgpData.get(href);
  // OGP が取れなかったリンクは普通の a タグのまま残す
  if (!meta?.title) {
    return;
  }

  const thumbnail = meta.image
    ? `<img src="${escapeHtml(meta.image)}" class="link-card-thumbnail" alt="" />`
    : '';

  const linkCardHTML = `
    <div class="link-card mt-3 mb-3">
      <a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">
        <div class="link-card-body">
          <div class="link-card-info">
            <div class="link-card-title">${escapeHtml(meta.title)}</div>
            <div class="link-card-url">${escapeHtml(href)}</div>
          </div>
          ${thumbnail}
        </div>
      </a>
    </div>
  `;

  parse_body(link.parent).replaceWith(linkCardHTML);
});

.link-card {
  -webkit-box-align: center;
  border: 0.3px solid rgb(var(--foreground-rgb));
  border-radius: 8px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  overflow: hidden;
  text-decoration: none;
  word-break: break-all;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.link-card > a{
  color: rgb(var(--foreground-rgb));
  width: 100%;
}

.link-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.link-card-body {
  display: flex;
  justify-content: space-between;
}

.link-card-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.0rem;
  flex: 1; 
}

.link-card-title {
  color: var(--color-text-high-emphasis);
  display: -webkit-box;
  font-weight: 600;
  font-size: 1.0rem;
  line-height: 1.5;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.link-card-url {
  color: var(--color-text-high-emphasis);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.8;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}


.link-card-thumbnail {
  border-left: 1px solid var(--color-divider);
  flex-shrink: 0;
  object-fit: cover;
  width: 270px;
  margin: 0;
}

.link-card-body > img {
  border-radius: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 110px;
}

@media (max-width: 768px){
  .link-card-thumbnail {
    width: 220px;
  }
}

@media (max-width: 479px){
  .link-card-thumbnail {
    width: 110px;
  }
}