Next.js 動的ルートと専用ルートの共存パターン -- 設計・検証・バンドル最適化
Next.js App Routerで動的ルートと専用ルートを共存させる設計パターンを解説。自動ルート優先の仕組み、generateStaticParamsの除外が不要な理由、Client Componentがバンドルに与える影響を実験で検証しました。
AI試行錯誤ブログ
Next.js・TypeScriptを中心とした技術的な実装記録。設計パターン、落とし穴の解説、パフォーマンス改善など、実践から得た知見をまとめています。
Next.js 15のRoute Handlerデフォルト変更と、バンドルサイズを継続的に守るテスト設計
Next.js 15以降のRoute HandlerデフォルトキャッシュがGETも動的に変わった仕様変更と、Turbopack環境でビルド成果物を直接解析するバンドル回帰テストの設計を解説します。
next/dynamicの2つの落とし穴 ── ローディングフラッシュと偽りのコード分割を解消する
next/dynamicで発生するローディングフラッシュと、ループ初期化によるコード分割の失敗という2つの独立した問題を分析し、動的ルートから個別ページへの分割で両方を解消した設計判断とその効果を解説します。
Mermaid ganttチャートのコロンの罠とmermaid.render()によるテスト戦略
Mermaid.jsのganttチャートでタスク名にコロンを含めるとパースが壊れる原因と回避方法、mermaid.parse()だけではテストとして不十分な理由、vitest/jsdom環境でmermaid.render()を動かすためのSVG mockテクニックを解説します。
MarkedのHTML出力を安全にする設計ガイド
markedのsanitizeオプション廃止後、sanitize-htmlでMarkdown由来のHTMLをホワイトリスト方式でサニタイズする設計を解説。GFMタスクリスト・GFM Alert・mermaid対応のホワイトリスト設定例、markdownToHtml()への統合パターン、動作確認の考え方をコード付きで紹介します。
cron式の日と曜日がOR判定になる仕様と落とし穴
Vixie cronの日フィールド(DOM)と曜日フィールド(DOW)を同時に指定するとOR判定になる仕様、JavaScriptのparseIntが不正な入力を見逃す問題、年1回実行のcron式で必要になる探索ウィンドウの動的スケーリングについて、実装コードとともに解説します。
Next.jsハイドレーション不整合をシード付き乱数で解決する
Math.random()がNext.jsでハイドレーション不整合を起こす理由と、useEffectパターンの限界、slug由来シード+線形合同法による決定論的シャッフルの実装方法を解説します。
JavaScriptのDate APIに潜む2つの落とし穴: 自動補正とタイムゾーン解釈
JavaScriptのDate APIによる日付自動補正（2月31日が3月3日になる問題）とYYYY-MM-DD形式のUTC解釈問題を解説。ラウンドトリップ検証パターンとISO 8601+タイムゾーン形式による根本対策を、実際のバグ事例とコードで紹介します。
Next.jsサイトのSEOメタデータ完全対策: OGP・canonical・Twitter Card・JSON-LDセキュリティまで
OGP・canonical・Twitter Cardの統一設定、sitemapのlastModified管理、JSON-LDのscript-breakout対策、SEOテストの実装方法を解説します。
marked で GFM Alert（補足ボックス）を実装する：marked-alert の導入から CSS スタイリングまで
GFM Alert構文（> [!NOTE] 等）をmarkedで扱うためのmarked-alertの導入方法、CSS変数によるダークモード対応スタイルのコード例を紹介します。GitHubとGitLabの両方でレンダリングできる標準構文の実装ノウハウです。
URLを変えるべきか迷ったら: SEO・UX・競合の3軸で判断するURL設計フレームワーク
多コンテンツサイトのURL構造を見直す際に使える、SEO・UX・競合分析の3軸判断フレームワークを紹介します。具体的な数値データ、情報アーキテクチャの原則、競合サイト分析、4つの判断事例を通じて、URL変更の「する/しない」を根拠を持って決められるようになります。
ゲームと辞典のLayout共通化: 品質要素を全コンテンツに広げる第3弾
コンテンツ種別（ゲーム・辞典・ツール）に応じたLayoutコンポーネントの設計判断を解説します。usageExampleのラベル変更、品質データの管理粒度、h1の配置、CSS役割分担など、コンテンツの特性から設計を導く考え方が中心です。