next.js 分页如何写

在 Next.js 中实现分页功能可以通过以下步骤进行：

1. 创建一个页面组件（例如 `pages/index.js`），用于显示分页数据。
2. 在页面组件中，使用 Next.js 提供的 `getServerSideProps` 方法来获取初始的分页数据。在这个方法中，您可以调用后端 API 或者读取数据库等方式获取数据。
3. 在页面组件中，使用状态管理（例如 React 的 `useState` 和 `useEffect`）来存储当前页数和总页数等信息。
4. 创建一个翻页组件（例如 `components/Pagination.js`），用于展示分页按钮和处理页码切换的逻辑。
5. 在页面组件中使用翻页组件，并将当前页数和总页数等信息作为 props 传递给翻页组件。
6. 在翻页组件中，添加点击事件处理函数，用于处理点击不同页码时的逻辑。您可以根据当前页数和总页数等信息来计算新的页码，并触发数据更新。
7. 在页面组件中，根据当前页数和分页数据来展示相应的内容。

下面是一个简单的示例代码：

**pages/index.js:**

import { useState, useEffect } from 'react';
import Pagination from '../components/Pagination';

export default function Home() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData(currentPage);
  }, [currentPage]);

  const fetchData = async (page) => {
    // 根据页码调用 API 或者读取数据库等方式获取数据
    // 更新总页数和当前页的数据
    // 示例代码：
    const response = await fetch(`https://example.com/api/data?page=${page}`);
    const { totalPages, data } = await response.json();
    setTotalPages(totalPages);
    setData(data);
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      {/* 显示数据 */}
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {/* 显示分页组件 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  );
}

**components/Pagination.js:**

import React from 'react';

export default function Pagination({ currentPage, totalPages, onPageChange }) {
  const handlePrevClick = () => {
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNextClick = () => {
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  };

  return (
    <div>
      <button onClick={handlePrevClick}>Previous</button>
      <span>{currentPage}</span> / <span>{totalPages}</span>
      <button onClick={handleNextClick}>Next</button>
    </div>
  );
}

以上代码仅为示例，您可以根据自己的需求进行修改和扩展。希望对您有所帮助！