### Run Next.js Development Server

Source: https://github.com/get-convex/convex-resource-search/blob/main/README.md

Commands to start the Next.js development server. These commands are typically run from the project's root directory and are essential for local development and testing. No specific inputs or outputs are defined beyond the server starting.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### Project Package Configuration in JSON

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

The `package.json` file for the project, detailing its name, version, and private status. It includes essential scripts for development (dev, build, start, lint) and lists all project dependencies, including libraries like `react`, `next`, `react-markdown`, and development tools such as `tailwindcss`.

```json
{
  "name": "search",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-icons": "^1.3.0",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@tailwindcss/postcss": "^4.1.11",
    "algoliasearch": "^5.0.0",
    "classnames": "^2.3.2",
    "next": "15.5.6",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-instantsearch": "^7.13.0",
    "react-markdown": "^10.0.0",
    "tailwindcss": "^4.1.11",
    "typescript": "5.9.3"
  }
}
```

--------------------------------

### Initialize Algolia Search Client with React InstantSearch

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

Initializes the Algolia search client using provided credentials and integrates it with React InstantSearch for enabling search functionality. This setup is typically done at the root of the application to provide the search client to all child components.

```typescript
'use client';

import Search from '@/components/Search';
import { liteClient } from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch';

// Initialize search client with Algolia credentials
const searchClient = liteClient(
  '1KIE511890',
  '07096f4c927e372785f8453f177afb16'
);

export default function Home() {
  return (
    <InstantSearch searchClient={searchClient}>
      <Search />
    </InstantSearch>
  );
}

```

--------------------------------

### Manage Search Query State and URL Sync in React

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

Implements the main search component, managing the search query state, synchronizing it with URL parameters for shareable searches, and rendering search input and results. It uses `react-instantsearch` hooks for search refinement and `URLSearchParams` for URL manipulation.

```typescript
'use client';

import { useSearchBox } from 'react-instantsearch';
import { useEffect, useState } from 'react';
import Results from './Results';
import SearchBox from './SearchBox';

const queryParam = 'q';

export default function Search() {
  const { refine } = useSearchBox();
  const [query, setQuery] = useState('');

  // Handle search input changes
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setQuery(value);
    refine(value);
    updateQueryParam(value);
  };

  // Clear search query
  const handleClear = () => {
    setQuery('');
    refine('');
    updateQueryParam('');
  };

  // Update URL parameter without page reload
  const updateQueryParam = (value: string) => {
    const urlParams = new URLSearchParams(window.location.search);
    if (value) {
      urlParams.set(queryParam, value);
    } else {
      urlParams.delete(queryParam);
    }

    const baseUrl = `${window.location.origin}${window.location.pathname}`;
    const newUrl = urlParams.toString()
      ? `${baseUrl}?${urlParams.toString()}`
      : baseUrl;

    window.history.pushState({}, '', newUrl);
  };

  // Load search query from URL on mount
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const searchParam = urlParams.get(queryParam);
    if (searchParam) {
      setQuery(searchParam);
      refine(searchParam);
    }
  }, [refine]);

  return (
    <div className="flex min-h-screen flex-col gap-4">
      <header className="sticky top-0 z-10">
        <SearchBox
          value={query}
          onChange={handleChange}
          onClear={handleClear}
        />
      </header>
      <main className="flex grow px-4">
        {query === '' ? (
          <div className="flex w-full items-center justify-center">
            <span>Use the input above to search across Docs, Stack, and Discord.</span>
          </div>
        ) : (
          <Results />
        )}
      </main>
    </div>
  );
}

```

--------------------------------

### Next.js Application Layout and Metadata in TypeScript

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

The root layout configuration for a Next.js application. It sets global styles and defines metadata for the application, including the title and description. This file is essential for structuring the application and ensuring consistent metadata across pages.

