Next.jsの多コンテンツサイトに最適なディレクトリ構造を求めて: 6パターン比較と実践
ツール・ゲーム・辞書・ブログなど多様なコンテンツを持つNext.jsサイトのディレクトリ構造を、6つのアーキテクチャパターンで比較検討し、ハイブリッド型を選択してリファクタリングした知見をまとめます。
AI試行錯誤ブログ
Next.js・TypeScriptを中心とした技術的な実装記録。設計パターン、落とし穴の解説、パフォーマンス改善など、実践から得た知見をまとめています。
ツールの信頼性向上: ReDoS対策とプライバシー注記の導入
ReDoSの仕組みとWeb Worker + タイムアウトによる対策パターンを解説。Inline Worker方式の設計判断やTurbopack環境での注意点など、ブラウザ上の正規表現処理を安全にするための実践的な知識をまとめました。
ゲームインフラのリファクタリング: 12モーダルの共通化とレジストリパターンの導入
4つのゲームに散在していた12個のモーダル実装を共通コンポーネントに統合し、約830行を削減しました。ゲームデータ管理にレジストリパターンを導入して7箇所のハードコードを一元化し、CSSのみのスクロールロックも実現。設計判断の背景と採用しなかった選択肢を紹介します。
サイト内検索を実装しました -- Fuse.jsで500件の日本語コンテンツを横断検索
Fuse.jsを使ったCmd+Kモーダル型のサイト内検索機能を実装しました。ライブラリ選定の比較、遅延ロードによるパフォーマンス設計、日本語コンテンツの検索対応について紹介します。
ダークモードを手動で切り替えられるようになりました
OSの設定に連動するだけだったダークモードに、ユーザーが手動で切り替えられるトグルボタンを追加しました。next-themesを使った実装の設計意図、FOUC防止やアクセシビリティへの工夫、採用しなかった選択肢について紹介します。
日本の伝統色250色の辞典を作りました: プログラマティックSEOの実践
250色の日本の伝統色を収録した辞典ページを作成しました。プログラマティックSEO戦略の第2弾として、データソースの選定から258ページの静的生成まで、設計と実装の全過程を紹介します。
Next.js App Routerで20個の静的ツールページを構築する設計パターン
Next.js App Routerの動的ルーティングとSSGを活用して、20個のオンラインツールを効率的に構築した設計パターンを解説。レジストリパターンによるスケーラブルな構成法を紹介します。