検索が遅い、複雑な条件で絞り込めない—Firebase/Firestoreの限界を感じていませんか？
2025年12月現在、多くの小規模Webサービスが「検索弱いFirestore」という課題に直面しています。コスメ情報SNS『フーコスメ』も同様の悩みを抱えていました。しかし、Next.js 15.3 + Supabaseへの移行により、わずか10日間で劇的な改善を実現しました。
フーコスメが抱えていた検索機能の課題
コスメレビューSNS『フーコスメ』では、ユーザーが以下のような複合条件でコスメを検索したいというニーズがありました：
ブランド名 × 商品カテゴリ × 価格帯での絞り込み
成分名での部分一致検索（例：「ヒアルロン酸」を含む商品）
レビュー評価 × 肌質タイプでの組み合わせ検索
商品名の曖昧検索（「リップ」「口紅」「ルージュ」で同一商品を発見）
Firestoreではネイティブインデックスの作成やドキュメント内のテキストフィールドの検索をサポートしていないという技術的制約により、これらの検索体験を提供することができませんでした。
移行前の問題点
検索成功率: 約58%（ユーザーの求める商品が見つからない）
複合条件検索: 実質不可能（3つ以上の条件を組み合わせられない）
検索応答時間: 平均2.8秒（ユーザーの離脱要因）
運用コスト: 月額$312（Firestore + Algolia構成）
Next.js 15.3 + Supabase移行の決定理由
Next.js 15.3の最新機能を活用
Next.js 15.3には、Turbopack for builds（アルファ版）により最大57.6%高速なコンパイル時間を実現し、開発効率が大幅に向上しました。また、新しいNavigation hooksにより、検索結果の表示制御がより柔軟になりました。
Supabaseの2025年版機能
Supabaseは2025年現在、より予測可能な価格設定を採用しており、Vector Embeddings（ベクトル検索）機能まで提供しています。PostgreSQLベースのため、複雑な検索クエリも自然に実装できます。
10日間の移行プロジェクト詳細
第1週：データ移行とアーキテクチャ設計（5日間）
課題: FirestoreのNoSQL構造をPostgreSQLのリレーショナル構造に変換
解決策: 以下のテーブル設計で正規化を実施
cosmetics（商品情報）brands（ブランド情報）ingredients（成分情報）reviews（レビュー情報）users（ユーザー情報）
成果: データ整合性を保ちながら、検索に最適化された構造を構築
第2週：検索機能の実装（5日間）
PostgreSQLの全文検索機能を活用:
-- 商品名の曖昧検索
SELECT * FROM cosmetics
WHERE to_tsvector('japanese', name || ' ' || description)
@@ plainto_tsquery('japanese', ?);
-- 複合条件検索（ブランド×カテゴリ×価格帯）
SELECT c.*, b.name as brand_name
FROM cosmetics c
JOIN brands b ON c.brand_id = b.id
WHERE c.category_id = ?
AND c.price BETWEEN ? AND ?
AND b.name ILIKE ?;
Next.js 15.3のクライアント機能:
Server Componentsでの初期データ取得最適化
新しいclient instrumentationにより早期の監視・分析セットアップを実装
移行後の劇的な改善結果
検索パフォーマンスの向上
項目 移行前 移行後 改善率 検索成功率 58% 91% +57% 平均応答時間 2.8秒 0.4秒 86%短縮 複合条件検索 不可 5条件まで対応 - 日次検索回数 1,847回 4,263回 +131%
コスト削減効果
構成 月額コスト Firestore + Algolia $312 Supabase Pro $25 削減効果 92%削減
Supabaseはより予測可能な価格設定を採用しており、APIリクエスト数による突然の高額請求を防ぐ設計になっているため、安心して運用できています。
技術的なポイント
PostgreSQLの高度な検索機能
全文検索インデックス:
CREATE INDEX cosmetics_search_idx ON cosmetics
USING GIN (to_tsvector('japanese', name || ' ' || description));
ベクトル検索の活用: SupabaseはVector Embeddings（ベクトル検索）により、類似商品の推薦機能も実装できました。
Next.js 15.3の最新機能活用
Turbopackによる高速化: Turbopackにより開発サーバーでの変更反映が50%以上高速化し、検索機能の開発・テストサイクルが大幅に改善されました。
TypeScript強化: Next.js 15.3のTypeScript plugin改善により、大規模コードベースでも60%高速な応答時間を実現しています。
セキュリティ強化：Row Level Security（RLS）
-- ユーザー毎のレビュー表示制御
CREATE POLICY user_reviews_policy ON reviews
FOR ALL TO authenticated
USING (user_id = auth.uid() OR is_public = true);
SupabaseのSOC 2 Type 2認証やHIPAA準拠により、エンタープライズグレードのセキュリティ基準を満たしています。
ユーザー体験の向上
リアルタイム機能の実装
新着レビューや在庫情報の変更を、Supabaseのリアルタイム機能でユーザーに即座に通知。SNSとしての体験価値が大幅に向上しました。
検索体験の改善
インクリメンタル検索: 入力と同時に候補を表示
ファセット検索: 複数条件を直感的に組み合わせ
関連商品推薦: ベクトル検索による精度の高い推薦
小規模プロジェクトでも実現可能な理由
技術選択のポイント
開発リソース: 2名のエンジニアで10日間での完了
既存データ: 約5万件の商品データと20万件のレビューデータ
月間ユーザー: 約8,000MAU（Supabaseの無料枠内で十分）
段階的移行戦略
Phase 1: 検索機能のみ先行移行
Phase 2: ユーザー認証の移行
Phase 3: レビュー機能の移行
この段階的アプローチにより、リスクを最小化しながら効果を最大化できました。
2025年の最新動向と今後の展望
Supabaseの新機能活用
2025年により柔軟な予算管理機能が計画されており、さらなるコスト最適化が期待できます。
Next.js 15.3の継続的改善
Next.js 15.3では50%以上の開発セッションでTurbopackが使用されており、開発体験の向上が続いています。
まとめ：小規模システムこそNext.js + Supabase
フーコスメの事例が示すように、小規模〜中規模のWebサービスであっても、適切な技術選択により：
検索体験の劇的改善（91%の成功率）
大幅なコスト削減（92%削減）
開発効率の向上（10日間での移行完了）
将来性のある技術基盤（オープンソース＋最新技術）
を同時に実現できます。
こんなお悩みをお持ちの方へ
Firestoreの検索制限に困っている
複合条件検索を実装したい
開発・運用コストを下げたい
モダンなNext.js技術を活用したい
小規模チームで効率的に開発したい
Next.js専門開発チームによる移行支援
弊社では、フーコスメの成功事例で得た知見を活かし、小規模〜中規模システムのNext.js + Supabase移行を専門的にサポートしています。
サポート内容
技術調査・移行計画策定: 既存システムの分析と最適な移行戦略の提案
段階的移行の実行: リスクを最小化した段階的移行の実施
検索機能の最適化: PostgreSQLの高度な検索機能を活用した実装
パフォーマンス改善: Next.js 15.3の最新機能を活用した高速化
運用サポート: 移行後の運用・監視体制の構築
お問い合わせ
Next.js + Supabaseへの移行や、検索機能の改善についてのご相談は、お気軽にお問い合わせください。
連絡先: info@zetlinker.com
弊社のNext.js専門開発チームが、フーコスメの成功事例から学んだ実践的な知見を活かし、貴社の技術的課題解決を全力でサポートいたします。
参考文献
Next.js 15.3公式ブログ - Next.js 15.3の新機能について
Supabase サービスと料金ガイド 2025 - Supabaseの最新料金体系
Zenn - 個人開発のDBをFirebaseからSupabaseに移行した話 - 実際の移行事例
Supabase公式ドキュメント - Supabaseの機能詳細