Building Search-Powered Next.js Apps with API Integration

Next.js is the most popular React framework for building web applications, but search functionality remains a common pain point. Whether you're building a documentation site, e-commerce store, or SaaS dashboard, you need search that's fast, relevant, and doesn't require a separate infrastructure stack.

This guide compares the main approaches to adding search to Next.js apps and shows how SearchHive SwiftSearch simplifies the process with a single API.

Key Takeaways

• Client-side search libraries (Fuse.js, Lunr) work for small datasets but struggle above a few thousand documents
• Full-text search engines (Algolia, Meilisearch, Typesense) are powerful but add infrastructure complexity
• SearchHive SwiftSearch provides web search results via API -- ideal for apps that search the open web
• Combination approach: use a client-side library for site search + SearchHive for web search
• SearchHive starts at $9/month with 5,000 search queries included

Next.js Search Options: Comparison Table

Client-Side Search: Fuse.js and Lunr.js

For small Next.js applications, client-side search is the simplest option. No server, no database -- just a JavaScript library running in the browser.

Fuse.js Example (Next.js)

"use client";
import { useState, useMemo } from "react";
import Fuse from "fuse.js";

const data = [
  { title: "Getting Started", url: "/docs/getting-started" },
  { title: "API Reference", url: "/docs/api" },
  { title: "Deployment Guide", url: "/docs/deployment" },
];

const fuse = new Fuse(data, { keys: ["title"] });

export default function Search() {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () => query.length > 1 ? fuse.search(query) : [],
    [query]
  );

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search docs..."
      />
      <ul>
        {results.map((r) => (
          <li key={r.item.url}>
            <a href={r.item.url}>{r.item.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

This works well for documentation sites with a few hundred pages. Limitations:

• Search index ships to every user (larger bundles)
• No ranking algorithm beyond fuzzy matching
• Does not search the open web

Server-Side Search with SearchHive SwiftSearch

When your Next.js app needs to search the web (not just your own content), SearchHive SwiftSearch provides real-time web search results via API.

SwiftSearch in a Next.js API Route

// app/api/search/route.js
import { NextResponse } from "next/server";

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const query = searchParams.get("q");

  if (!query) {
    return NextResponse.json({ error: "Query required" }, { status: 400 });
  }

  const response = await fetch(
    "https://api.searchhive.dev/v1/search",
    {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.SEARCHHIVE_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: query,
        limit: 10,
        country: "us",
      }),
    }
  );

  const data = await response.json();
  return NextResponse.json(data);
}

Frontend Component

"use client";
import { useState } from "react";

export default function WebSearch() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  async function handleSearch(e) {
    e.preventDefault();
    setLoading(true);
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    const data = await res.json();
    setResults(data.results || []);
    setLoading(false);
  }

  return (
    <div className="max-w-2xl mx-auto p-4">
      <form onSubmit={handleSearch}>
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search the web..."
          className="w-full border rounded-lg p-3"
        />
      </form>
      <ul className="mt-4 space-y-3">
        {results.map((r) => (
          <li key={r.url} className="border-b pb-3">
            <a href={r.url} className="text-blue-600 hover:underline">
              {r.title}
            </a>
            <p className="text-gray-500 text-sm">{r.snippet}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Python Backend Alternative

If your Next.js app calls a Python backend:

import requests

API_KEY = "sh_live_your_key_here"

def search_web(query, limit=10):
    response = requests.post(
        "https://api.searchhive.dev/v1/search",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json={"query": query, "limit": limit}
    )
    return response.json().get("results", [])

# Returns list of {title, url, snippet, ...}
results = search_web("best python web scraping libraries 2026")

Comparing Costs at Scale

10,000 search queries per month:

SearchHive is the most cost-effective option when you need web search results (not just site search). For site-internal search with your own content index, Meilisearch or Typesense are better choices.

The Right Tool for Your Use Case

Building a documentation site? Use Pagefind or Fuse.js. Build-time indexing, zero cost, works with Next.js static export.

Building an e-commerce store? Use Algolia or Typesense. They handle faceted search, filters, and relevance tuning for product catalogs.

Building an AI-powered app? Use SearchHive SwiftSearch. It returns web search results that you can feed to LLMs for grounding, RAG, or research agents.

Building a research/ aggregator tool? Use SearchHive. It's built for web-scale search with clean free JSON formatter results.

Verdict

There's no single "best" search solution for Next.js -- it depends on what you're searching. For site-internal content, Fuse.js and Meilisearch are excellent. For searching the open web, SearchHive SwiftSearch delivers real-time results at the lowest cost per query.

The API is a single POST request, works with any backend (Node.js, Python, Go), and returns structured JSON results. At $9/month for 5,000 queries, it's hard to beat for web search integration.

Get started with 500 free credits and check the SwiftSearch API documentation for Next.js integration examples.