Implementing Search in an Application

Effective search is a key element of most web applications. In this module, we will learn various search implementation techniques in Next.js applications, both on the server and client side.

Types of Search in Web Applications

Before we proceed to implementation, it's worth understanding the different types of search that can be applied in an application:

1. Simple search - basic data filtering by specific criteria
2. Full-text search - advanced text search with logical operator support
3. Faceted search - filtering using categories and ranges
4. Search with suggestions - real-time query autocomplete
5. Error-correcting search - tolerance for typos and spelling mistakes

Server-Side Search Implementation

Server-side search is usually more efficient for large datasets because we can leverage database indexes and don't need to send all data to the client.

1. Search Using Server Components

1// app/products/page.tsx
2import { prisma } from '@/lib/prisma';
3import { ProductCard } from '@/components/ProductCard';
4import { SearchForm } from './SearchForm';
5
6export default async function ProductsPage({
7  searchParams
8}: {
9  searchParams: { q?: string; category?: string }
10}) {
11  // Get search parameters from URL
12  const query = searchParams.q || '';
13  const category = searchParams.category;
14  
15  // Build search conditions
16  const where: any = {};
17  
18  if (query) {
19    where.OR = [
20      { name: { contains: query, mode: 'insensitive' } },
21      { description: { contains: query, mode: 'insensitive' } },
22    ];
23  }
24  
25  if (category) {
26    where.categoryId = category;
27  }
28  
29  // Fetch data from database
30  const products = await prisma.product.findMany({
31    where,
32    include: {
33      category: true,
34    },
35    orderBy: {
36      createdAt: 'desc',
37    },
38  });
39  
40  // Fetch all categories (for filters)
41  const categories = await prisma.category.findMany({
42    orderBy: {
43      name: 'asc',
44    },
45  });
46  
47  return (
48    <div className="container mx-auto py-8">
49      <h1 className="text-3xl font-bold mb-6">Products</h1>
50      
51      {/* Formularz wyszukiwania */}
52      <SearchForm 
53        initialQuery={query} 
54        initialCategory={category}
55        categories={categories}
56      />
57      
58      {/* Number of results */}
59      <p className="mb-4">
60        {products.length} products found
61        {query && ` matching "${query}"`}
62        {category && ` in selected category`}
63      </p>
64      
65      {/* Product list */}
66      {products.length > 0 ? (
67        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
68          {products.map(product => (
69            <ProductCard key={product.id} product={product} />
70          ))}
71        </div>
72      ) : (
73        <p className="text-gray-500">
74          No products found. Try a different search term.
75        </p>
76      )}
77    </div>
78  );
79}

2. Search Form Component

1// app/products/SearchForm.tsx
2'use client';
3
4import { useRouter } from 'next/navigation';
5import { useState } from 'react';
6
7export function SearchForm({ 
8  initialQuery = '', 
9  initialCategory = '',
10  categories = []
11}) {
12  const router = useRouter();
13  const [query, setQuery] = useState(initialQuery);
14  const [category, setCategory] = useState(initialCategory);
15  
16  const handleSubmit = (e) => {
17    e.preventDefault();
18    
19    // Build URL parameters
20    const params = new URLSearchParams();
21    if (query) params.set('q', query);
22    if (category) params.set('category', category);
23    
24    // Navigate to new URL with search parameters
25    router.push(`/products?${params.toString()}`);
26  };
27  
28  const handleReset = () => {
29    setQuery('');
30    setCategory('');
31    router.push('/products');
32  };
33  
34  return (
35    <form onSubmit={handleSubmit} className="mb-8 p-4 bg-gray-50 rounded-lg">
36      <div className="flex flex-wrap gap-4">
37        <div className="flex-grow">
38          <label htmlFor="search" className="block mb-1 font-medium">
39            Search
40          </label>
41          <input
42            type="search"
43            id="search"
44            value={query}
45            onChange={(e) => setQuery(e.target.value)}
46            className="w-full p-2 border rounded"
47          />
48        </div>
49        
50        <div className="w-full md:w-auto md:min-w-[200px]">
51          <label htmlFor="category" className="block mb-1 font-medium">
52            Category
53          </label>
54          <select
55            id="category"
56            value={category}
57            onChange={(e) => setCategory(e.target.value)}
58            className="w-full p-2 border rounded"
59          >
60            <option value="">All Categories</option>
61            {categories.map((cat) => (
62              <option key={cat.id} value={cat.id}>
63                {cat.name}
64              </option>
65            ))}
66          </select>
67        </div>
68      </div>
69      
70      <div className="mt-4 flex gap-2">
71        <button
72          type="submit"
73          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
74        >
75          Search
76        </button>
77        <button
78          type="button"
79          onClick={handleReset}
80          className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
81        >
82          Reset
83        </button>
84      </div>
85    </form>
86  );
87}

