# 🔎 Next Static Search Based on Pagefind 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 version](https://img.shields.io/npm/v/next-static-search.svg) ![package size minified](https://img.shields.io/bundlephobia/min/next-static-search?style=plastic) [![](https://data.jsdelivr.com/v1/package/npm/next-static-search/badge)](https://www.jsdelivr.com/package/npm/next-static-search) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![total downloads](https://img.shields.io/npm/dt/next-static-search.svg) ![total downloads per year](https://img.shields.io/npm/dy/next-static-search.svg) ![total downloads per week](https://img.shields.io/npm/dw/next-static-search.svg) ![total downloads per month](https://img.shields.io/npm/dm/next-static-search.svg) [download-image]: https://img.shields.io/npm/dm/next-static-search.svg [download-url]: https://npmjs.org/package/next-static-search [![next-static-search](https://nodei.co/npm/next-static-search.png)](https://npmjs.org/package/next-static-search) ## 📦 Installation ```bash npm i next-static-search yarn add next-static-search pnpm i next-static-search bun add next-static-search ``` ## ⚙️ Demo Access Demo at: [Demo](https://next-static-search.vercel.app/) ## 🔍 Features - 🔧 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 (

{children} ); } ``` ## 🔧 Config object structure ```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"; } ``` ## 🧑‍🎓 Credits Developed with ❤️ by **[Farasat Ali](https://github.com/faraasat)** Feedback and contributions welcome!