はじめに
Next.jsでMarkdownを簡単に実装したい！と思ったことはありませんか？react-markdownを使えば、Next.jsでMarkdownを簡単に実装できます。
この記事では、react-markdownの基本的な使い方から、TailwindCSSと組み合わせる場合のコツまで、分かりやすく解説します。
最後までご覧いただけると幸いです！
react-markdownとは
まずは、react-markdownの紹介です。
react-markdownは、ReactでMarkdownをレンダリングするためのライブラリです。
Markdown形式のテキストをHTMLに変換し、Reactコンポーネントとして表示することができます。
カスタマイズ性が高く、プラグインで機能を拡張できます。機能拡張することで多様な表示方法を実現することができます。
remark-gfmプラグイン
react-markdownの代表的なプラグインのremark-gfmの紹介です。
remark-gfm は、GitHub Flavored Markdown (GFM) の記法を react-markdown で使えるようにするプラグインです。GFMはGitHubで広く使われているMarkdownの拡張版で、標準のMarkdownに加えて、テーブル、取り消し線、自動リンクなどの便利な記法が追加されています。
Markdownを実装してみましょう！
実際にreact-markdownを使ってMarkdownを実装してみましょう。
今回は、Next.js15(TailwindCSSを使用)の環境で実装していきます。
react-markdownとremark-gfmプラグインをインストールします。
npm install react-markdown remark-gfm
コード全体
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>
);
};
結果画面
Markdown記法の部分が正しく表示されていません。どうしてでしょうか。
TailwindCSSを使っている場合は、少し工夫が必要となります。
react-markdown × TailwindCSSでのコツ
TailwindCSSはデフォルトのCSSをリセットするため、react-markdownで変換されたHTML要素のスタイルもリセットされてしまいます。そのため、Markdown形式で表示されなくなってしまうというわけです。
tailwindcss/typographyプラグインを使用する
この問題は、tailwindcss/typographyプラグインを使用することで解決できます。
tailwindcss/typographyは、Tailwind CSS の公式プラグインで、HTML で書かれた文章に美しいタイポグラフィを簡単に適用するためのものです。
実際に導入していきましょう。
tailwindcss/typographyをインストールします。
npm install @tailwindcss/typography
tailwind.config.tsに以下のように追記します。
import type { Config } from "tailwindcss";
export default {
content: [
// ...
],
theme: {
// ...
},
plugins: [require("@tailwindcss/typography")], // 追記
} satisfies Config;
react-markdownの部分のclassNameにproseを追加します。
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>
);
};
結果画面
無事、Markdown形式で表示されるようになりました！
最後に
この記事では、react-markdownを使ってNext.jsでMarkdownを実装する方法を紹介しました。tailwindcss/typographyプラグインを使えば、TailwindCSSとの組み合わせも簡単です。
私は、この部分で少しハマったので、同じような方の助けに少しでもなれば幸いです！
Next.jsでMarkdownを実装する際は、ぜひreact-markdownを使ってみてください！
この記事が役に立ったら、ぜひいいねやシェアお願いします！
最後までご覧いただきありがとうございます。