Add Instant Search to Next.js — No API Needed

Q: Does Sprigr affect my Lighthouse score?

The Sprigr script is lightweight and loads asynchronously. The WASM engine is 155KB and the search index loads on demand, so it does not block rendering or impact your Core Web Vitals scores.

The problem with search in Next.js

Next.js gives you flexibility in how you render pages — SSR, SSG, ISR, the App Router — but most search solutions assume you have a persistent server. That creates friction.

Using a hosted search API means every keystroke makes a network round-trip. That adds 100–300 ms of latency per query and creates a dependency on a third-party service. Building your own API route works, but it needs a database, edge function, or serverless backend that you have to maintain and pay for at scale.

Static exports are even harder. next export produces plain HTML and JavaScript — there is no server to handle search queries. You either give up search entirely or bolt on a client-side library like Lunr.js, which struggles with large datasets and is no longer actively maintained.

Sprigr solves this by moving search out of the server entirely. Your content is compiled into a compact WebAssembly module that runs in the browser. No API routes, no edge functions, no search backend. It works the same whether your Next.js app is server-rendered, statically exported, or using the App Router with React Server Components.

How Sprigr works with Next.js

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

1

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

Add the script to your layout

Drop one <Script> tag into your root layout or _app.tsx. Sprigr loads the WASM engine and your pre-compiled index asynchronously — no blocking, no layout shift.

3

Search runs in the browser

Every query executes locally via WebAssembly in under 10 ms. No network calls, no cold starts, no API rate limits. Results include typo tolerance, highlighting, and faceted filtering.

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 entirely — 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 WASM module 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 perfectly here — load the script in your root layout and use the search UI in any "use client" component. No conflicts with streaming or Suspense boundaries.

Integration code

Add Sprigr to your Next.js app in minutes. Here are the key pieces.

Add the script to your root layout

Use the Next.js Script component to load Sprigr after the page is interactive.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.sprigr.com/v1/sprigr.js"
          data-index="your-index-id"
          data-key="your-search-api-key"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Create a search component

Build a search input that queries the local WASM index. Results return in under 10 ms with no network calls.

components/Search.tsx

"use client";

import { useState, useCallback } from "react";

export default function Search() {
  var [query, setQuery] = useState("");
  var [results, setResults] = useState([]);

  var handleSearch = useCallback(function (e) {
    var value = e.target.value;
    setQuery(value);
    if (window.sprigr && value.length > 1) {
      var hits = window.sprigr.search(value, { limit: 10 });
      setResults(hits);
    } else {
      setResults([]);
    }
  }, []);

  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={handleSearch}
        placeholder="Search..."
      />
      <ul>
        {results.map(function (hit) {
          return (
            <li key={hit.id}>
              <a href={hit.url}>{hit.title}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Push data from a build script

Index your content at build time so the WASM module is ready when users visit your site.

scripts/index-content.mjs

var records = [
  { id: "1", title: "Getting Started", body: "...", url: "/docs/getting-started" },
  { id: "2", title: "Configuration", body: "...", url: "/docs/configuration" },
  // ... your content
];

fetch("https://api.sprigr.com/1/indexes/your-index-id/records", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Sprigr-API-Key": process.env.SPRIGR_API_KEY,
  },
  body: JSON.stringify(records),
});

Frequently asked questions

Does Sprigr work with the Next.js App Router?

Yes. Sprigr loads as a client-side script, so it works seamlessly alongside React Server Components and client boundaries. Add the script to your root layout and use the search component in any "use client" component. 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 via WebAssembly, 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 WASM index automatically after each update.

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

Yes. Sprigr is framework-agnostic. It loads as a standard script tag and runs in the browser, 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 Sprigr script is lightweight and loads asynchronously using the afterInteractive strategy. The 155 KB WASM engine and your search index load on demand after the page is interactive, so they do not block rendering or impact your Core Web Vitals scores.

Add instant search to your Next.js app

Full access for 6 months. No credit card required.

Start My Free Trial

Instant Search for Next.js — No Server Required