Next.jsでMarkdownを簡単に実装！react-markdown × TailwindCSSのコツを解説

## はじめに
Next.jsでMarkdownを簡単に実装したい！と思ったことはありませんか？`react-markdown`を使えば、Next.jsでMarkdownを簡単に実装できます。

この記事では、`react-markdown`の基本的な使い方から、TailwindCSSと組み合わせる場合のコツまで、分かりやすく解説します。

最後までご覧いただけると幸いです！

## react-markdownとは
まずは、`react-markdown`の紹介です。

`react-markdown`は、ReactでMarkdownをレンダリングするためのライブラリです。 
Markdown形式のテキストをHTMLに変換し、Reactコンポーネントとして表示することができます。
カスタマイズ性が高く、プラグインで機能を拡張できます。機能拡張することで多様な表示方法を実現することができます。

https://github.com/remarkjs/react-markdown

## remark-gfmプラグイン
`react-markdown`の代表的なプラグインの`remark-gfm`の紹介です。

`remark-gfm` は、GitHub Flavored Markdown (GFM) の記法を `react-markdown` で使えるようにするプラグインです。GFMはGitHubで広く使われているMarkdownの拡張版で、標準のMarkdownに加えて、テーブル、取り消し線、自動リンクなどの便利な記法が追加されています。

https://github.com/remarkjs/remark-gfm


## Markdownを実装してみましょう！
実際に`react-markdown`を使ってMarkdownを実装してみましょう。

今回は、Next.js15(TailwindCSSを使用)の環境で実装していきます。

`react-markdown`と`remark-gfm`プラグインをインストールします。

```zsh
npm install react-markdown remark-gfm
```

**コード全体**
```typescript 
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export default function App() {
  const markdown = `
# 見出し1

これはreact-markdownのサンプルです。

## 見出し2

- リスト1
- リスト2

\`\`\`javascript
const message = "Hello, world!";
console.log(message);
\`\`\`

**太字**

[リンク](https://www.google.com/)

> 引用

## GFMの機能

| ヘッダー1 | ヘッダー2 |
|---|---|
| セル1 | セル2 |

~~取り消し線~~

- [x] タスク完了
- [ ] タスク未完了

[^1]: 脚注

 脚注付きテキスト[^1].
  `;

  return (
    <div>
      <Markdown remarkPlugins={[remarkGfm]}>
        {markdown}
      </Markdown>
    </div>
  );
};
```

**結果画面**

![FireShot Capture 003 - Create Next App - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3938038/ce55a590-d0d8-3609-35bc-5de72681953f.png)


Markdown記法の部分が正しく表示されていません。どうしてでしょうか。

TailwindCSSを使っている場合は、少し工夫が必要となります。

## react-markdown × TailwindCSSでのコツ
TailwindCSSは**デフォルトのCSSをリセット**するため、`react-markdown`で変換されたHTML要素のスタイルもリセットされてしまいます。そのため、Markdown形式で表示されなくなってしまうというわけです。

https://tailwindcss.com/docs/preflight

### tailwindcss/typographyプラグインを使用する
この問題は、`tailwindcss/typography`プラグインを使用することで解決できます。
`tailwindcss/typography`は、Tailwind CSS の公式プラグインで、HTML で書かれた文章に美しいタイポグラフィを簡単に適用するためのものです。

https://github.com/tailwindlabs/tailwindcss-typography

実際に導入していきましょう。

`tailwindcss/typography`をインストールします。

```zsh
npm install @tailwindcss/typography
```

`tailwind.config.ts`に以下のように追記します。

```typescript
import type { Config } from "tailwindcss";

export default {
  content: [
    // ...
  ],
  theme: {
    // ...
  },
  plugins: [require("@tailwindcss/typography")],  // 追記
} satisfies Config;
```

`react-markdown`の部分のclassNameに`prose`を追加します。

```typescript
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export default function App() {
  const markdown = `
# 見出し1

これはreact-markdownのサンプルです。

## 見出し2

- リスト1
- リスト2

\`\`\`javascript
const message = "Hello, world!";
console.log(message);
\`\`\`

**太字**

[リンク](https://www.google.com/)

> 引用

## GFMの機能

| ヘッダー1 | ヘッダー2 |
|---|---|
| セル1 | セル2 |

~~取り消し線~~

- [x] タスク完了
- [ ] タスク未完了

[^1]: 脚注

 脚注付きテキスト[^1].
  `;

  return (
    <div>
      <Markdown remarkPlugins={[remarkGfm]} className="prose">
        {markdown}
      </Markdown>
    </div>
  );
};
```

**結果画面**

![FireShot Capture 004 - Create Next App - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3938038/69923c65-c4bb-e5f9-2c72-258adc88f299.png)


無事、Markdown形式で表示されるようになりました！

## 最後に
この記事では、`react-markdown`を使ってNext.jsでMarkdownを実装する方法を紹介しました。`tailwindcss/typography`プラグインを使えば、TailwindCSSとの組み合わせも簡単です。
私は、この部分で少しハマったので、同じような方の助けに少しでもなれば幸いです！

Next.jsでMarkdownを実装する際は、ぜひ`react-markdown`を使ってみてください！

この記事が役に立ったら、ぜひいいねやシェアお願いします！

最後までご覧いただきありがとうございます。