```typescript
// app/layout.tsx
import './globals.css';

export const metadata = {
  title: 'Convex Developer Search',
  description: 'Search Docs, Stack, Discord all at once',
};

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-neutral-n12">{children}</body>
    </html>
  );
}
```

--------------------------------

### Hit Component: Render Polymorphic Search Results

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

The Hit component renders individual search results, supporting different layouts for Docs, Stack, and Discord hits. It uses conditional rendering based on hit types (isDocsHit, isStackHit, isDiscordHit) and leverages 'react-instantsearch's Highlight component for displaying content. Dependencies include Next.js Image, ImageWithFallback, and a local Markdown component for rendering Discord messages.

```typescript
import Image from 'next/image';
import { Highlight } from 'react-instantsearch';
import ImageWithFallback from './ImageWithFallback';
import Markdown from './Markdown';
import { SearchHit, isDiscordHit, isDocsHit, isStackHit } from './types';

type HitProps = {
  hit: SearchHit;
};

export default function Hit({ hit }: HitProps) {
  return (
    <div className="rounded-lg border bg-neutral-n11 p-3 shadow-sm">
      {/* Documentation hit */}
      {isDocsHit(hit) && (
        <div className="flex flex-col">
          <a
            href={hit.objectID}
            className="mb-2 flex items-start gap-2 text-lg font-semibold"
            target="_blank"
          >
            <Image
              src="/icon-convex.svg"
              alt="Convex logo"
              width={20}
              height={20}
            />
            {hit.title}
          </a>
          <Highlight
            hit={hit}
            attribute="contents"
            className="text-neutral-n5 line-clamp-2"
          />
        </div>
      )}

      {/* Stack hit */}
      {isStackHit(hit) && (
        <div className="flex flex-col">
          <a
            href={`https://stack.convex.dev/${hit.objectID}`}
            className="mb-2 flex items-start gap-2 text-lg font-semibold"
            target="_blank"
          >
            <Image
              src="/icon-stack.svg"
              alt="Stack logo"
              width={20}
              height={20}
            />
            {hit.title}
          </a>
          <Highlight
            hit={hit}
            attribute="content"
            className="text-neutral-n5 line-clamp-2"
          />
        </div>
      )}

      {/* Discord hit */}
      {isDiscordHit(hit) && (
        <div className="flex flex-col">
          <a
            href={hit.url}
            className="mb-2 flex items-start gap-2 text-lg font-semibold"
            target="_blank"
          >
            <Image
              src="/icon-discord.svg"
              alt="Discord logo"
              width={20}
              height={20}
            />
            {hit.title}
          </a>
          <ol className="pt-2">
            {hit.messages.slice(0, 3).map((message, index) => (
              <li
                key={index}
                className="flex items-start gap-3 not-last-of-type:mb-2"
              >
                <ImageWithFallback
                  src={message.author.avatar}
                  fallbackSrc="/discordFallback.png"
                  alt={`Profile image for ${message.author.name}`}
                  width={48}
                  height={48}
                  className="rounded-full"
                />
                <div className="flex flex-col overflow-hidden">
                  <strong className="flex gap-2">
                    <span>{message.author.name}</span>
                    {message.author.convexer && (
                      <Image
                        src="/icon-convex.svg"
                        alt="Convex team member"
                        width={20}
                        height={20}
                      />
                    )}
                  </strong>
                  <Markdown text={message.body} />
                </div>
              </li>
            ))}
          </ol>
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### HitList Component: Display Search Results

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

The HitList component fetches and displays search results using the `useHits` hook from 'react-instantsearch'. It maps over the hits to render individual `Hit` components and displays a 'No results found.' message if the hits array is empty. It relies on the 'react-instantsearch' library and local 'Hit' and 'types' modules.

```typescript
import { useHits } from 'react-instantsearch';
import Hit from './Hit';
import { SearchHit } from './types';

export default function HitList() {
  const { hits } = useHits<SearchHit>();

  return (
    <ul className="flex flex-col gap-4">
      {hits.map((hit) => (
        <li key={hit.objectID}>
          <Hit hit={hit} />
        </li>
      ))}
      {hits.length === 0 && (
        <p className="text-red-r2">No results found.</p>
      )}
    </ul>
  );
}
```

--------------------------------

### TypeScript Multi-Index Results Component for Search

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

A React component for displaying search results from multiple Algolia indexes. It features adaptive UI, with tabbed navigation for mobile and a grid layout for desktop. It uses `useState` to manage the currently selected index.

```typescript
import { Index } from 'react-instantsearch';
import HitList from './HitList';
import { useState } from 'react';
import classnames from 'classnames';

const indexes = [
  {
    name: 'docs',
    title: 'Docs',
    link: 'https://docs.convex.dev',
  },
  {
    name: 'stack',
    title: 'Stack',
    link: 'https://stack.convex.dev',
  },
  {
    name: 'discord',
    title: 'Discord',
    link: 'https://discord.com/invite/nk6C2qTeCq',
  },
];

export default function Results() {
  const [selectedIndexName, setSelectedIndexName] = useState(indexes[0].name);

  return (
    <div className="w-full">
      {/* Mobile tabs */}
      <div className="mb-4 flex gap-2 border-b lg:hidden">
        {indexes.map(({ name, title }) => (
          <button
            key={name}
            className={classnames(
              'border-b-2 px-3 pb-2 text-xl',
              {
                'border-transparent': name !== selectedIndexName,
                'border-neutral-n5': name === selectedIndexName,
              }
            )}
            onClick={() => setSelectedIndexName(name)}
          >
            {title}
          </button>
        ))}
      </div>

      {/* Desktop grid */}
      <div className="lg:grid lg:grid-cols-3 lg:gap-6">
        {indexes.map(({ name, title, link }) => (
          <div key={name}>
            <a
              href={link}
              className="hidden lg:block"
              target="_blank"
            >
              {title}
            </a>
            <div
              className={classnames(
                { hidden: name !== selectedIndexName },
                'lg:block'
              )}
            >
              <Index indexName={name}>
                <HitList />
              </Index>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
```

--------------------------------

### Image Component with Fallback in TypeScript

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

A client-side image component for Next.js that provides fallback support for broken images. It uses the `next/image` component and manages the image source state. If an image fails to load, it automatically switches to a provided `fallbackSrc`. This component accepts standard `ImageProps` along with a `fallbackSrc`.

```typescript
'use client';

import Image, { ImageProps } from 'next/image';
import { useState } from 'react';

interface ImageWithFallbackProps extends Omit<ImageProps, 'src'> {
  src: string;
  fallbackSrc: string;
}

export default function ImageWithFallback({
  src,
  fallbackSrc,
  ...props
}: ImageWithFallbackProps) {
  const [imgSrc, setImgSrc] = useState(src);
  const [hasError, setHasError] = useState(false);

  const handleError = () => {
    if (!hasError) {
      setHasError(true);
      setImgSrc(fallbackSrc);
    }
  };

  return <Image src={imgSrc} onError={handleError} {...props} />;
}

// Usage example
import ImageWithFallback from './ImageWithFallback';

function UserAvatar({ avatarUrl, username }: { avatarUrl: string; username: string }) {
  return (
    <ImageWithFallback
      src={avatarUrl}
      fallbackSrc="/default-avatar.png"
      alt={`${username}'s avatar`}
      width={48}
      height={48}
      className="rounded-full"
    />
  );
}
```

--------------------------------

### TypeScript SearchBox Component with Auto-focus

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

A reusable React SearchBox component that includes automatic input focus on mount and a clear button for resetting the search query. It utilizes `useRef` for direct DOM manipulation and `useEffect` for managing focus.

```typescript
import { Cross2Icon } from '@radix-ui/react-icons';
import { useEffect, useRef } from 'react';

