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

// app/search/page.jsx — a Server Component: results are in the HTML, no client JS
const API = 'https://app.searchjetengine.com/api/v1';

export default async function SearchPage({ searchParams }) {
  const { q = '' } = await searchParams; // searchParams is a Promise in Next 15+

  let data = { results: [], total: 0 };
  if (q) {
    const res = await fetch(
      `${API}/search?q=${encodeURIComponent(q)}&limit=10`,
      {
        headers: { Authorization: `Bearer ${process.env.SEARCHJET_SEARCH_KEY}` },
        cache: 'no-store',
      }
    );
    if (res.ok) data = await res.json(); // { results: [...], total, limit, offset, ... }
  }

  return (
    <main>
      <form action="/search">
        <input name="q" defaultValue={q} placeholder="Search docs..." />
      </form>
      {q && <p>{data.total} results for "{q}"</p>}
      {data.results.map((hit) => (
        <article key={hit.id} className="p-4 border-b">
          <h3><a href={hit.url}>{hit.title}</a></h3>
          <p>{hit.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

// app/api/search/route.js — proxies search so the key stays in an env var
export async function GET(request) {
  const q = request.nextUrl.searchParams.get('q') ?? '';
  const res = await fetch(
    `https://app.searchjetengine.com/api/v1/search?q=${encodeURIComponent(q)}&limit=10`,
    { headers: { Authorization: `Bearer ${process.env.SEARCHJET_SEARCH_KEY}` } }
  );
  return Response.json(await res.json(), { status: res.status });
}

// components/LiveSearch.jsx — search-as-you-type client component
'use client';
import { useEffect, useState } from 'react';

export default function LiveSearch() {
  const [q, setQ] = useState('');
  const [hits, setHits] = useState([]);

  useEffect(() => {
    if (!q) { setHits([]); return; }
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {
          signal: controller.signal,
        });
        const data = await res.json();
        setHits(data.results ?? []); // results is the array of hits
      } catch {} // aborted or network error
    }, 200); // debounce keystrokes
    return () => { clearTimeout(timer); controller.abort(); };
  }, [q]);

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search docs..." />
      {hits.map((hit) => (
        <article key={hit.id} className="p-4 border-b">
          <h3><a href={hit.url}>{hit.title}</a></h3>
          <p>{hit.excerpt}</p>
        </article>
      ))}
    </div>
  );
}