Nextjs static blog with pagination - using Prismic

Developing with Prismic
19

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 mywebsite.com/blog/previous etc?

Here's my current blog homepage code in a gist https://gist.github.com/nikibrown/acee56673c7e6257bbb97482b87d4dd7


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 (
		<>
			<Header 
				pageTitle="Blog" 
				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"
				ogImg="https://www.dronedeploy.com/img/dronedeploy-logo-rendered-whitebg.png"
			/>
			<Navbar />
			<BlogHero featuredPosts={featuredPosts} />
			<BlogFilter />
			<main>
				<div className="container">
					<div className="row">
						{posts.map((post, index) => (
							<div className="col-lg-4 col-sm-12 col-xs-12 mb-4" key={index}>
								<Card 
									post={post} 
									preload="false"
									cardImg={post.data.thumbnail.url} 
									cardImgWidth={post.data.thumbnail.dimensions.width}
									cardImgHeight={post.data.thumbnail.dimensions.height} 
								/>
							</div>
						))}

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

	)
}


export async function getServerSideProps({ res }) {

	const allPosts = await client.query(
        [
            Prismic.Predicates.at('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(
        [
        	Prismic.Predicates.at('document.type', 'blog_post'),
        	Prismic.Predicates.at('my.blog_post.status', '9 - Promoted')
        ],
        { 
			orderings: '[my.blog_post.published desc]',
			pageSize : 3
		}
    )

	const featuredPosts = allFeaturedPosts.results

	const prevPosts = (await client.query(
		Prismic.Predicates.at('document.type', 'blog_post'), 
		{ pageSize : 20 , 
		 	// get ID of last blog post on the page
			after : `${posts[posts.length -1].id}`, 
			orderings: '[my.post.date 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!