AACsearch für Next.js

Füge deiner Next.js-App Sofortsuche hinzu. Server Components, Route Handlers und Client Components werden unterstützt.

Suche für Next.js-Apps

Der AACsearch-Browser-SDK funktioniert nahtlos mit Next.js App Router, Server Components und Client Components.

TypeScript-SDK

Das AACsearch-npm-Paket installieren. Vollständige TypeScript-Typen, keine externen Abhängigkeiten, 8KB komprimiert. Funktioniert in jeder JS-Laufzeit.

React Server Components

Die AACsearch-API direkt aus Server Components aufrufen. Keine Client-Bundle-Kosten, kein Hydration-Overhead für Suchergebnis-Seiten.

App-Router-Unterstützung

Verwende AACsearch in Server Components mit dem Node.js-SDK oder in Client Components mit dem Browser-SDK.

Next.js Cache-Integration

Fetch mit next revalidate oder ISR verwenden, um Suchergebnisse zu cachen. AACsearch respektiert Standard-HTTP-Cache-Control-Header.

Clientseitiges Widget

Das AACsearch-Widget mit einem Script-Tag zum Next.js-Layout hinzufügen oder das React-SDK für eine vollständig anpassbare Such-UI verwenden.

Edge-kompatible Analytics

Suchereignisse vom Vercel Edge Network tracken. Keine Cold Starts, kein Timeout-Risiko für leichtgewichtige Analytics-Aufrufe.

In 3 Schritten loslegen

Keine Backend-Änderungen erforderlich. Das AACsearch SDK funktioniert direkt in deiner Next.js-App.

  1. 1

    Schritt 1

    Paket installieren

    npm install @aacsearch/client in deinem Next.js-Projekt ausführen.

  2. 2

    Schritt 2

    Client konfigurieren

    Erstelle einen Such-Client mit deinem API-Schlüssel und Index-Slug. Halte den Schlüssel serverseitig oder verwende ein scoped Read-Only-Token für Client-Komponenten.

  3. 3

    Schritt 3

    Von jeder Komponente suchen

    Rufe client.search() aus einer Server-Komponente auf oder verwende den useSearch-Hook in einer Client-Komponente. Die Ergebnisse sind typisiert.

Vollständige Dokumentation lesen

Minimales Server-Component-Beispiel

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>
  )
}

Häufig gestellte Fragen

Search OS in einem Abend starten

Erstellen Sie einen Index, fügen Sie Dokumente hinzu und verbinden Sie die Suche von Ihrer App. Free-Tier deckt ein Prototyp ab — Daten bleiben beim Upgrade erhalten.

Kostenlos startenDokumentation öffnen