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
| Approach | Setup Complexity | Cost | Best For | Scale |
|---|---|---|---|---|
| Fuse.js (client-side) | Low | Free | Small static sites | Up to ~5K items |
| Lunr.js (client-side) | Low | Free | Static blogs/docs | Up to ~10K items |
| Algolia | Medium | $1-12/1K searches | E-commerce, docs | Unlimited |
| Meilisearch | Medium-High | Free (self-hosted) | Full-text search | Millions of docs |
| Typesense | Medium | Free (self-hosted) | E-commerce | Millions of docs |
| SearchHive SwiftSearch | Low | $9/mo (5K) | Web search results | Unlimited web data |
| Pagefind | Low | Free | Static sites (build-time) | Thousands of pages |
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:
| Provider | Monthly Cost | Setup |
|---|---|---|
| Fuse.js / Lunr.js | $0 (client compute) | 1 hour |
| Algolia | $12-50 | 2-4 hours |
| Meilisearch (self-hosted) | $20-60 (server) | 4-8 hours |
| SearchHive Starter | $9/mo (5K included) | 15 min |
| SearchHive Builder | $49/mo (100K) | 15 min |
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.