【要約】【個人開発】あなたの環境に合ったデスクセットを提案してくれるアプリ【Next.js / TypeScript / Vercel / Supabase】 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者は、ユーザーが検索結果から詳細画面へ遷移し、再度戻った際に検索条件が消失する問題に直面した。検索条件をアプリケーション内部の状態として管理していたことが原因である。具体的には以下の課題が発生した。
- ・Reactの内部状態（useState等）で条件を保持していたため。
- ・ページ遷移に伴い、コンポーネントの状態が破棄されたため。
- ・ユーザーに再検索の手間を強いる、UXの低下を招いたため。
// Approach
開発者は、検索条件をアプリケーションの状態ではなく、URLパラメータとして管理する手法を採用した。これにより、ページ遷移後も検索条件を永続化させる設計とした。具体的なアプローチは以下の通りである。
- ・検索条件をURLに保持し、詳細画面から戻った際も状態を復元。
- ・ユーザー操作が必要な検索フォームにはClient Componentを使用。
- ・検索結果の取得や表示にはServer Componentを活用し、SEOを強化。
// Result
開発者は、検索条件の保持とSEOの両立を実現し、シームレスなユーザー体験を構築した。設計の変更により、以下の成果を得ている。
- ・詳細画面から戻っても、以前の検索条件が維持されるようになった。
- ・Server Componentの利用により、検索エンジンに強い構成を実現。
- ・今後は管理者画面を実装し、データ運用の自動化を目指す。
Senior Engineer Insight
> MVP開発における技術選定として、Next.jsとSupabaseの組み合わせは極めて合理的である。特に、状態管理をURLパラメータに委ねる設計は、Webの基本原則に則った堅実な判断だ。しかし、現状はDBへの直接操作に依存しており、商用レベルの運用には管理機能の欠如が致命的なボトルネックとなる。スケーラビリティを考慮するなら、早期に管理用APIとCMS的なインターフェースを構築すべきである。