ToolArc

ブログ記事

  • react-markdown
  • Next.js
  • アフィリエイト
  • フロントエンド
  • トラブルシューティング
  • JavaScript

react-markdownでaffiliate:リンクが空になるときの対処法

"react-markdownで独自スキーム（affiliate:など）のリンクを使うと、既定のURL変換処理でhrefが空文字になり、アフィリエイトリンクが機能しないことがあります。urlTransformでスキームを保持し、実URLへの解決をコンポーネント側に集約する対処法を整理します。"

Markdownで記事を書くとき、独自のスキーム（affiliate:program:creative のような書き方）でアフィリエイトリンクを管理していると、公開後にリンクをクリックしても外部サイトへ遷移せず、同じページに留まってしまうことがあります。筆者もNext.js＋react-markdownで記事を描画する中で、同じ症状に遭遇しました。

今日の結論

  • react-markdownの urlTransform（既定は defaultUrlTransform）は、安全のためあらかじめ許可されていないURLスキームを空文字に変換します
  • affiliate: のような独自スキームはこの許可リストに含まれないため、何も指定しないと href="" になります
  • href="" になると、Next.jsの <Link> は遷移先の無いリンクとして扱い、アフィリエイトリンクが機能しません
  • urlTransform で affiliate: だけは変換せずに通し、実際のURLへの解決はリンクを描画するコンポーネント側に集約するのが安全です

症状：affiliate:リンクのhrefが空になる

記事プレビューでアフィリエイトリンクをクリックしても外部サイトに遷移せず、同じページ内に留まってしまう場合、リンクの href が空文字列になっている可能性があります。画像バナー経由のリンクは専用コンポーネントを通していることが多く、その場合は影響を受けにくいため、テキストリンクだけで不具合が起きているように見えやすい点も、原因の切り分けを難しくします。

原因：react-markdownのURL変換処理

react-markdownには、Markdown中のリンクURLを描画前に変換する urlTransform というオプションがあります（バージョンによっては transformLinkUri や uriTransformer と呼ばれていました）。既定の変換処理は、安全性のためにあらかじめ許可されたURLスキーム（http、https、mailto など）以外を空文字に置き換える仕組みになっています。

affiliate: のような独自スキームはこの許可リストに含まれていないため、urlTransform を何も指定しない状態では、リンクのURLが空文字に変換されてしまいます。その結果、Next.jsの <Link> コンポーネントは遷移先の無いリンクとして扱い、自ページへのリンクのような挙動になります。

対処法：urlTransformでスキームを保持し、コンポーネント側で解決する

対処の流れは、次のとおりです。

  1. 記事プレビューでアフィリエイトリンクの href が空、または自ページへのリンクになっていないかを確認する
  2. ReactMarkdown に独自の urlTransform を渡し、affiliate: から始まるURLはそのまま通す（変換しない）
  3. リンクを描画する a コンポーネント側で、affiliate:program:creative のような文字列を、実際の遷移先URLに解決する
  4. ビルド後、本番相当のURLでクリック先を確認する
  5. 新しいASPを追加するときも、記事のMarkdownには affiliate: 形式のキーだけを書き、実際のURLは記事側ではなく1か所にまとめて管理する

Markdown本文には「どのアフィリエイトプログラムのどの広告か」を示すキーだけを書き、実際のURLへの変換はコンポーネント側に集約しておくと、ASPのURLが変わったときも記事本文を書き換えずに済みます。

実装時の注意点

  • urlTransform を上書きするときは、許可するスキームを広げすぎないようにします。任意のスキームをそのまま通すと、想定していないリンクも素通りしてしまう可能性があります
  • 画像バナー広告を専用コンポーネント経由で表示している場合は影響を受けにくいため、「バナーは動くのにテキストリンクだけ動かない」という状態は、この問題の一つのサインになります
  • react-markdownはバージョンによってオプション名や既定の挙動が変わることがあるため、実装前に利用しているバージョンの公式ドキュメントを確認することをおすすめします

公開前チェックリスト

  • 記事プレビューでアフィリエイトリンクの href が空、または自ページになっていないか確認した
  • urlTransform で独自スキームを明示的に許可した
  • リンクを解決するコンポーネント側で、実際のURLへの変換処理を実装した
  • ビルド後、本番相当の環境でクリック先が正しいか確認した

まとめ・次に読む

affiliate: のような独自スキームのリンクは、react-markdownの既定のURL変換処理によって空文字に変換されることがあります。urlTransform で許可するスキームを明示し、実際のURLへの解決はコンポーネント側に集約しておくと、ASP側のURL変更にも記事本文を書き換えずに対応しやすくなります。

次に読む

本記事は2026年7月4日時点で確認したreact-markdownの挙動をもとに執筆しています。ライブラリのバージョンによってオプション名や既定の挙動が異なる場合があるため、実装前に利用しているバージョンの公式ドキュメントもあわせてご確認ください。