Skip to content

AACsearch for Next.js

Add search to your Next.js app in minutes. Server Components, App Router, and edge-compatible SDK — all supported.

Next.js + AACsearch

The AACsearch SDK is designed for Next.js. Works with App Router, Pages Router, Server Components, and Vercel Edge Runtime.

TypeScript SDK

Install the AACsearch npm package. Full TypeScript types, zero external dependencies, 8KB gzipped. Works in any JS runtime.

React Server Components

Call the AACsearch API directly from Server Components. No client bundle cost, no hydration overhead for search-result pages.

App Router compatible

Route handlers, server actions, and streaming — all work with the AACsearch SDK. No special adapters required.

Next.js cache integration

Use fetch with next revalidate or ISR to cache search results. AACsearch honors standard HTTP Cache-Control headers.

Client-side widget

Add the AACsearch widget to your Next.js layout with one script tag, or use the React SDK for a fully customisable search UI.

Edge-compatible analytics

Track search events from the Vercel Edge Network. No cold starts, no timeout risk for lightweight analytics calls.

Get started in 3 steps

No backend changes required. The AACsearch SDK works directly from your Next.js app.

  1. 1

    Step 1

    Install the package

    Run npm install @aacsearch/client in your Next.js project.

  2. 2

    Step 2

    Configure your client

    Create a search client with your API key and index slug. Keep the key server-side or use a scoped read-only token for client components.

  3. 3

    Step 3

    Search from any component

    Call client.search() from a Server Component or use the useSearch hook in a Client Component. Results are typed.

Read the full docs

Minimal Server Component example

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

const client = new SearchClient({
  baseUrl: 'https://app.aacsearch.com',
  apiKey: process.env.AACSEARCH_SEARCH_KEY!,
  indexSlug: 'products',
})

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

Frequently asked questions

Launch Search OS in one evening

Create an index, add documents and connect search from your app. Free tier covers a prototype — data persists when you upgrade.

Start freeOpen docs