Search for Decoupled Architectures

// Frontend search over your Strapi content (React)
import { useState } from 'react';

// Use a SEARCH key in the browser, never the private key
const SEARCH_KEY = process.env.NEXT_PUBLIC_SEARCHJET_SEARCH_KEY;

export default function BlogSearch() {
  const [results, setResults] = useState([]);

  async function search(q) {
    if (!q) return setResults([]);
    const params = new URLSearchParams({
      q,
      limit: '10',
      // "type" must be marked filterable in your index settings
      filters: 'type = "article"'
    });
    const res = await fetch(
      'https://app.searchjetengine.com/api/v1/search?' + params,
      { headers: { Authorization: 'Bearer ' + SEARCH_KEY } }
    );
    const data = await res.json();
    setResults(data.results); // results is the array of hits
  }

  return (
    <div>
      <input type="search" placeholder="Search the blog..."
        onChange={e => search(e.target.value)} />
      <div className="results">
        {results.map(post => (
          <article key={post.id}>
            <h3><a href={post.url}>{post.title}</a></h3>
            <p>{post.excerpt}</p>
            <small>{post.date}</small>
          </article>
        ))}
      </div>
    </div>
  );
}

// app/api/searchjet-sync/route.js
// Your own endpoint (Next.js), called by the Sanity webhook
export async function POST(req) {
  if (req.headers.get('x-webhook-secret') !== process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const doc = await req.json(); // shaped by the webhook projection

  const res = await fetch('https://app.searchjetengine.com/api/v1/index/bulk', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + process.env.SEARCHJET_PRIVATE_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      documents: [{
        id: doc._id,
        title: doc.title,
        content: doc.body,
        url: 'https://example.com/' + doc.slug,
        type: doc._type,
        date: doc._updatedAt
      }]
    })
  });
  return Response.json(await res.json()); // includes taskUid
}

// Map a Contentful "Entry.publish" webhook payload
// inside your own endpoint (same pattern as the Sanity route)
function toSearchJetDocument(entry, locale = 'en-US') {
  const f = entry.fields;
  return {
    id: entry.sys.id,
    title: f.title?.[locale],
    content: f.body?.[locale], // assumes a Long text field
    excerpt: f.excerpt?.[locale],
    url: 'https://example.com/blog/' + f.slug?.[locale],
    type: entry.sys.contentType.sys.id,
    date: entry.sys.updatedAt,
    metadata: { tags: f.tags?.[locale] || [] }
  };
}

// Then POST { documents: [toSearchJetDocument(entry)] }
// to https://app.searchjetengine.com/api/v1/index/bulk
// with Authorization: Bearer <private key from an env var>