3. Search Implementation with Pagination

For larger datasets, it's worth adding result pagination:

1// app/products/page.tsx
2export default async function ProductsPage({
3  searchParams
4}: {
5  searchParams: { q?: string; category?: string; page?: string }
6}) {
7  const query = searchParams.q || '';
8  const category = searchParams.category;
9  const page = Number(searchParams.page) || 1;
10  const itemsPerPage = 12;
11  
12  // Search conditions as before
13  const where = { /* ... */ };
14  
15  // Fetch data with pagination
16  const products = await prisma.product.findMany({
17    where,
18    include: {
19      category: true,
20    },
21    orderBy: {
22      createdAt: 'desc',
23    },
24    skip: (page - 1) * itemsPerPage,
25    take: itemsPerPage,
26  });
27  
28  // Get total result count for pagination
29  const totalCount = await prisma.product.count({ where });
30  const totalPages = Math.ceil(totalCount / itemsPerPage);
31  
32  return (
33    <div>
34      {/* ... */}
35      
36      {/* Product list */}
37      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
38        {products.map(product => (
39          <ProductCard key={product.id} product={product} />
40        ))}
41      </div>
42      
43      {/* Pagination */}
44      <Pagination 
45        currentPage={page} 
46        totalPages={totalPages}
47        query={query}
48        category={category}
49      />
50    </div>
51  );
52}
53
54// app/products/Pagination.tsx
55'use client';
56
57import Link from 'next/link';
58
59export function Pagination({ 
60  currentPage, 
61  totalPages,
62  query,
63  category
64}) {
65  // Generate URL for a given page
66  const getPageUrl = (page) => {
67    const params = new URLSearchParams();
68    if (query) params.set('q', query);
69    if (category) params.set('category', category);
70    params.set('page', String(page));
71    
72    return `/products?${params.toString()}`;
73  };
74  
75  // Generate array of pages to display
76  const getPageNumbers = () => {
77    const pages = [];
78    const maxVisiblePages = 5;
79    
80    if (totalPages <= maxVisiblePages) {
81      // If there are few pages, show all
82      for (let i = 1; i <= totalPages; i++) {
83        pages.push(i);
84      }
85    } else {
86      // Always show the first page
87      pages.push(1);
88      
89      // Show ellipses or pages around the current one
90      if (currentPage <= 3) {
91        pages.push(2, 3, 4, '...');
92      } else if (currentPage >= totalPages - 2) {
93        pages.push('...', totalPages - 3, totalPages - 2, totalPages - 1);
94      } else {
95        pages.push(
96          '...',
97          currentPage - 1,
98          currentPage,
99          currentPage + 1,
100          '...'
101        );
102      }
103      
104      // Always show the last page
105      if (totalPages > 1) {
106        pages.push(totalPages);
107      }
108    }
109    
110    return pages;
111  };
112  
113  if (totalPages <= 1) return null;
114  
115  return (
116    <div className="flex justify-center mt-8">
117      <nav className="flex items-center gap-1">
118        {/* "Previous" button */}
119        {currentPage > 1 && (
120          <Link
121            href={getPageUrl(currentPage - 1)}
122            className="px-3 py-2 border rounded hover:bg-gray-100"
123          >
124            &laquo; Previous
125          </Link>
126        )}
127        
128        {/* Page numbers */}
129        {getPageNumbers().map((page, index) => (
130          <React.Fragment key={index}>
131            {page === '...' ? (
132              <span className="px-3 py-2">...</span>
133            ) : (
134              <Link
135                href={getPageUrl(page)}
136                className={`px-3 py-2 border rounded ${
137                  currentPage === page
138                    ? 'bg-blue-500 text-white'
139                    : 'hover:bg-gray-100'
140                }`}
141              >
142                {page}
143              </Link>
144            )}
145          </React.Fragment>
146        ))}
147        
148        {/* "Next" button */}
149        {currentPage < totalPages && (
150          <Link
151            href={getPageUrl(currentPage + 1)}
152            className="px-3 py-2 border rounded hover:bg-gray-100"
153          >
154            Next &raquo;
155          </Link>
156        )}
157      </nav>
158    </div>
159  );
160}

