CMDK Static Full-Text Search Pattern

This pattern implements a global Cmd+K command menu that can search across massive amounts of Markdown/MDX content instantly without paying for a database or serverless execution costs.

When to Use

• When a project requires a global search feature.
• When the content is file-system based (MDX, Markdown) or fetched from a headless CMS at build time.
• When you want to avoid third-party search tools like Algolia.
• When you need full-text search (searching the raw body text) rather than just title/URL matching.

Implementation Details

1. Static API Route (src/app/api/search/route.ts)

Instead of fetching data on every keypress or paying for serverless execution, we force Next.js to bake our entire content payload into a static JSON edge-cached file at build time.

import { NextResponse } from "next/server";
// Import your data fetchers/local FS queries here

// CRITICAL: Force static generation to avoid $Vercel serverless execution fees.
export const dynamic = "force-static";

export async function GET() {
  // 1. Fetch all posts/MDX files
  // 2. Map them into `{ title, href, type, content: rawMdxString }`
  // 3. Return as a single `NextResponse.json()`
}

2. High-Performance CmdK Component (src/components/ui/SearchPalette.tsx)

Because we pass raw Markdown chunks (often thousands of characters long) into cmdk to be searched, cmdk's default command-score algorithm will block the main thread and freeze the browser on every keypress. We bypass this with a basic native .includes() search.

import { useState, useEffect, useCallback } from "react";
import { Command } from "cmdk";

export function SearchPalette() {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [results, setResults] = useState([]);

  // Fetch data only when they open the palette
  useEffect(() => {
    if (open && results.length === 0) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      fetch("/api/search")
        .then((res) => res.json())
        .then(setResults);
    }
  }, [open, results.length]);

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4">
      {/* ... Add backdrop & Cmd K event listener ... */}
      <Command
        shouldFilter={true}
        // CRITICAL: Fast native filter prevents main-thread blocking on giant text payloads
        filter={(value, searchString) => {
          if (value.toLowerCase().includes(searchString.toLowerCase()))
            return 1;
          return 0;
        }}
      >
        <Command.Input value={search} onValueChange={setSearch} />
        <Command.List>
          {results.map((result) => (
            <Command.Item
              key={result.href}
              // CRITICAL: Combine type, title, and raw content for the full-text matching string
              value={`${result.type} ${result.title} ${result.content || ""}`}
              onSelect={() => router.push(result.href)}
            >
              {/* Title Rendering */}
              {result.title}

              {/* Dynamic Snippet Generator: Call a method to extract +/- 40 characters from where `search` matched `result.content` */}
            </Command.Item>
          ))}
        </Command.List>
      </Command>
    </div>
  );
}

3. Dynamic Snippet Generation

Extract the surrounding 80 characters of text where the match occurs, sanitize Markdown symbols, and highlight the query string within the snippet:

const getSnippet = (content?: string, query?: string) => {
  if (!content || !query || query.length < 3) return null;
  const cleanContent = content
    .replace(/[#*\`_\[\]()]/g, " ")
    .replace(/\s+/g, " ");
  const index = cleanContent.toLowerCase().indexOf(query.toLowerCase());
  if (index === -1) return null;

  const start = Math.max(0, index - 40);
  const end = Math.min(cleanContent.length, index + query.length + 40);

  let snippet = cleanContent.slice(start, end);
  if (start > 0) snippet = "..." + snippet;
  if (end < cleanContent.length) snippet = snippet + "...";

  const regex = new RegExp(`(${query})`, "gi");
  const parts = snippet.split(regex);

  return (
    <span>
      {parts.map((part, i) =>
        part.toLowerCase() === query.toLowerCase() ? (
          <span key={i} className="font-bold text-accent">
            {part}
          </span>
        ) : (
          part
        ),
      )}
    </span>
  );
};