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