Next.js에서 웹 사이트 검색 및 필터링 구현

18 Oct 2023

nextjs

많은 웹 사이트에서는 사용자가 원하는 정보를 검색하고 해당 정보를 필터링하여 결과를 선별하는 기능을 제공합니다. Next.js는 이러한 검색 및 필터링 기능을 구현하기 위한 강력한 도구를 제공합니다.

검색 기능 구현하기

검색 기능을 구현하기 위해서는 먼저 Next.js의 API Routes를 사용하여 검색어를 처리하는 엔드포인트를 만들어야 합니다. 이를 위해 다음과 같이 pages/api/search.js 파일을 생성합니다.

// pages/api/search.js

export default function handler(req, res) {
  const searchTerm = req.query.q;
  
  // 검색어에 따른 필요한 로직을 구현합니다.
  // 예를 들어 DB에서 검색 결과를 가져오거나 외부 API를 호출할 수 있습니다.
  
  res.status(200).json({ results: [] });
}

위의 예제는 간단한 검색 엔드포인트를 생성한 것으로, searchTerm에는 검색어가 담겨 옵니다. 이후에는 해당 검색어를 기반으로 필요한 로직을 구현하면 됩니다. 이 예제에서는 빈 배열을 결과로 반환하고 있습니다.

이제 검색 기능을 사용할 페이지에서는 사용자가 검색어를 입력하면 API를 호출하여 결과를 가져올 수 있습니다. 예를 들어, 검색 폼이 있는 pages/search.js 페이지를 만들어 보겠습니다.

// pages/search.js
import { useState } from 'react';

export default function SearchPage() {
  const [searchResults, setSearchResults] = useState([]);
  
  const handleSearch = async (e) => {
    e.preventDefault();
    
    const searchTerm = e.target.search.value;
    const response = await fetch(`/api/search?q=${searchTerm}`);
    const data = await response.json();
    
    setSearchResults(data.results);
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input type="text" name="search" />
        <button type="submit">Search</button>
      </form>
      
      {searchResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
}

위의 예제에서는 handleSearch 함수가 검색 폼의 제출 이벤트를 처리합니다. 이 함수에서는 API를 호출하여 검색 결과를 가져온 후, setSearchResults를 통해 결과를 상태로 업데이트합니다. 그리고 화면에는 검색 결과를 보여줍니다.

필터링 기능 구현하기

Next.js에서 필터링 기능을 구현하는 방법은 검색 기능과 매우 유사합니다. 필터링을 위한 엔드포인트를 만들고 필요한 로직을 구현한 후, 사용자 입력에 따라 해당 엔드포인트를 호출하면 됩니다. 필터링의 예제로 pages/api/filter.js 파일을 생성해보겠습니다.

// pages/api/filter.js

export default function handler(req, res) {
  const filterOptions = req.query.options;
  
  // 필터 옵션에 따른 검색 결과를 가져오는 로직을 구현합니다.
  
  res.status(200).json({ results: [] });
}

위의 예제에서는 filterOptions에 필터 옵션이 담겨 옵니다. 이후에는 해당 옵션을 기반으로 필요한 로직을 구현하면 됩니다. 이 예제에서는 빈 배열을 결과로 반환하고 있습니다.

필터링 기능을 사용할 페이지에서는 사용자가 필터 옵션을 선택하면 API를 호출하여 결과를 가져올 수 있습니다. 예를 들어, 필터 옵션을 선택할 수 있는 pages/filter.js 페이지를 만들어 보겠습니다.

// pages/filter.js
import { useState } from 'react';

export default function FilterPage() {
  const [filterResults, setFilterResults] = useState([]);
  
  const handleFilter = async (e) => {
    e.preventDefault();
    
    const selectedOptions = Array.from(e.target.options)
      .filter((option) => option.selected)
      .map((option) => option.value);
      
    const response = await fetch(`/api/filter?options=${selectedOptions.join(',')}`);
    const data = await response.json();
    
    setFilterResults(data.results);
  };

  return (
    <div>
      <form onSubmit={handleFilter}>
        <select multiple name="options">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
        <button type="submit">Filter</button>
      </form>
      
      {filterResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
}

위의 예제에서는 handleFilter 함수가 필터 폼의 제출 이벤트를 처리합니다. 이 함수에서는 선택한 옵션을 가져와 API를 호출하여 결과를 가져온 후, setFilterResults를 통해 결과를 상태로 업데이트합니다. 그리고 화면에는 필터 결과를 보여줍니다.

결론

Next.js를 사용하여 웹 사이트 검색 및 필터링 기능을 구현하는 방법을 알아보았습니다. 검색 기능과 필터링 기능을 위한 엔드포인트를 생성하고 필요한 로직을 구현한 후, 해당 엔드포인트를 호출하여 사용자가 입력한 검색어나 필터 옵션에 따른 결과를 가져올 수 있습니다. 이를 통해 사용자들에게 더 나은 검색 및 필터링 경험을 제공할 수 있습니다.

#Next.js #웹사이트검색