Next.js + MDX にツイートを埋め込む方法【機能追加】

最終更新日: 2025/3/22

Hi there 👋 Blueberry Mojito（略して b13o）は、 React 開発を学習するコミュニティです！初心者が、モダンな技術スタックで、フロントエンドアプリを作れるようになるために、： - 勉強会 - ハンズオンワークショップ - 共同プロジェクトなどを行っています 🫐🌿 #b13o b13o.com

4:27 PM · Nov 30, 2024

Read 1 reply

はじめに

ブログやドキュメントサイトでは、
Twitter のツイートを埋め込んで内容を豊かにすることがよくありますよね。

今回は、Next.js/App Router と MDX で構築されたアプリケーションに、
URL を貼るだけでツイートを埋め込む機能を追加する方法を、紹介します。

機能追加した、記録ですー 🙌

実際の使用方法

使い方としては、
以下のように MDX または md ファイル内に Twitter（X）の URL を貼るだけで、ツイートが埋め込まれます。

この記事の冒頭の例：

https://x.com/b13ocom/status/1862896133045178476
 
## はじめに
 
ブログやドキュメントサイトでは、
[Twitter のツイート](https://x.com/b13ocom/status/1862896133045178476)を埋め込んで内容を豊かにすることがよくありますよね。
 
今回は、Next.js/App Router と MDX で構築されたアプリケーションに、
**URL を貼るだけでツイートを埋め込む機能を追加する方法**を、紹介します。

このように、特別なコンポーネント構文を使わずに、
URL を貼るだけでツイートが自動的に埋め込まれます。

文章の中にある場合は、通常のリンクとしても表示できますね！

執筆の流れを妨げることなく、素早くコンテンツを追加できますね。

react-tweet の紹介

GitHub - vercel/react-tweet: Embed tweets in your React application.

Embed tweets in your React application. Contribute to vercel/react-tweet development by creating an account on GitHub.

github.com

ツイート埋め込みの実装には、Vercel が提供するreact-tweetライブラリを使用します。

このライブラリは、以下の特徴を持っています：

サーバーサイドレンダリング（SSR）に対応
軽量で高速
カスタマイズ可能なスタイル
Twitter API のレート制限を考慮したキャッシング機能

まずは、プロジェクトに react-tweet をインストールします：

npm install react-tweet
# または
yarn add react-tweet

実装手順

1. TwitterCard コンポーネントの作成

まず、ツイートを表示するためのTwitterCardコンポーネントを作成します：

"use client";
 
import { Tweet } from "react-tweet";
import "react-tweet/assets/light-theme.css";
import styles from "./twitter-card.module.css";
 
export default function TwitterCard({ id }: { id: string }) {
  return (
    <div className={styles.twitterCard}>
      <Tweet id={id} />
    </div>
  );
}

react-tweet をラッピングしています。
MDX ばら、これだけでも、Twitter の埋め込み機能を実装することができますね！

2. rehype プラグインの作成

次に、Twitter URL を自動検出してTwitterCardコンポーネントに変換する rehype プラグインを作成します：

import { visit } from "unist-util-visit";
import { Element, Root } from "hast";
 
// Twitter/X URLパターンの正規表現
const TWITTER_URL_REGEX =
  /^https?:\/\/(www\.)?(twitter|x)\.com\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+)(?:\?.*)?$/;
 
export function rehypeTwitterUrls() {
  return (tree: Root) => {
    visit(tree, "element", (node: Element, _, parent?: Element) => {
      // a要素のみを処理
      if (node.tagName !== "a") return;
 
      // hrefプロパティを確認
      const href = node.properties?.href;
      if (!href || typeof href !== "string") return;
 
      // Twitter/X URLにマッチするか確認
      const match = href.match(TWITTER_URL_REGEX);
      if (!match || !match[4]) return;
 
      // 単独のURLの場合のみ変換（段落内にURLのみが存在する場合）
      if (
        parent?.type === "element" &&
        parent?.tagName === "p" &&
        parent.children.length === 1
      ) {
        // ツイートIDを抽出
        const tweetId = match[4];
 
        // TwitterCardコンポーネントに変換
        const twitterCardNode: Element = {
          type: "element",
          tagName: "TwitterCard",
          properties: { id: tweetId },
          children: [],
          position: node.position,
        };
 
        // 親のpタグを置き換える
        if (parent) {
          parent.tagName = twitterCardNode.tagName;
          parent.properties = twitterCardNode.properties;
          parent.children = twitterCardNode.children;
        }
      }
    });
  };
}