Add Search to Your Site

ALTER TABLE blog_posts ADD COLUMN search_vector tsvector;

UPDATE blog_posts SET search_vector = 
  setweight(to_tsvector('english', coalesce(title, '')), 'A') ||
  setweight(to_tsvector('english', coalesce(body, '')), 'B');

CREATE INDEX ON blog_posts USING gin(search_vector);

CREATE TRIGGER blog_posts_search_trigger
BEFORE INSERT OR UPDATE ON blog_posts
FOR EACH ROW EXECUTE FUNCTION
tsvector_update_trigger(
  search_vector, 'pg_catalog.english', title, body
);

SELECT id, title, ts_rank(search_vector, query) as rank
FROM blog_posts, plainto_tsquery('english', 'your search term') query
WHERE search_vector @@ query
ORDER BY rank DESC LIMIT 10;

export default async function handler(req: Request) {
  const url = new URL(req.url);
  const q = url.searchParams.get('q') ?? '';
  
  const results = await db.query(
    `SELECT id, title, slug, ts_rank(search_vector, query) as rank
     FROM blog_posts, plainto_tsquery('english', $1) query
     WHERE search_vector @@ query
     ORDER BY rank DESC LIMIT 10`,
    [q]
  );
  
  return Response.json({ results });
}

npm install algoliasearch react-instantsearch

import algoliasearch from 'algoliasearch';

const client = algoliasearch(APP_ID, ADMIN_KEY);
const index = client.initIndex('blog_posts');

const posts = await db.query('SELECT id, title, body, slug FROM blog_posts');
await index.saveObjects(
  posts.map(p => ({ objectID: p.id, ...p }))
);

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(APP_ID, SEARCH_KEY);

export default function Search() {
  return (
    <InstantSearch searchClient={searchClient} indexName="blog_posts">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}