Next.js × Search UI × Fuse.js 検索アプリケーション
概要 Next.js、Elastic Search UI、Fuse.jsを組み合わせた検索アプリケーションの技術構成と実装について説明します。 作成したサイトは以下です。 https://nsf-psi.vercel.app/ja/ GitHubリポジトリは以下です。 https://github.com/nakamura196/nsf サンプルデータとして、「東京帝國大學本部構内及農學部建物鳥瞰圖（東京大学農学生命科学研究科・農学部）」を使用します。 https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970 以下はAIが作成しました。 アプリケーション概要 このアプリケーションは、東京大学の建物画像データを対象とした検索システムです。IIIF（International Image Interoperability Framework）プロトコルに対応した建物画像を検索し、地理情報（緯度・経度）やメタデータを表示します。 主な特徴 多言語対応 next-intlによる日本語・英語の多言語対応機能を実装しています。 検索機能 簡易検索 : キーワードによる直感的な検索 詳細検索 : 複数条件を組み合わせた精密な検索（AND/OR条件） ファセット検索 : subject（学部）などカテゴリー別の絞り込み機能 ソート機能 : スコア、タイトル、属性値での並び替え 曖昧検索 : Fuse.jsによる入力ミスに寛容な検索（閾値0.3） UI/UX Tailwind CSSによる洗練されたデザイン ダークモード対応 レスポンシブデザインでモバイルフレンドリー React IconsによるアイコンUI カスタム検索コネクタ Elastic Search UIとFuse.jsを組み合わせたカスタムコネクタを実装し、フロントエンドのみで全文検索機能を実現しています。 地理情報対応 各建物データには緯度・経度情報が含まれています。 技術スタック フロントエンド Next.js 15 (App Router) React 19 TypeScript Tailwind CSS 4.0 検索システム Elastic Search UI（検索インターフェース） Fuse.js（全文検索エンジン） カスタムAPIConnector（独自実装） 国際化 next-intl その他 ...