Next.js 独立开发教程（十一）：实现搜索与分页功能

 更多有关Next.js教程，请查阅

【目录】Next.js 独立开发系列教程-CSDN博客

有兴趣的可以蹲个后续，我会陆续发布一系列的文章。

这个Next.js的入门教程算是告一段落，接下来，会是分章节的Next.js要点讲解，以及基于Next.js拓展的文章，例如：SEO、社交化营销、商业化布局等等。

Anyway，我会以建设独立开发能力为目标，精选一些实用的技术和非技术的内容跟大家分享。

---

目录

  系列文章目录

前言

1. 功能概述

1.1 搜索

1.2 分页

2. 在 Next.js 中实现搜索和分页

2.1 基本数据结构

2.2 静态分页与搜索

2.3 动态分页与搜索

3. 搜索与分页的优化策略

3.1 性能优化

3.2 用户体验优化

4. 最佳实践

5. 总结

---

---

前言

在构建现代 Web 应用时，用户通常需要快速查找和浏览大量数据。为实现这一目标，搜索和分页是两个至关重要的功能。Next.js 提供了强大的工具，使开发者能够高效地实现这些功能，同时确保页面性能和用户体验的提升。

本文将深入探讨如何使用 Next.js 实现搜索与分页功能，包括关键的技术实现、优化策略以及最佳实践。

1. 功能概述

1.1 搜索

搜索功能允许用户输入关键词并快速筛选出与之匹配的结果。在 Next.js 中，搜索可以通过以下方式实现：

• 客户端搜索：在浏览器中过滤已经加载的数据。
• 服务端搜索：将搜索请求发送到服务器，由服务器处理查询并返回结果。

1.2 分页

分页功能将数据分块显示，避免一次性加载过多数据对页面性能造成影响。常见的分页类型包括：

• 静态分页：适合数据变化较少的场景，在构建时生成分页内容。
• 动态分页：适合数据频繁更新的场景，分页内容根据请求动态生成。

2. 在 Next.js 中实现搜索和分页

以下是一个具体示例，展示如何在 Next.js 中构建支持搜索和分页的功能。

2.1 基本数据结构

假设我们有一组数据需要展示：

const data = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
  { id: 4, name: "Diana" },
  { id: 5, name: "Eve" },
  // ...更多数据
];

2.2 静态分页与搜索

在静态分页中，所有数据在构建时生成，搜索和分页在客户端处理。

代码示例：

// pages/search-pagination.js
import { useState } from "react";

export default function SearchAndPagination({ data }) {
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 2;

  // 处理搜索过滤
  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 分页逻辑
  const totalPages = Math.ceil(filteredData.length / itemsPerPage);
  const paginatedData = filteredData.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div>