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.

📦 Installation

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

🔍 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:

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.

// 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>
  );
}

🔧 Config object structure

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 Feedback and contributions welcome!

Keywords

FAQs

What is next-static-search?

Is next-static-search popular?

Is next-static-search well maintained?

Package last updated on 20 Jul 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

next-static-search