4. Faceted Search (with Filters)

Faceted search, with multiple filters, is useful for e-commerce sites and other applications with large datasets:

1// app/products/page.tsx
2export default async function ProductsPage({
3  searchParams
4}: {
5  searchParams: { 
6    q?: string; 
7    category?: string;
8    minPrice?: string;
9    maxPrice?: string;
10    brand?: string;
11    sort?: string;
12    page?: string;
13  }
14}) {
15  const query = searchParams.q || '';
16  const category = searchParams.category;
17  const minPrice = Number(searchParams.minPrice) || undefined;
18  const maxPrice = Number(searchParams.maxPrice) || undefined;
19  const brand = searchParams.brand;
20  const sortBy = searchParams.sort || 'createdAt_desc';
21  const page = Number(searchParams.page) || 1;
22  const itemsPerPage = 12;
23  
24  // Build search conditions
25  const where: any = {};
26  
27  if (query) {
28    where.OR = [
29      { name: { contains: query, mode: 'insensitive' } },
30      { description: { contains: query, mode: 'insensitive' } },
31    ];
32  }
33  
34  if (category) {
35    where.categoryId = category;
36  }
37  
38  if (brand) {
39    where.brand = brand;
40  }
41  
42  // Filter by price
43  if (minPrice !== undefined || maxPrice !== undefined) {
44    where.price = {};
45    
46    if (minPrice !== undefined) {
47      where.price.gte = minPrice;
48    }
49    
50    if (maxPrice !== undefined) {
51      where.price.lte = maxPrice;
52    }
53  }
54  
55  // Parse sorting
56  const [sortField, sortOrder] = sortBy.split('_');
57  const orderBy = {
58    [sortField]: sortOrder,
59  };
60  
61  // Fetch data with pagination
62  const products = await prisma.product.findMany({
63    where,
64    include: {
65      category: true,
66    },
67    orderBy,
68    skip: (page - 1) * itemsPerPage,
69    take: itemsPerPage,
70  });
71  
72  // Get total result count
73  const totalCount = await prisma.product.count({ where });
74  
75  // Fetch aggregations for faceted filters
76  const aggregations = await Promise.all([
77    // Number of products in each category
78    prisma.category.findMany({
79      select: {
80        id: true,
81        name: true,
82        _count: {
83          select: {
84            products: {
85              where: { ...where, categoryId: undefined },
86            },
87          },
88        },
89      },
90      orderBy: {
91        name: 'asc',
92      },
93    }),
94    
95    // Available brands
96    prisma.product.groupBy({
97      by: ['brand'],
98      where: { ...where, brand: undefined },
99      _count: {
100        _all: true,
101      },
102      orderBy: {
103        brand: 'asc',
104      },
105    }),
106    
107    // Price range
108    prisma.product.aggregate({
109      where: { ...where, price: undefined },
110      _min: {
111        price: true,
112      },
113      _max: {
114        price: true,
115      },
116    }),
117  ]);
118  
119  const [categories, brands, priceRange] = aggregations;
120  
121  return (
122    <div className="container mx-auto py-8 px-4">
123      <h1 className="text-3xl font-bold mb-6">Products</h1>
124      
125      <div className="flex flex-col md:flex-row gap-8">
126        {/* Filter bar */}
127        <div className="w-full md:w-1/4">
128          <FacetFilters
129            categories={categories}
130            brands={brands.filter(b => b.brand)}
131            priceRange={priceRange}
132            currentFilters={searchParams}
133          />
134        </div>
135        
136        {/* Results */}
137        <div className="w-full md:w-3/4">
138          {/* Sorting bar */}
139          <div className="flex justify-between items-center mb-4">
140            <p>{totalCount} products found</p>
141            <SortSelect 
142              currentSort={sortBy}
143              query={searchParams}
144            />
145          </div>
146          
147          {/* Product list */}
148          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
149            {products.map(product => (
150              <ProductCard key={product.id} product={product} />
151            ))}
152          </div>
153          
154          {/* Pagination */}
155          <Pagination 
156            currentPage={page} 
157            totalPages={Math.ceil(totalCount / itemsPerPage)}
158            searchParams={searchParams}
159          />
160        </div>
161      </div>
162    </div>
163  );
164}
165
166// Implementation of FacetFilters and SortSelect components
167//

