next-static-search
Version:
A powerful react search based on pagefind with beautiful UI
116 lines (84 loc) • 3.09 kB
Markdown
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.
[](https://www.jsdelivr.com/package/npm/next-static-search)
[](https://standardjs.com)
[]: https://img.shields.io/npm/dm/next-static-search.svg
[]: https://npmjs.org/package/next-static-search
[](https://npmjs.org/package/next-static-search)
```bash
npm i next-static-search
yarn add next-static-search
pnpm i next-static-search
bun add next-static-search
```
Access Demo at: [Demo](https://next-static-search.vercel.app/)
- 🔧 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
## 🧑💻 Usage
Install pagefind as a dev dependency:
```bash
npm i pagefind --save-dev
yarn add pagefind -D
pnpm i pagefind --save-dev
bun add pagefind --save-dev
```
Add following command to your package.json as `next-static-search` rely on files generated by pagefind.
```json
// package.json
{
// ...
"scripts": {
"postbuild": "pagefind --site .next --output-path .next/static/pagefind"
}
// ...
}
```
Import the component where you want this search:
```jsx
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>
);
}
```
```ts
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](https://github.com/faraasat)**
Feedback and contributions welcome!