使用nextjs和typescript写一个web搜索过滤器

好的，下面是一个基于 Next.js 和 TypeScript 的简单搜索过滤器的示例代码：

首先，我们需要安装必要的依赖：

npm install next react react-dom typescript @types/react @types/node

然后在根目录下创建一个 `pages` 文件夹，在其中创建一个名为 `index.tsx` 的文件，作为我们的搜索页面：

import React, { useState } from 'react';

interface SearchResult {
  title: string;
  description: string;
}

const searchResults: SearchResult[] = [
  {
    title: 'Next.js',
    description: 'The React Framework for Production',
  },
  {
    title: 'TypeScript',
    description: 'Typed JavaScript at Any Scale.',
  },
  {
    title: 'React',
    description: 'A JavaScript library for building user interfaces.',
  },
];

const IndexPage: React.FC = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);

  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const filteredResults = searchResults.filter(
      (result) =>
        result.title.toLowerCase().includes(query.toLowerCase()) ||
        result.description.toLowerCase().includes(query.toLowerCase())
    );

    setResults(filteredResults);
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          placeholder="Search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {results.length > 0 ? (
        <ul>
          {results.map((result, index) => (
            <li key={index}>
              <h2>{result.title}</h2>
              <p>{result.description}</p>
            </li>
          ))}
        </ul>
      ) : (
        <p>No results found.</p>
      )}
    </div>
  );
};

export default IndexPage;

在上面的示例代码中，我们定义了一个 `SearchResult` 接口，它包含 `title` 和 `description` 两个属性。然后我们创建了一个包含几个示例搜索结果的数组 `searchResults`。

在组件的状态中，我们使用 `useState` 钩子定义了两个状态变量：`query` 和 `results`。`query` 存储用户的搜索查询，`results` 存储过滤后的搜索结果。

在 `handleSearch` 函数中，我们使用数组的 `filter` 方法来过滤搜索结果，并将过滤后的结果存储在 `results` 状态变量中。

最后，在组件的渲染中，我们使用一个表单和一个输入框来获取用户的搜索查询。当用户提交查询时，我们调用 `handleSearch` 函数来更新搜索结果列表的内容。如果没有搜索结果，则显示一个简单的文本消息。

希望这个示例代码能够帮助您开始编写自己的基于 Next.js 和 TypeScript 的搜索过滤器！