AACsearch pour Next.js

Ajoutez la recherche instantanée à votre application Next.js. Les Server Components, Route Handlers et Client Components sont pris en charge.

AACsearch pour Next.js

Ajoutez la recherche instantanée à votre application Next.js avec notre SDK officiel et nos composants React.

SDK TypeScript

Installez le package npm AACsearch. Types TypeScript complets, zéro dépendance externe, 8 Ko gzippé. Fonctionne dans n'importe quel runtime JS.

React Server Components

Appelez l'API AACsearch directement depuis les Server Components. Aucun coût de bundle client, aucune surcharge d'hydratation pour les pages de résultats de recherche.

Compatible App Router

Gestionnaires de route, actions serveur et streaming — tout fonctionne avec le SDK AACsearch. Aucun adaptateur spécial requis.

Intégration cache Next.js

Utilisez fetch avec next revalidate ou ISR pour mettre en cache les résultats de recherche. AACsearch respecte les en-têtes HTTP Cache-Control standard.

Widget côté client

Ajoutez le widget AACsearch à votre layout Next.js avec une balise script, ou utilisez le SDK React pour une interface de recherche entièrement personnalisable.

Analytique compatible Edge

Suivez les événements de recherche depuis le réseau Vercel Edge. Pas de cold starts, pas de risque de timeout pour les appels d'analytique légers.

Démarrer en 3 étapes

Aucune modification du backend requise. Le SDK AACsearch fonctionne directement depuis votre application Next.js.

  1. 1

    Étape 1

    Installer le package

    Exécutez npm install @aacsearch/client dans votre projet Next.js.

  2. 2

    Étape 2

    Configurer votre client

    Créez un client de recherche avec votre clé API et le slug d'index. Gardez la clé côté serveur ou utilisez un token en lecture seule pour les composants client.

  3. 3

    Étape 3

    Rechercher depuis n'importe quel composant

    Appelez client.search() depuis un Server Component ou utilisez le hook useSearch dans un Client Component. Les résultats sont typés.

Lire la documentation complète

Exemple minimal de 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>
  )
}

Questions fréquentes

Lancez le Search OS en une soirée

Créez un index, ajoutez des documents et connectez la recherche depuis votre app. Le plan gratuit couvre un prototype — les données persistent lors du passage au plan payant.

Commencer gratuitementOuvrir la documentation