5. Utilizing Full-Text Search Indexes

For more advanced search scenarios, it's worth utilizing full-text indexes offered by databases like PostgreSQL:

1// Adding a migration creating a full-text index in Prisma
2
3// prisma/migrations/YYYYMMDDHHMMSS_add_full_text_search/migration.sql
4-- Create a GIN index for full-text search in PostgreSQL
5CREATE EXTENSION IF NOT EXISTS pg_trgm;
6
7ALTER TABLE "Product" ADD COLUMN "tsv" TSVECTOR 
8  GENERATED ALWAYS AS (
9    setweight(to_tsvector('english', coalesce(name, '')), 'A') || 
10    setweight(to_tsvector('english', coalesce(description, '')), 'B')
11  ) STORED;
12
13CREATE INDEX product_tsv_idx ON "Product" USING GIN ("tsv");
14
15-- Create a function to search products
16CREATE OR REPLACE FUNCTION search_products(search_query TEXT)
17RETURNS TABLE (
18  id TEXT,
19  name TEXT,
20  description TEXT,
21  price DECIMAL,
22  rank REAL
23) AS $$
24BEGIN
25  RETURN QUERY
26  SELECT 
27    p.id,
28    p.name,
29    p.description,
30    p.price,
31    ts_rank(p.tsv, websearch_to_tsquery('english', search_query)) AS rank
32  FROM 
33    "Product" p
34  WHERE 
35    p.tsv @@ websearch_to_tsquery('english', search_query)
36  ORDER BY 
37    rank DESC;
38END;
39$$ LANGUAGE plpgsql;

Now we can use this function in our application:

1// app/search/page.tsx
2import { prisma } from '@/lib/prisma';
3import { ProductCard } from '@/components/ProductCard';
4
5export default async function SearchPage({
6  searchParams
7}: {
8  searchParams: { q?: string }
9}) {
10  const query = searchParams.q || '';
11  
12  if (!query) {
13    return (
14      <div className="container mx-auto py-8">
15        <h1 className="text-3xl font-bold mb-6">Search Products</h1>
16        <p>Enter a search term to find products.</p>
17      </div>
18    );
19  }
20  
21  // Using SQL for advanced search
22  const products = await prisma.$queryRaw`
23    SELECT * FROM search_products(${query})
24  `;
25  
26  return (
27    <div className="container mx-auto py-8">
28      <h1 className="text-3xl font-bold mb-6">Search Results</h1>
29      
30      <p className="mb-4">
31        {products.length} results for "{query}"
32      </p>
33      
34      {products.length > 0 ? (
35        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
36          {products.map(product => (
37            <ProductCard 
38              key={product.id} 
39              product={product} 
40              searchScore={product.rank}
41            />
42          ))}
43        </div>
44      ) : (
45        <p>No products found. Try a different search term.</p>
46      )}
47    </div>
48  );
49}

Client-Side Search Implementation

Client-side search is useful for smaller datasets or for filtering already fetched data.

1. Simple Search Using useState

