Next.js Integration

Instant Search for Next.js — SSR, App Router & TypeScript Ready

AI-Powered Search for Modern React Applications

Add AI-powered search to your Next.js app in minutes. Works with App Router, Server Components, and static export.

App Router Ready

SSR Support

TypeScript Native

Install @searchjet/react View Documentation

No Credit Card Required

Edge Runtime Compatible

Free Forever Plan

The Problem

Next.js Search is Hard

Building search in Next.js means choosing between client-only libraries that don't scale, or complex Elasticsearch setups that hurt performance.

⚠

Common Next.js Pain Point

No Native Search

Next.js has no built-in search solution. You're left building custom Elasticsearch setups or piecing together client-only libraries that don't scale.

⚠

Common Next.js Pain Point

SSR Complexity

Client-only search libraries cause hydration mismatches. Getting server-rendered search results with proper SEO requires complex workarounds.

⚠

Common Next.js Pain Point

Performance at Scale

Large datasets kill client-side search performance. Filtering thousands of records in the browser blocks the main thread and hurts Core Web Vitals.

The Solution

SearchJet + Next.js

Drop-in React components with full App Router, SSR, and TypeScript support. Built for the modern Next.js stack.

App Router & Server Components

Works with React Server Components out of the box. No hydration issues, no use client directives needed for basic search.

Server-Side Search

getServerSideProps helpers and RSC-compatible APIs for SEO-critical pages. Pre-render search results at build or request time.

TypeScript First

Full type definitions included. Autocomplete everywhere - from SearchProvider props to hit objects and filter types.

Streaming + Suspense

Works with React 18 streaming and Suspense boundaries. Show search skeleton while results stream from the edge.

Static Export Compatible

Client-side search with CDN-cached indexes works perfectly with next export. No server required for search.

Edge Runtime Ready

Lightweight SDK works on Vercel Edge Runtime and Cloudflare Workers. Sub-50ms search from the edge globally.

Built for Speed

Performance at Scale

SearchJet runs search on external infrastructure, keeping your Next.js app fast while delivering instant results.

<50ms

Avg Response Time

Results delivered from edge

Database Load

Search runs externally

<10KB

Bundle Size

Gzipped, tree-shakeable

99.9%

Uptime SLA

Enterprise-grade reliability

SearchJet vs. Traditional Search

Metric	Default Next.js	Algolia	SearchJet
Time to First Result	1.5s+	200ms	<50ms
Typo Tolerance	None	Yes	AI-Powered
Monthly Cost (100K searches)	Free	$50/mo	Free
SSR / SEO Support	Manual	Partial	Full

Step-by-Step Guide

How to Add AI Search in Next.js

Get instant, typo-tolerant search running in your Next.js app in under 5 minutes.

Install the package

Add SearchJet to your Next.js project with npm or yarn.

npm install @searchjet/react

Create a search page

Add a new route with SearchProvider, SearchBox, and Hits components.

// app/search/page.tsx import { SearchProvider, SearchBox, Hits } from '@searchjet/react'; export default function SearchPage() { return ( <SearchProvider indexName="your_index" searchApiKey="your_key"> <SearchBox placeholder="Search..." /> <Hits>{({ hit }) => <div>{hit.title}</div>}</Hits> </SearchProvider> ); }

Add a search link to your navbar

Link to your new search page from your navigation or header.

<Link href="/search">Search</Link>

Deploy and search

Push to Vercel, Netlify, or your preferred host. Search works immediately with zero configuration.

Your search is now live with typo tolerance, instant results, and AI-powered relevance.

Copy-Paste Integration

Two approaches for every Next.js architecture

app/search/page.tsx
// app/search/page.tsx
import { SearchProvider, SearchBox, Hits, Highlight } from '@searchjet/react';

export default function SearchPage() {
  return (
    <SearchProvider
      indexName="your_index"
      searchApiKey="your_search_api_key"
    >
      <SearchBox placeholder="Search docs..." />
      <Hits>
        {({ hit }) => (
          <article className="p-4 border-b">
            <h3><Highlight attribute="title" hit={hit} /></h3>
            <p><Highlight attribute="content" hit={hit} /></p>
          </article>
        )}
      </Hits>
    </SearchProvider>
  );
}

pages/search.tsx
// pages/search.tsx
import { GetServerSideProps } from 'next';
import { SearchProvider, SearchBox, Hits, searchServerSide } from '@searchjet/react';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { query } = context;
  const searchResults = await searchServerSide({
    indexName: 'your_index',
    searchApiKey: 'your_search_api_key',
    query: query.q as string,
    hitsPerPage: 10,
  });

  return { props: { initialResults: searchResults } };
};

export default function SearchPage({ initialResults }) {
  return (
    <SearchProvider
      indexName="your_index"
      searchApiKey="your_search_api_key"
      initialResults={initialResults}
    >
      <SearchBox placeholder="Search docs..." />
      <Hits>
        {({ hit }) => (
          <article className="p-4 border-b">
            <h3>{hit.title}</h3>
            <p>{hit.content}</p>
          </article>
        )}
      </Hits>
    </SearchProvider>
  );
}

Need a complete starter project?

View GitHub Examples

Frequently Asked Questions

Everything you need to know about SearchJet for Next.js

Does SearchJet work with Next.js App Router?

Yes, fully compatible with App Router and Server Components. The @searchjet/react package exports RSC-compatible components that work without "use client" for basic search functionality.

Is SSR supported?

Yes, SearchJet provides server-side search helpers for getServerSideProps and React Server Components. You can pre-fetch search results on the server for SEO-critical pages.

Does it work with TypeScript?

Yes, full TypeScript definitions included with type-safe APIs. All components, hooks, and utility types are fully typed with generics support for your data shape.

How do I add search to my Next.js app?

Install @searchjet/react, wrap your app with SearchProvider, add SearchBox and Hits components. See the code examples below for both App Router and Pages Router patterns.

Is there a demo I can try?

Yes, see our interactive demo at /vector-search-demo/ or check the GitHub examples repository for complete Next.js starter projects.

What about static export (SSG)?

SearchJet works with static export - search runs client-side with CDN-cached indexes. Perfect for Jamstack deployments on Vercel, Netlify, or Cloudflare Pages.

Still have questions?

Contact our support team

Ready to Add Search to Your Next.js App?

Join developers building exceptional search experiences with SearchJet

Install Package Read Docs

Free Forever Plan

No Credit Card

5-Min Setup

Already have an account? Log in

Explore more

JavaScript SDK•Documentation•Pricing•React Search

Instant Search for Next.js — SSR, App Router & TypeScript Ready

Next.js Search is Hard

No Native Search

SSR Complexity

Performance at Scale

SearchJet + Next.js

App Router & Server Components

Server-Side Search

TypeScript First

Streaming + Suspense

Static Export Compatible

Edge Runtime Ready

Performance at Scale

SearchJet vs. Traditional Search

How to Add AI Search in Next.js

Install the package

Create a search page

Add a search link to your navbar

Deploy and search

Copy-Paste Integration

Frequently Asked Questions

Ready to Add Search to Your Next.js App?

Related Use Cases

React Search Integration

JavaScript SDK

Vector Search & RAG