AACsearch para Next.js

Añade búsqueda instantánea a tu aplicación Next.js. Se admiten Server Components, Route Handlers y Client Components.

AACsearch para Next.js

Añade búsqueda instantánea a tu aplicación Next.js con nuestro SDK oficial y componentes React.

SDK de TypeScript

Instala el paquete npm de AACsearch. Tipos TypeScript completos, sin dependencias externas, 8 KB gzipped. Funciona en cualquier runtime de JS.

React Server Components

Llama a la API de AACsearch directamente desde Server Components. Sin coste de bundle en el cliente, sin sobrecarga de hidratación para páginas de resultados de búsqueda.

Compatible con App Router

Manejadores de ruta, acciones de servidor y streaming: todos funcionan con el SDK de AACsearch. No se requieren adaptadores especiales.

Integración con caché de Next.js

Usa fetch con next revalidate o ISR para cachear resultados de búsqueda. AACsearch respeta los encabezados HTTP Cache-Control estándar.

Widget del lado del cliente

Añade el widget de AACsearch a tu layout de Next.js con una etiqueta script, o usa el SDK de React para una interfaz de búsqueda totalmente personalizable.

Análisis compatible con Edge

Rastrea eventos de búsqueda desde Vercel Edge Network. Sin cold starts, sin riesgo de timeout para llamadas de análisis ligeras.

Empieza en 3 pasos

No se requieren cambios en el backend. El SDK de AACsearch funciona directamente desde tu app Next.js.

  1. 1

    Paso 1

    Instala el paquete

    Ejecuta npm install @aacsearch/client en tu proyecto Next.js.

  2. 2

    Paso 2

    Configura tu cliente

    Crea un cliente de búsqueda con tu clave API y el slug del índice. Mantén la clave en el servidor o usa un token de solo lectura para componentes cliente.

  3. 3

    Paso 3

    Busca desde cualquier componente

    Llama a client.search() desde un Server Component o usa el hook useSearch en un Client Component. Los resultados están tipados.

Leer la documentación completa

Ejemplo mínimo 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>
  )
}

Preguntas frecuentes

Lanza el Search OS en una tarde

Crea un índice, añade documentos y conecta la búsqueda desde tu app. El plan gratuito cubre un prototipo — los datos se mantienen al actualizar.

Empezar gratisAbrir documentación