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

// 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
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>
  );
}