1'use client';
2
3import { useState } from 'react';
4
5export default function ClientSearch({ initialProducts }) {
6  const [searchTerm, setSearchTerm] = useState('');
7  const [filteredProducts, setFilteredProducts] = useState(initialProducts);
8  
9  const handleSearch = (e) => {
10    const term = e.target.value;
11    setSearchTerm(term);
12    
13    if (!term) {
14      setFilteredProducts(initialProducts);
15      return;
16    }
17    
18    const lowerCaseTerm = term.toLowerCase();
19    const filtered = initialProducts.filter(product => 
20      product.name.toLowerCase().includes(lowerCaseTerm) ||
21      product.description.toLowerCase().includes(lowerCaseTerm)
22    );
23    
24    setFilteredProducts(filtered);
25  };
26  
27  return (
28    <div>
29      <div className="mb-4">
30        <input
31          type="search"
32          value={searchTerm}
33          onChange={handleSearch}
34          className="w-full p-2 border rounded"
35        />
36      </div>
37      
38      <p className="mb-2">
39        {filteredProducts.length} products found
40      </p>
41      
42      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
43        {filteredProducts.map(product => (
44          <div key={product.id} className="border p-4 rounded">
45            <h3 className="font-bold">{product.name}</h3>
46            <p>${product.price.toFixed(2)}</p>
47          </div>
48        ))}
49      </div>
50    </div>
51  );
52}

2. Multi-Filter Client-Side Search

1'use client';
2
3import { useState, useMemo } from 'react';
4
5export default function AdvancedClientSearch({ initialProducts, categories }) {
6  const [filters, setFilters] = useState({
7    searchTerm: '',
8    category: '',
9    minPrice: '',
10    maxPrice: '',
11  });
12  
13  // Memoize filtered results
14  const filteredProducts = useMemo(() => {
15    let results = [...initialProducts];
16    
17    // Filter by search term
18    if (filters.searchTerm) {
19      const term = filters.searchTerm.toLowerCase();
20      results = results.filter(
21        product =>
22          product.name.toLowerCase().includes(term) ||
23          product.description.toLowerCase().includes(term)
24      );
25    }
26    
27    // Filter by category
28    if (filters.category) {
29      results = results.filter(
30        product => product.categoryId === filters.category
31      );
32    }
33    
34    // Filter by minimum price
35    if (filters.minPrice) {
36      const min = parseFloat(filters.minPrice);
37      results = results.filter(product => product.price >= min);
38    }
39    
40    // Filter by maximum price
41    if (filters.maxPrice) {
42      const max = parseFloat(filters.maxPrice);
43      results = results.filter(product => product.price <= max);
44    }
45    
46    return results;
47  }, [initialProducts, filters]);
48  
49  // Function to update filters
50  const handleFilterChange = (e) => {
51    const { name, value } = e.target;
52    setFilters(prev => ({
53      ...prev,
54      [name]: value
55    }));
56  };
57  
58  // Function to reset filters
59  const resetFilters = () => {
60    setFilters({
61      searchTerm: '',
62      category: '',
63      minPrice: '',
64      maxPrice: '',
65    });
66  };
67  
68  return (
69    <div>
70      <div className="bg-gray-50 p-4 rounded-lg mb-6">
71        <h2 className="text-lg font-bold mb-4">Filter Products</h2>
72        
73        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
74          <div>
75            <label className="block mb-1">Search</label>
76            <input
77              type="search"
78              name="searchTerm"
79              value={filters.searchTerm}
80              onChange={handleFilterChange}
81              className="w-full p-2 border rounded"
82            />
83          </div>
84          
85          <div>
86            <label className="block mb-1">Category</label>
87            <select
88              name="category"
89              value={filters.category}
90              onChange={handleFilterChange}
91              className="w-full p-2 border rounded"
92            >
93              <option value="">All Categories</option>
94              {categories.map(category => (
95                <option key={category.id} value={category.id}>
96                  {category.name}
97                </option>
98              ))}
99            </select>
100          </div>
101          
102          <div>
103            <label className="block mb-1">Min Price</label>
104            <input
105              type="number"
106              name="minPrice"
107              value={filters.minPrice}
108              onChange={handleFilterChange}
109              min="0"
110              step="0.01"
111              className="w-full p-2 border rounded"
112            />
113          </div>
114          
115          <div>
116            <label className="block mb-1">Max Price</label>
117            <input
118              type="number"
119              name="maxPrice"
120              value={filters.maxPrice}
121              onChange={handleFilterChange}
122              min="0"
123              step="0.01"
124              className="w-full p-2 border rounded"
125            />
126          </div>
127        </div>
128        
129        <button
130          onClick={resetFilters}
131          className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
132        >
133          Reset Filters
134        </button>
135      </div>
136      
137      <p className="mb-4">
138        {filteredProducts.length} products found
139      </p>
140      
141      {filteredProducts.length > 0 ? (
142        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
143          {filteredProducts.map(product => (
144            <div key={product.id} className="border p-4 rounded">
145              <h3 className="font-bold">{product.name}</h3>
146              <p>${product.price.toFixed(2)}</p>
147              <p className="text-sm text-gray-600">
148                {product.category?.name}
149              </p>
150            </div>
151          ))}
152        </div>
153      ) : (
154        <p className="text-gray-500">
155          No products match your filters. Try adjusting your criteria.
156        </p>
157      )}
158    </div>
159  );
160}

