next.js search

Instant search for Next.js. No server required.

Add fast, typo-tolerant search to your Next.js application without building API routes, managing a search backend, or configuring edge functions. Sprigr compiles your content into a client-side search engine that searches entirely in the browser.

Start free See how it works
sprigr · new workflow listening
Example run · 41 actions hover the gate to approve it yourself
the next.js search back office

Your content is compiled into a client-side search engine that runs in the browser. No API routes, no edge functions, no search backend. Works identically whether your app is server-rendered, statically exported, or using the App Router with React Server Components.

You focus on the work. Sprigr runs the paperwork.

what it handles
  • No API routes needed
  • Sub-10ms on typical indexes
  • App Router compatible
  • SSG friendly
what it runs

Works with every rendering mode

Sprigr runs client-side, so it adapts to however you build your Next.js app.

  • Static Site Generation (SSG)

    Statically exported Next.js sites have no server to run search queries. Sprigr eliminates this limitation. Search loads as a client-side module alongside your static HTML. Use next export with full search functionality.

  • Server-Side Rendering (SSR)

    For SSR pages, Sprigr hydrates alongside your React components. The search input renders immediately, and the search engine loads in the background. Users get instant results without waiting for server-rendered search markup.

  • App Router & Server Components

    The App Router uses React Server Components by default, which cannot run browser APIs. Sprigr works here. Load the engine inside a "use client" component and render the search UI there. No conflicts with streaming or Suspense boundaries.

  • Incremental Static Regeneration

    ISR lets Next.js regenerate pages on demand. Push content updates to Sprigr from the same build hook that triggers ISR, and your search index stays in sync with your content without manual effort.

  • Edge runtime compatible

    Sprigr runs entirely client-side, so it works with Next.js Edge Runtime, Vercel Edge Functions, and Cloudflare Pages. The search engine doesn't need Node.js, a database, or any server-side infrastructure.

  • No Lighthouse penalty

    The engine is a dynamic import in a client component, so it loads after hydration and only when the search UI mounts. It doesn't block rendering and doesn't impact Core Web Vitals. Your Lighthouse score stays where it is.

how it starts

How Sprigr works with Next.js

Three steps to instant client-side search in your Next.js app.

  1. 01

    Push your content

    Send your pages, products, or docs to the Sprigr REST API. Use a build script, a CI/CD step, or push from a CMS webhook. The API accepts any JSON structure.

  2. 02

    Load the engine in a client component

    Install @sprigr/browser and copy its web build into public/wasm/. A "use client" component loads the engine and your compiled index asynchronously on first interaction. No blocking, no layout shift.

  3. 03

    Search runs in the browser

    Keyword queries execute locally in the browser, under 10 ms on typical indexes. No per-search network calls, no cold starts, no API rate limits. Results include typo tolerance, highlighting, and faceted filtering. Hybrid semantic mode fetches one query embedding from /1/embed per search.

In a "use client" component: const wasm = await import('/wasm/sprigr_browser.js'); await wasm.default({ module_or_path: '/wasm/sprigr_browser_bg.wasm' }); const engine = new wasm.SearchEngine(); engine.load_binary_index(await (await fetch(indexUrl)).arrayBuffer()); const hits = JSON.parse(engine.search(query, '', 10, 0));. The index URL is GET /1/indexes/{index}/export/binary on search.sprigr.com, fetched with a search-only key.

See full integration docs →
questions

Questions

Does Sprigr work with the Next.js App Router?

Yes. The engine loads inside a "use client" component, so it works alongside React Server Components and client boundaries. There are no conflicts with streaming, Suspense, or partial prerendering.

What about SSG and static export?

Sprigr is an ideal search solution for statically exported Next.js sites. Since all search happens client-side, there is no server or API route required. Your exported HTML files work exactly the same as a fully dynamic deployment.

How do I update the search index when content changes?

Push updated records to the Sprigr REST API. You can do this from a build script that runs during next build, from a CI/CD pipeline, from a CMS webhook, or manually via the Sprigr admin dashboard. Sprigr recompiles your search index automatically after each update.

Can I use Sprigr with Remix, Gatsby, or other React frameworks?

Yes. Sprigr is framework-agnostic. @sprigr/browser is a plain npm package with bundler, web, and Node builds, so it works with any React-based framework including Remix, Gatsby, Astro with React islands, and plain Create React App.

Does Sprigr affect my Lighthouse score?

The engine and your index load on demand from a client component after the page is interactive, so they do not block rendering or impact your Core Web Vitals scores.

next.js search

Add instant search to your Next.js app.

Paid plans from $49 a month.

Start free Explore the platform