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>
)
}
...
以上。