interface SearchBoxProps {
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onClear: () => void;
}

export default function SearchBox({
  value,
  onChange,
  onClear,
}: SearchBoxProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  const handleClear = () => {
    onClear();
    focusInput();
  };

  useEffect(() => {
    focusInput();
  }, []);

  return (
    <div className="relative md:grow">
      <input
        type="text"
        placeholder="Search across Docs, Stack, and Discord..."
        className="w-full bg-white rounded-sm p-2"
        value={value}
        onChange={onChange}
        ref={inputRef}
      />
      {value !== '' && (
        <button
          className="absolute bottom-0 right-1 top-0 flex items-center"
          onClick={handleClear}
        >
          <Cross2Icon className="w-6 h-6" />
        </button>
      )}
    </div>
  );
}
```

--------------------------------

### TypeScript Type Definitions and Type Guards for Search Hits

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

Defines TypeScript types for different kinds of search results (Docs, Stack, Discord) and provides type guard functions to safely determine the type of a given search hit. This enhances type safety and code clarity when processing search results.

```typescript
export type BaseHit = {
  title: string;
  objectID: string;
  __position: number;
};

export type DocsHit = BaseHit & {
  contents: string;
};

export type StackHit = BaseHit & {
  summary: string;
  content: string;
  tags: string[];
};

