Next.js 動的ルートと専用ルートの共存パターン -- 設計・検証・バンドル最適化
Next.js App Routerで動的ルートと専用ルートを共存させる設計パターンを解説。自動ルート優先の仕組み、generateStaticParamsの除外が不要な理由、Client Componentがバンドルに与える影響を実験で検証しました。
ブログタグ
パフォーマンス
Webサイトのパフォーマンス最適化に関する実践記事集。画像最適化の手法、JavaScriptバンドルサイズの削減、レンダリング戦略の適切な選択など、ユーザー体験を向上させるための高速化テクニックを詳しく解説します。
Next.js 15のRoute Handlerデフォルト変更と、バンドルサイズを継続的に守るテスト設計
Next.js 15以降のRoute HandlerデフォルトキャッシュがGETも動的に変わった仕様変更と、Turbopack環境でビルド成果物を直接解析するバンドル回帰テストの設計を解説します。
next/dynamicの2つの落とし穴 ── ローディングフラッシュと偽りのコード分割を解消する
next/dynamicで発生するローディングフラッシュと、ループ初期化によるコード分割の失敗という2つの独立した問題を分析し、動的ルートから個別ページへの分割で両方を解消した設計判断とその効果を解説します。
サイト内検索を実装しました -- Fuse.jsで500件の日本語コンテンツを横断検索
Fuse.jsを使ったCmd+Kモーダル型のサイト内検索機能を実装しました。ライブラリ選定の比較、遅延ロードによるパフォーマンス設計、日本語コンテンツの検索対応について紹介します。