Rendezvous-Tokyo

Next.jsのMarkdownブログ内にもしもアフィリエイトの簡単リンク表示

結論

dangerously-set-html-content (opens new window)を使う。

こんな感じになる

もしも

具体的に

1. インストール

yarn add dangerously-set-html-content

2. Markdown記事を書く。

Markdown記事の中にそのままコードを貼る。

---
title: "Next.jsでもしもアフィリエイト"
date: "2024-02-25"
thumbnail: "/images/hoge.webp"
tags:
  - hoge
---

こんにちはもしもアフィリエイトの広告は以下です。

<!-- ここからアフィリリンク貼る -->
<!-- START MoshimoAffiliateEasyLink -->
<script type="text/javascript">
  ...(省略)
</script>
<div id="msmaflink-syuT8">リンク</div>
<!-- MoshimoAffiliateEasyLink END -->
<!-- ここまで -->

3. Next.js側

[slug].tsxなどで

import { marked } from 'marked';
import InnerHTML from 'dangerously-set-html-content'

...
export default function Post({ postData, tags }: PostProps) {
  // MarkdownからHTML文字列に変換
  const processedContent = await marked(postData.content);
  ...

  return (
  <div>
    {/* これでscriptタグを実行できる */}
    {processedContent && <InnerHTML html={processedContent} />}
  </div>
  )
}
...

以上。