Next.jsのMDXにMermaidダイアグラムを追加する
Next.js 15のMDXを使用したブログにMermaidダイアグラムを追加する実装方法を、既存のシンタックスハイライターとのコンフリクト回避、ライトモード・ダークモードへのテーマ対応、フローチャート・シーケンス図・クラス図・ガントチャートなど多様なダイアグラムの描画方法とともにまとめた記事です。
- フロントエンド
MDXのシンタックスハイライト:react-syntax-highlighterからShikiへの移行
MDXのシンタックスハイライトをShikiに移行した際の記録。React Server Componentによるクライアントバンドル0KB化、CSS変数のみでのテーマ切り替え、VS Code品質のハイライト実現など、パフォーマンス最適化の実践的手法を説明します。
- フロントエンド
Next.js unstable_cacheでビルド時間を改善する
Next.js 14のunstable_cacheを活用してブログサイトの記事取得処理をキャッシュ化し、重複するファイルアクセスを削減してビルド時間を短縮する実装方法を解説します。
- フロントエンド
- パフォーマンス