目錄

訪客在搜尋欄輸入城市名稱。三秒鐘過去了。地圖卡頓。他們關閉標籤頁。目錄網站——Yelp 克隆、專業人士查找工具、本地商業聚合器——如果您像構建部落格範本一樣構建它們，將在自己的數據下崩潰。一千個列表執行良好。具有半徑搜尋、分面篩選和即時地圖標記的一萬個列表？這就是大多數 Next.js 目錄停滯的地方。區別不在於 React 與伺服器元件。這是您在第一個用戶提交列表之前做出的九個架構決策——圍繞數據庫索引、搜尋策略、快取層和如何構造路由以便 Google 實際上可以爬取它們的決策。大多數團隊在 50,000 個列表時意識到他們選擇錯誤，此時重構成本達六位數。但如果您從第一天開始正確設計架構、搜尋和 SEO 基礎，您的目錄可以擴展到數百萬個條目而無需重寫核心。

什麼使目錄網站有效運作

目錄網站連接人們與企業、服務或資源。想想 Yelp、Zocdoc、Avvo 或利基目錄，如本地餐廳指南或專業服務目錄。該模式已被驗證，需求不斷——每個行業都有目錄機會。

成功的目錄與死的目錄的區別歸結為三件事：數據質量、搜尋體驗和 SEO。如果您的列表不完整、搜尋速度慢，或 Google 無法找到您的頁面——目錄失敗。

Next.js 非常適合目錄，因為它解決了基本矛盾：目錄需要數千個對 SEO 友好的靜態頁面（用於列表和類別），但也需要動態、互動功能（搜尋、篩選、地圖、用戶帳戶）。Next.js 通過使用靜態生成來生成列表頁面和伺服器元件來動態功能來處理兩者。

目錄網站類型

商業目錄——本地或行業特定的商業列表。收入來自精選列表和廣告。

專業目錄——查找供應商目錄，用於醫生、治療師、顧問。收入來自訂閱和潛在客戶生成。

資源目錄——精選的工具、軟體、課程或數據集列表。收入來自聯盟鏈接和贊助。

市場目錄——具有預訂或購買功能的列表（Airbnb 模式）。收入來自交易費。

社區目錄——協會、校友網絡或組織的成員目錄。

選擇正確的架構

渲染策略

對於擁有少於 50,000 個列表的目錄，使用 ISR（增量靜態重新生成）的靜態生成是最好的方法：在構建時生成所有列表頁面以獲得即時載入時間和完美的 SEO，使用 60 秒重新驗證時間窗口的 ISR，以便更新在一分鐘內出現，伺服器元件處理搜尋結果和篩選視圖以獲取始終新鮮的數據。

對於擁有 100,000+ 列表的目錄，請切換到按需 ISR，其中頁面在首次訪問時生成並快取。

數據層

**PostgreSQL（通過 Supabase 或 Neon）**是我們的建議。它使用 tsvector 本地處理全文搜尋，使用 PostGIS 進行地理查詢，使用 JSONB 用於靈活的列表屬性。一個數據庫處理所有事情。

**替代方案：**Elasticsearch 用於高級搜尋功能，Algolia 用於託管搜尋即服務，或 Meilisearch 作為自主託管替代方案。

列表的數據庫設計

核心表

listings——中央表。每個列表都有名稱、slug、描述、類別、位置 (lat/lng)、聯繫資訊、狀態和用於靈活屬性的元數據 JSONB 列。

categories——使用 parent_id 自引用的分層類別。支持嵌套類別，如醫療保健 > 牙醫 > 化妝牙科。

locations——規範化位置數據：城市、州/省、國家、郵遞區號、座標。使用 PostGIS 地理類型作為座標列。

reviews——帶有評級 (1-5)、文本、作者參考和列表參考的用戶評論。聚合評級存儲在列表上以進行快速讀取。

media——附加到列表的圖像和文檔。存儲 URL，而不是文件。使用 CDN 進行圖像傳輸。

使用 JSONB 的靈活屬性

每個行業都有獨特的列表字段。餐廳目錄需要美食類型、價格範圍和營業時間。牙醫目錄需要接受的保險、專業領域和認證。與其為每個垂直創建單獨的表，不如使用 JSONB 屬性列。這允許您添加新字段而無需架構遷移，同時仍支持通過 PostgreSQL JSONB 運算符進行篩選查詢。

