AACsearch для Next.js

Добавьте мгновенный поиск в ваше приложение Next.js. Поддерживаются Server Components, Route Handlers и Client Components.

Поиск для Next.js-приложений

SDK браузера AACsearch работает с App Router Next.js, Server Components и Client Components.

TypeScript SDK

Установите npm-пакет AACsearch. Полные типы TypeScript, нулевые внешние зависимости, 8KB в сжатом виде. Работает в любой JS-среде выполнения.

React Server Components

Вызывайте API AACsearch непосредственно из Server Components. Никаких расходов на клиентский бандл и гидратацию для страниц с результатами поиска.

Поддержка App Router

Используйте AACsearch в Server Components с Node.js SDK или в Client Components с браузерным SDK.

Интеграция с кэшем Next.js

Используйте fetch с next revalidate или ISR для кэширования результатов поиска. AACsearch соблюдает стандартные заголовки HTTP Cache-Control.

Клиентский виджет

Добавьте виджет AACsearch в макет Next.js одним тегом script или используйте React SDK для полностью настраиваемого интерфейса поиска.

Edge-совместимая аналитика

Отслеживайте события поиска из сети Vercel Edge. Нет холодных стартов, нет риска таймаута для лёгких аналитических вызовов.

Начните за 3 шага

Изменения в бэкенде не требуются. SDK AACsearch работает напрямую из вашего приложения Next.js.

  1. 1

    Шаг 1

    Установите пакет

    Выполните npm install @aacsearch/client в вашем проекте Next.js.

  2. 2

    Шаг 2

    Настройте клиент

    Создайте поисковый клиент с вашим API-ключом и slug индекса. Храните ключ на сервере или используйте ограниченный токен только для чтения в клиентских компонентах.

  3. 3

    Шаг 3

    Поиск из любого компонента

    Вызовите client.search() из Server Component или используйте хук useSearch в Client Component. Результаты типизированы.

Читать полную документацию

Минимальный пример Server Component

typescript
import { AACSearchClient } from '@aacsearch/client'

const client = new AACSearchClient({
  apiKey: process.env.AACSEARCH_API_KEY!,
  index: 'products',
})

export default async function ProductSearch() {
  const results = await client.search({ q: 'running shoes', limit: 10 })
  return (
    <ul>
      {results.hits.map((hit) => (
        <li key={hit.id}>{hit.name}</li>
      ))}
    </ul>
  )
}

Часто задаваемые вопросы

Запустите Search OS за один вечер

Создайте индекс, добавьте документы и подключите поиск из приложения. Бесплатного тарифа достаточно для прототипа.

Начать бесплатноОткрыть документацию