Server-side pagination is particularly beneficial for applications with vast amounts of data that cannot be fully loaded on the client side. By fetching only the required data based on page requests, we reduce load times and optimize resource usage. Next.js 15, with its updated server-side capabilities, allows us to implement robust and SEO-friendly pagination effortlessly.
We need a source of data to paginate through. This could be a database like MongoDB or a REST API. For simplicity, let’s assume we’re fetching paginated data from a MongoDB collection.
Creat action.js and write this function. /Article.js is Modul of MongoDb and connect.js is function to connect database
past this code in page.js
import BlogSection from "./component/BlogSection"; import { getPosts } from "./lib/action"; export default async function Home({ searchParams }) { const { page } = await searchParams; const currentPage = parseInt(page); const data = await getPosts(page); console.log(data); return ( <div className=""> <BlogSection data={data.posts} totalPages={data.totalPage} currentPage={currentPage} /> </div> ); }
import React from "react"; import Card from "./Card"; import ServerPagination from "./Pagination"; const BlogSection = async ({ data, currentPage, totalPages }) => { return ( <div className="bg-gray-100 md:px-10 px-4 font-[sans-serif]"> <div className="max-w-5xl max-lg:max-w-3xl max-sm:max-w-sm mx-auto"> <div className="flex justify-around items-center mb-8"> <h2 className="text-3xl font-extrabold text-gray-800 mt-4"> Latest Blog Posts </h2> </div> <div className="flex flex-wrap"> {data.map((post) => { return <Card key={post.id} post={post} />; })} </div> <ServerPagination totalPages={totalPages} currentPage={currentPage} /> </div> </div> ); }; export default BlogSection;
import React from "react"; import Link from "next/link"; import Image from "next/image"; const Card = ({ post }) => { return ( <div className="bg-white flex-grow-1 basis-52 rounded overflow-hidden w-96 ml-8 border border-yellow-600"> <Image src={post.image} alt="Blog Post 1" className="w-full h-44 object-cover" width={400} height={300} loading="lazy" quality={80} /> <div className="p-6"> <h3 className="text-lg font-bold text-gray-800 mb-3">{post.title}</h3> <Link href={`/blogs/${post.id}`} className="mt-4 inline-block px-4 py-2 rounded tracking-wider bg-orange-500 hover:bg-orange-600 text-white text-[13px]" > Read More </Link> </div> </div> ); }; export default Card;
import Link from "next/link"; import React from "react"; const ServerPagination = ({ totalPages, currentPage }) => { return ( <div aria-label="Page navigation" className="flex justify-center flex-wrap mt-16 mb-10" > <Link href={`/?page=${currentPage - 1}`} className={`${ currentPage === 1 ? "hidden" : "flex items-center justify-center dark:bg-dark dark:text-light px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700" }`} > Previous </Link> {Array.from({ length: totalPages }, (_, index) => ( <div key={index}> <Link href={`/?page=${index + 1}`} className={`flex items-center justify-center px-3 h-8 leading-tight border ${ currentPage === index + 1 ? "bg-blue-500 text-white" : "bg-white text-gray-500 border-gray-300 dark:bg-dark dark:text-light hover:bg-gray-100 hover:text-gray-700" }`} > {index + 1} </Link> </div> ))} <Link href={`/?page=${currentPage + 1}`} className={`${ totalPages === currentPage ? "hidden" : "flex items-center justify-center dark:bg-dark dark:text-light px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700" } `} > Next </Link> </div> ); }; export default ServerPagination;
By following these steps, you’ve set up a powerful and SEO-friendly pagination system in Next.js 15, optimized for server-side rendering. Pagination ensures that your application remains efficient and user-friendly while handling large datasets. The server-side approach used here provides pre-rendered, SEO-optimized content, boosting your site's visibility on search engines.