3. Search with Suggestions (Autocomplete)

1'use client';
2
3import { useState, useEffect, useRef } from 'react';
4import { useRouter } from 'next/navigation';
5import { useDebounce } from '@/hooks/useDebounce';
6import { searchProducts } from '@/lib/api';
7
8export function SearchWithAutocomplete() {
9  const router = useRouter();
10  const [query, setQuery] = useState('');
11  const [suggestions, setSuggestions] = useState([]);
12  const [isLoading, setIsLoading] = useState(false);
13  const [showSuggestions, setShowSuggestions] = useState(false);
14  const debouncedQuery = useDebounce(query, 300);
15  const inputRef = useRef(null);
16  
17  // Fetch suggestions when query changes
18  useEffect(() => {
19    const fetchSuggestions = async () => {
20      if (!debouncedQuery || debouncedQuery.length < 2) {
21        setSuggestions([]);
22        return;
23      }
24      
25      setIsLoading(true);
26      try {
27        const results = await searchProducts(debouncedQuery, { limit: 5 });
28        setSuggestions(results);
29      } catch (error) {
30        console.error('Error fetching suggestions:', error);
31      } finally {
32        setIsLoading(false);
33      }
34    };
35    
36    fetchSuggestions();
37  }, [debouncedQuery]);
38  
39  // Handle click outside suggestions list
40  useEffect(() => {
41    const handleClickOutside = (event) => {
42      if (inputRef.current && !inputRef.current.contains(event.target)) {
43        setShowSuggestions(false);
44      }
45    };
46    
47    document.addEventListener('mousedown', handleClickOutside);
48    return () => {
49      document.removeEventListener('mousedown', handleClickOutside);
50    };
51  }, []);
52  
53  // Handle search
54  const handleSearch = (e) => {
55    e.preventDefault();
56    if (query) {
57      router.push(`/search?q=${encodeURIComponent(query)}`);
58      setShowSuggestions(false);
59    }
60  };
61  
62  return (
63    <div className="relative" ref={inputRef}>
64      <form onSubmit={handleSearch} className="flex">
65        <input
66          type="search"
67          value={query}
68          onChange={(e) => {
69            setQuery(e.target.value);
70            setShowSuggestions(true);
71          }}
72          onFocus={() => setShowSuggestions(!!suggestions.length)}
73          className="flex-grow p-2 border rounded-l"
74          aria-label="Search"
75        />
76        <button
77          type="submit"
78          className="px-4 py-2 bg-blue-500 text-white rounded-r hover:bg-blue-600"
79          aria-label="Search button"
80        >
81          Search
82        </button>
83      </form>
84      
85      {/* Loader */}
86      {isLoading && (
87        <div className="absolute right-12 top-3">
88          <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
89        </div>
90      )}
91      
92      {/* Sugestie */}
93      {showSuggestions && suggestions.length > 0 && (
94        <ul className="absolute z-10 w-full mt-1 bg-white border rounded shadow-lg max-h-60 overflow-auto">
95          {suggestions.map(product => (
96            <li
97              key={product.id}
98              className="p-2 hover:bg-gray-100 cursor-pointer"
99              onClick={() => {
100                router.push(`/products/${product.id}`);
101                setShowSuggestions(false);
102              }}
103            >
104              <div className="flex items-center">
105                {product.image && (
106                  <img
107                    src={product.image}
108                    alt={product.name}
109                    className="w-10 h-10 object-cover mr-2"
110                  />
111                )}
112                <div>
113                  <div className="font-medium">{product.name}</div>
114                  <div className="text-sm text-gray-600">
115                    ${product.price.toFixed(2)}
116                  </div>
117                </div>
118              </div>
119            </li>
120          ))}
121          <li className="p-2 text-center text-blue-500 hover:bg-gray-100 cursor-pointer">
122            <button
123              onClick={handleSearch}
124              className="w-full text-left"
125            >
126              See all results for "{query}"
127            </button>
128          </li>
129        </ul>
130      )}
131    </div>
132  );
133}
134
135// hooks/useDebounce.js
136import { useEffect, useState } from 'react';
137
138export function useDebounce(value, delay) {
139  const [debouncedValue, setDebouncedValue] = useState(value);
140  
141  useEffect(() => {
142    const handler = setTimeout(() => {
143      setDebouncedValue(value);
144    }, delay);
145    
146    return () => {
147      clearTimeout(handler);
148    };
149  }, [value, delay]);
150  
151  return debouncedValue;
152}
153
154// lib/api.js
155export async function searchProducts(query, options = {}) {
156  const { limit = 10 } = options;
157  
158  const response = await fetch(
159    `/api/search?q=${encodeURIComponent(query)}&limit=${limit}`
160  );
161  
162  if (!response.ok) {
163    throw new Error('Failed to fetch suggestions');
164  }
165  
166  return response.json();
167}
168
169// app/api/search/route.ts
170import { NextResponse } from 'next/server';
171import { prisma } from '@/lib/prisma';
172
173export async function GET(request: Request) {
174  const { searchParams } = new URL(request.url);
175  const query = searchParams.get('q');
176  const limit = Number(searchParams.get('limit') || '10');
177  
178  if (!query) {
179    return NextResponse.json([]);
180  }
181  
182  try {
183    const products = await prisma.product.findMany({
184      where: {
185        OR: [
186          { name: { contains: query, mode: 'insensitive' } },
187          { description: { contains: query, mode: 'insensitive' } },
188        ],
189      },
190      select: {
191        id: true,
192        name: true,
193        price: true,
194        image: true,
195      },
196      take: limit,
197    });
198    
199    return NextResponse.json(products);
200  } catch (error) {
201    console.error('Search API error:', error);
202    return NextResponse.json(
203      { error: 'Failed to perform search' },
204      { status: 500 }
205    );
206  }
207}

