如何在 Next.js 中实现分页

一.介绍

分页功能可将大型数据集划分为可管理的块，从而帮助管理它们。您可以在 Next.js 的服务器端或客户端实现分页。这里有一份精简的入门指南。

1. 服务器端分页

1.1 创建 API 路由

设置 API 路由来处理分页。

// pages/api/posts.js
export default async function handler(req, res) {
  const { page = 1, limit = 10 } = req.query;

  // 模拟数据
  const posts = Array.from({ length: 100 }, (_, i) => ({ id: i + 1, title: `Post ${i + 1}` }));

  const startIndex = (page - 1)  limit;
  const paginatedPosts = posts.slice(startIndex, startIndex + limit);

  res.status(200).json({
    data: paginatedPosts,
    total: posts.length,
    page: parseInt(page),
    totalPages: Math.ceil(posts.length / limit),
  });
}

1.2 获取页面数据

使用 getServerSideProps 获取分页数据。

// pages/posts.js
import Link from 'next/link';

const PostsPage = ({ data, page, totalPages }) => (
  <div>
    <h1>Posts</h1>
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
    <div>
      {page > 1 && (
        <Link href={`/posts?page=${page - 1}`}>
          <a>Previous</a>
        </Link>
      )}
      {page < totalPages && (
        <Link href={`/posts?page=${page + 1}`}>
          <a>Next</a>
        </Link>
      )}
    </div>
  </div>
);

export async function getServerSideProps(context) {
  const { query } = context;
  const page = parseInt(query.page) || 1;
  const res = await fetch(`http://localhost:3000/api/posts?page=${page}`);
  const { data, totalPages } = await res.json();

  return { props: { data, page, totalPages } };
}

export default PostsPage;

2. 客户端分页

2.1 设置状态管理

使用状态来管理客户端的分页。

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

const Posts = ({ initialData, initialPage, totalPages }) => {
  const [posts, setPosts] = useState(initialData);
  const [page, setPage] = useState(initialPage);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`/api/posts?page=${page}`);
      const { data } = await res.json();
      setPosts(data);
    };
    fetchPosts();
  }, [page]);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <div>
        {page > 1 && (
          <button onClick={() => setPage(page - 1)}>Previous</button>
        )}
        {page < totalPages && (
          <button onClick={() => setPage(page + 1)}>Next</button>
        )}
      </div>
    </div>
  );
};

export default Posts;

2.2 使用组件

在页面中集成客户端分页组件。

// pages/posts.js
import Posts from '../components/Posts';

const PostsPage = ({ initialData, initialPage, totalPages }) => (
  <Posts
    initialData={initialData}
    initialPage={initialPage}
    totalPages={totalPages}
  />
);

export async function getServerSideProps(context) {
  const { query } = context;
  const page = parseInt(query.page) || 1;
  const res = await fetch(`http://localhost:3000/api/posts?page=${page}`);
  const { data, totalPages } = await res.json();

  return {
    props: {
      initialData: data,
      initialPage: page,
      totalPages,
    },
  };
}

export default PostsPage;

3.最佳实践

• 优化数据获取：仅加载必要的数据以避免性能问题。
• 用户体验：提供直观的导航和加载指示器。
• 错误处理：针对数据获取失败和边缘情况实现错误处理。

二.概括

Next.js 中的分页可以在服务器端或客户端处理。通过设置 API 路由并使用适当的数据获取技术，您可以有效地管理大型数据集并增强用户体验。遵循最佳实践，确保您的分页实现高效且用户友好。