export type DiscordHit = BaseHit & {
  channel: string;
  url: string;
  date: number;
  messages: {
    author: {
      avatar: string;
      convexer: boolean;
      name: string;
    };
    body: string;
  }[];
};

export type SearchHit = DocsHit | StackHit | DiscordHit;

// Type guard functions
export function isDocsHit(hit: SearchHit): hit is DocsHit {
  return (hit as DocsHit).contents !== undefined;
}

export function isStackHit(hit: SearchHit): hit is StackHit {
  return (hit as StackHit).summary !== undefined;
}

export function isDiscordHit(hit: SearchHit): hit is DiscordHit {
  return (hit as DiscordHit).messages !== undefined;
}
```

```typescript
// Usage example
import { SearchHit, isDocsHit, isStackHit, isDiscordHit } from './types';

function processHit(hit: SearchHit) {
  if (isDocsHit(hit)) {
    console.log('Doc contents:', hit.contents);
  } else if (isStackHit(hit)) {
    console.log('Stack tags:', hit.tags);
  } else if (isDiscordHit(hit)) {
    console.log('Discord messages:', hit.messages);
  }
}
```

--------------------------------

### Markdown Renderer Component in TypeScript

Source: https://context7.com/get-convex/convex-resource-search/llms.txt

A React component that renders markdown content with custom styling for various markdown elements like paragraphs, code blocks, and lists. It utilizes the `react-markdown` library and defines specific CSS classes for enhanced presentation. This component takes a `text` prop which is the markdown string to be rendered.

```typescript
import ReactMarkdown from 'react-markdown';

interface MarkdownProps {
  text: string;
}

export default function Markdown({ text }: MarkdownProps) {
  return (
    <ReactMarkdown
      components={{
        p: ({ children }) => (
          <p className="mb-2 text-neutral-n5">{children}</p>
        ),
        pre: ({ children }) => (
          <div className="mb-4 max-h-72 w-full overflow-x-auto rounded-sm bg-neutral-n12 p-2">
            <pre className="text-neutral-n5">{children}</pre>
          </div>
        ),
        code: ({ children }) => (
          <code className="break-words bg-neutral-n12 text-neutral-n3">
            {children}
          </code>
        ),
        ol: ({ children }) => (
          <ol className="mb-4 list-inside list-decimal text-neutral-n5">
            {children}
          </ol>
        ),
        li: ({ children }) => (
          <li className="text-neutral-n5">{children}</li>
        ),
      }}
    >
      {text}
    </ReactMarkdown>
  );
}

// Usage example
import Markdown from './Markdown';

function DiscordMessage() {
  const messageBody = "Here's some **bold** text and `code`:\n```js\nconst x = 1;\n```";

  return (
    <div>
      <Markdown text={messageBody} />
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.