Advanced Search Techniques

1. Integration with Elasticsearch or Algolia

For very large datasets or advanced search features, it's worth considering integration with a dedicated search engine:

1// lib/search.js (Algolia integration)
2import algoliasearch from 'algoliasearch';
3
4const client = algoliasearch(
5  process.env.ALGOLIA_APP_ID,
6  process.env.ALGOLIA_API_KEY
7);
8const index = client.initIndex('products');
9
10export async function searchWithAlgolia(query, options = {}) {
11  const {
12    page = 0,
13    hitsPerPage = 20,
14    filters = '',
15  } = options;
16  
17  const { hits, nbHits, nbPages } = await index.search(query, {
18    page,
19    hitsPerPage,
20    filters,
21  });
22  
23  return {
24    results: hits,
25    totalHits: nbHits,
26    totalPages: nbPages,
27  };
28}
29
30// app/api/search/route.ts (with Algolia)
31import { NextResponse } from 'next/server';
32import { searchWithAlgolia } from '@/lib/search';
33
34export async function GET(request: Request) {
35  const { searchParams } = new URL(request.url);
36  const query = searchParams.get('q') || '';
37  const page = Number(searchParams.get('page') || '0');
38  const category = searchParams.get('category');
39  
40  try {
41    // Build Algolia filters
42    let filters = '';
43    if (category) {
44      filters = `categoryId:${category}`;
45    }
46    
47    const { results, totalHits, totalPages } = await searchWithAlgolia(
48      query,
49      {
50        page,
51        hitsPerPage: 20,
52        filters,
53      }
54    );
55    
56    return NextResponse.json({
57      results,
58      totalHits,
59      totalPages,
60      page,
61    });
62  } catch (error) {
63    console.error('Search API error:', error);
64    return NextResponse.json(
65      { error: 'Failed to perform search' },
66      { status: 500 }
67    );
68  }
69}