A lightweight, zero-config search solution for Next.js static sites, built on top of Pagefind. Easily integrate full-text, client-side search into your statically generated Next.js website without relying on external services.
npm i next-static-search
yarn add next-static-search
pnpm i next-static-search
bun add next-static-searchAccess Demo at: Demo
- 🔧 Plug-and-play integration with static Next.js sites (SSG/ISR compatible)
- ⚡ Blazing fast search powered by Pagefind
- 🧠 Prebuilt search index with zero runtime cost
- 🎯 Works out-of-the-box with Next.js export and static hosting
Install pagefind as a dev dependency:
npm i pagefind --save-dev
yarn add pagefind -D
pnpm i pagefind --save-dev
bun add pagefind --save-devAdd following command to your package.json as next-static-search rely on files generated by pagefind.
// package.json
{
// ...
"scripts": {
"postbuild": "pagefind --site .next --output-path .next/static/pagefind"
}
// ...
}Import the component where you want this search:
import { NextStaticSearch } from "next-static-search";
import "./globals.css";
import "next-static-search/dist/index.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode,
}>) {
return (
<html lang="en">
<body>
<header>
<NextStaticSearch />
</header>
{children}
</body>
</html>
);
}interface INextStaticSearch {
placeholder?: string;
searchClassName?: string;
macSymbol?: React.JSX.Element | string;
windowsSymbol?: React.JSX.Element | string;
searchBoxTitle?: string;
errorMessage?: string;
notFoundMessage?: string;
searchBoxType: "modal" | "inline";
}Developed with ❤️ by Farasat Ali Feedback and contributions welcome!