# Fumadocs (Framework Mode, Next.js): 搜尋
URL: /zh-TW/docs/next/search
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/search/index.zh-TW.mdx

為您的文件網站實作文件搜尋功能

## 搜尋 UI [#search-ui]

若要了解如何自訂文件搜尋的 UI，請參閱[搜尋 UI](/docs/ui/search)。

## 搜尋用戶端 [#search-client]

您可以依據所使用的搜尋引擎，選擇並設定搜尋用戶端，預設為 ZBSearch。

- [ZBSearch（預設）](/zh-TW/docs/next/search/orama): 以 ZBSearch 為基礎的預設搜尋引擎。
- [Algolia](/zh-TW/docs/next/search/algolia): 在 Fumadocs UI 中使用 Algolia。
- [FlexSearch](/zh-TW/docs/next/search/flexsearch): 快速且輕量的搜尋引擎。
- [Meilisearch](/zh-TW/docs/next/search/meilisearch): 搭配 Fumadocs UI 使用 Meilisearch。
- [Mixedbread](/zh-TW/docs/next/search/mixedbread): 在 Fumadocs UI 中使用 Mixedbread。
- [Orama Cloud](/zh-TW/docs/next/search/orama-cloud): 在 Fumadocs UI 中使用 Orama Cloud。
- [Typesense](/zh-TW/docs/next/search/typesense): 搭配 Fumadocs UI 使用 Typesense。
- [自訂搜尋](/zh-TW/docs/next/search/custom): 適用於其他搜尋方案。

### 搜尋 Hook [#search-hooks]

搜尋用戶端提供了 React hook，例如 `useFetchSearch()` 和 `useAlgoliaSearch()`，可回傳 `<SearchDialog />` 所需的 props：

```tsx
import { useFetchSearch } from 'fumadocs-core/search/client';

const search = useFetchSearch();

<SearchDialog {...search} {...props} />;
```

除了用於搜尋輸入框的 `search` 與 `onSearchChange` 之外，這些 Hook 還會回傳：

* `data`：最近一次成功的搜尋，在重新搜尋期間以及發生錯誤後都會保留。
  * `items`：該次搜尋的結果，其內容也會解析為 [hast](https://github.com/syntax-tree/hast)，並以 `hastContent` 提供。表格的各列會歸入同一個 `table` 項目。
  * `query`：該次搜尋所使用的查詢字串。
* `error`：最近一次搜尋失敗時會設定此值。
* `isLoading`：針對 `search` 的搜尋是否仍在進行中。

若要使用其他搜尋引擎，請將經過 memoize 的搜尋函式傳入 `experimental_useSearch()`；當該函式變更時，便會重新搜尋。

```tsx
'use client';
import { useCallback } from 'react';
import { experimental_useSearch } from 'fumadocs-core/search/client';
import type { SortedResult } from 'fumadocs-core/search';

export function useMySearch(locale: string) {
  const search = useCallback(
    async (query: string): Promise<SortedResult[]> => {
      const res = await fetch(`/api/my-search?${new URLSearchParams({ query, locale })}`);
      return res.json();
    },
    [locale],
  );

  return experimental_useSearch(search);
}
```

### 社群整合 [#community-integrations]

以下是由社群維護的整合清單。

* [Trieve Search](/docs/headless/search/trieve)
* [Typesense Search](/docs/headless/search/typesense)