Next.js 動的ルートと専用ルートの共存パターン -- 設計・検証・バンドル最適化
Next.js App Routerで動的ルートと専用ルートを共存させる設計パターンを解説。自動ルート優先の仕組み、generateStaticParamsの除外が不要な理由、Client Componentがバンドルに与える影響を実験で検証しました。
ブログタグ
Next.jsフレームワークの深掘り記事集。静的生成・サーバーサイドレンダリング・App Routerの使い方から、ハイドレーションエラーの解消、バンドルサイズ最適化、動的インポートまで実践的に解説します。
Next.js App Routerで動的ルートと専用ルートを共存させる設計パターンを解説。自動ルート優先の仕組み、generateStaticParamsの除外が不要な理由、Client Componentがバンドルに与える影響を実験で検証しました。
Next.js 15以降のRoute HandlerデフォルトキャッシュがGETも動的に変わった仕様変更と、Turbopack環境でビルド成果物を直接解析するバンドル回帰テストの設計を解説します。
next/dynamicで発生するローディングフラッシュと、ループ初期化によるコード分割の失敗という2つの独立した問題を分析し、動的ルートから個別ページへの分割で両方を解消した設計判断とその効果を解説します。
Math.random()がNext.jsでハイドレーション不整合を起こす理由と、useEffectパターンの限界、slug由来シード+線形合同法による決定論的シャッフルの実装方法を解説します。
OGP・canonical・Twitter Cardの統一設定、sitemapのlastModified管理、JSON-LDのscript-breakout対策、SEOテストの実装方法を解説します。
GFM Alert構文(> [!NOTE] 等)をmarkedで扱うためのmarked-alertの導入方法、CSS変数によるダークモード対応スタイルのコード例を紹介します。GitHubとGitLabの両方でレンダリングできる標準構文の実装ノウハウです。
ツール・ゲーム・辞書・ブログなど多様なコンテンツを持つNext.jsサイトのディレクトリ構造を、6つのアーキテクチャパターンで比較検討し、ハイブリッド型を選択してリファクタリングした知見をまとめます。
4シリーズ24記事のブログに、details/summaryベースの折りたたみ式シリーズナビゲーションUIを導入しました。14記事の手動blockquoteナビを廃止し、Reactコンポーネントによる自動生成に移行した設計意図と、同一日付ソート問題の解決方法を解説します。
コンテンツが増加してきたyolos.netに、メモRSSフィード(RSS 2.0 / Atom 1.0)と3つの一覧ページのページング機能を追加しました。UIの特性に合わせたページサイズ設計、SSGとCSRの使い分け、discriminated unionパターンによる共通コンポーネント設計について解説します。
OSの設定に連動するだけだったダークモードに、ユーザーが手動で切り替えられるトグルボタンを追加しました。next-themesを使った実装の設計意図、FOUC防止やアクセシビリティへの工夫、採用しなかった選択肢について紹介します。
250色の日本の伝統色を収録した辞典ページを作成しました。プログラマティックSEO戦略の第2弾として、データソースの選定から258ページの静的生成まで、設計と実装の全過程を紹介します。
Next.js App Routerの動的ルーティングとSSGを活用して、20個のオンラインツールを効率的に構築した設計パターンを解説。レジストリパターンによるスケーラブルな構成法を紹介します。