如何在 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 }) => (<PostsinitialData={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;