Next.jsのMDXにMermaidダイアグラムを追加する

2026年2月17日(火)4ヶ月前

Next.js 15のMDXを使用したブログにMermaidダイアグラムを追加する実装方法を、既存のシンタックスハイライターとのコンフリクト回避、ライトモード・ダークモードへのテーマ対応、フローチャート・シーケンス図・クラス図・ガントチャートなど多様なダイアグラムの描画方法とともにまとめた記事です。

• フロントエンド

MDXのシンタックスハイライト：react-syntax-highlighterからShikiへの移行

2026年1月18日(日)5ヶ月前

MDXのシンタックスハイライトをShikiに移行した際の記録。React Server Componentによるクライアントバンドル0KB化、CSS変数のみでのテーマ切り替え、VS Code品質のハイライト実現など、パフォーマンス最適化の実践的手法を説明します。

• フロントエンド

Next.js unstable_cacheでビルド時間を改善する

2025年9月21日(日)9ヶ月前

Next.js 14のunstable_cacheを活用してブログサイトの記事取得処理をキャッシュ化し、重複するファイルアクセスを削減してビルド時間を短縮する実装方法を解説します。

• フロントエンド
• パフォーマンス