Pagination with post listing pages & server side rendering

Hi Prismic Team!

I have a blog that I'm building with NextJS using server side rendering. I have a blog homepage that lists the 30 most recent posts. I'd like to have pagination at the bottom of the page that allows the user to navigate backwards / forwards 20 posts listed on a page at a time.

I found another post that discusses this but it just navigates 1 post at a time (and its static not SSR) Nextjs static blog with pagination - using Prismic - #14 by Phil

The code you have for nextpost & prevpost make sense to me - just wondering how you would do that 20 posts at a time. Also wondering how to handle this displaying on a different page template. Something like etc?

Here's my current blog homepage code in a gist

import Prismic from 'prismic-javascript'
import { default as NextLink } from 'next/link'
import { linkResolver } from '../../prismic-configuration'
import { client } from '../../prismic-configuration'
import BlogHero from '../../components/BlogHero'
import Card from '../../components/Card'
import BlogFilter from '../../components/BlogFilter'
import Header from '../../components/Header'
import Navbar from '../../components/Navbar'
import Footer from '../../components/Footer'
import Pagination from '../../components/Pagination'

function Home( {posts, featuredPosts, prevPosts} ) {

	return (
				metaDesc="Learn from industry experts and customers in construction, energy, agriculture, and more.
Get product updates and news from the DroneDeploy team."
				metaKeywords="Drone Mapping Software, Drone Mapping App, UAV Mapping, Surveying Software"
			<Navbar />
			<BlogHero featuredPosts={featuredPosts} />
			<BlogFilter />
				<div className="container">
					<div className="row">
						{, index) => (
							<div className="col-lg-4 col-sm-12 col-xs-12 mb-4" key={index}>

					<div className="row">
						<div className="col-lg-12">
							<NextLink as={linkResolver(prevPosts)} href={linkResolver(prevPosts)}>
								<a>Previous Posts</a>
			<Footer />


export async function getServerSideProps({ res }) {

	const allPosts = await client.query(
  'document.type', 'blog_post'),
			Prismic.Predicates.not('my.blog_post.status', '9 - Promoted')
			orderings: '[my.blog_post.published desc]',
			pageSize : 20

	const posts = allPosts.results;

	const allFeaturedPosts = await client.query(
        ['document.type', 'blog_post'),'my.blog_post.status', '9 - Promoted')
			orderings: '[my.blog_post.published desc]',
			pageSize : 3

	const featuredPosts = allFeaturedPosts.results

	const prevPosts = (await client.query('document.type', 'blog_post'), 
		{ pageSize : 20 , 
		 	// get ID of last blog post on the page
			after : `${posts[posts.length -1].id}`, 
			orderings: '[ desc]'

	// Not sure I need this anymore 🔽
    res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate')

	return { props: { posts , featuredPosts, prevPosts} }

export default Home

Any pointers would be greatly appreciated!

A post was merged into an existing topic: Nextjs static blog with pagination - using Prismic