實際執行的搜尋和篩選

搜尋是目錄網站上的核心互動。如果結果需要超過 200 毫秒才能出現，用戶會離開。

全文搜尋

PostgreSQL 全文搜尋無需外部服務即可處理大多數目錄需求。創建結合名稱、描述和類別文本的 tsvector 列，為快速查詢構建 GIN 索引，使用 ts_rank 進行相關性評分，並支持短語匹配和布林運算符。

對於自動完成，使用三元組索引 (pg_trgm 擴展) 創建單獨的 search_terms 物化視圖。這支持即時輸入預先建議，容忍拼寫錯誤。

分面篩選

關鍵是預計算篩選計數。當用戶在「倫敦」選擇「牙醫」時，在他們點擊前向他們顯示有多少結果符合每個子篩選。這需要並行運行計數查詢，PostgreSQL 通過適當的索引可以有效地處理。

地圖整合和地理位置

選擇地圖供應商

Mapbox GL JS——最佳開發人員體驗、美觀的默認樣式、慷慨的免費層（50,000 張地圖載入/月）。我們的建議。

Google Maps——無所不在但在規模上昂貴。

Leaflet + OpenStreetMap——完全免費、開源。

地圖用户體驗模式

  • 縮小時聚集標記
  • 地圖移動時更新列表——將列表結果與可見地圖區域同步
  • 懸停時突出顯示——當用戶懸停列表時，突出顯示其地圖標記
  • 行動裝置：列表優先——在行動裝置上默認顯示列表，帶有「地圖」切換

用戶提交和索賠列表

提交流程

允許業主通過多步表單提交其列表：基本信息、詳細信息、媒體、驗證，然後管理員批准後發布。

索賠現有列表

如果您使用數據預先填充目錄，業主需要一種方式來通過電話、明信片或商業電子郵件域匹配進行驗證來索賠其列表。索賠後，所有者可以通過儀表板編輯其列表。

目錄網站的 SEO

URL 結構

設計既適合用戶又適合搜尋引擎的 URL：

  • /dentists/ — 類別著陸
  • /dentists/london/ — 類別 + 城市
  • /dentists/london/cosmetic/ — 類別 + 城市 + 子類別
  • /listing/smile-dental-clinic — 個別列表

程序化 SEO

對於涵蓋 50 個城市、每個 10 個專業領域的牙醫目錄，即 500 個從範本生成的唯一著陸頁——每個目標特定的長尾關鍵字。這是 Next.js 上目錄 SEO 的力量。

營利模式

精選列表——50-500 美元/月。訂閱層——免費基本版、付費高級版 20-100 美元/月。潛在客戶生成——5-50 美元/潛在客戶。廣告——在高流量頁面上展示廣告。數據許可——出售匿名目錄數據。聯盟和推薦——預訂佣金。

大規模性能

快取策略

從邊緣 CDN 提供靜態頁面，在 Redis 中快取 60 秒的搜尋結果，供應商處理地圖瓦片，通過 CDN 提供圖像並進行激進快取。

構建時間優化

對於 10,000+ 列表頁面，使用按需 ISR 而不是在部署時構建所有頁面，按更新頻率分組頁面，並使用 generateStaticParams 與分頁以並行化生成。

常見問題

我需要多少列表才能啟動目錄？ 在重點地理區域或利基中至少以 200-500 個高質量列表開始。有 50 個稀疏列表的目錄看起來被拋棄了。

我應該使用帶有目錄插件的 WordPress 嗎？ WordPress 目錄插件在大約 5,000 個列表時遇到性能瓶頸。搜尋體驗差，地圖互動滯後，擴展需要昂貴的託管。Next.js 在每個規模上都更快、更可定制且成本更低。

構建目錄網站需要花費多少？ 自定義 Next.js 目錄的範圍從 15,000-80,000 美元，具體取決於複雜性。基本 MVP 可在 6-8 週內構建。

我如何處理重複列表？ 在提交時實施重複數據刪除：根據名稱 + 地址 + 電話號碼匹配。使用模糊匹配來捕捉近似重複。

我能用這種方法構建雙邊市場嗎？ 是的。當您添加預訂或購買時，目錄成為市場。為買家和供應商之間的支付處理添加 Stripe Connect。