Nextjs static blog with pagination - using Prismic

Developing with Prismic
15

Sure thing...

I created a new page at /pages/blog-articles/[page].js with the following getStaticPaths and getStaticProps

export async function getStaticPaths({ preview = null, previewData = {}}) {
  const { ref } = previewData
  const client = Client()
  const posts = await client.query(
    Prismic.Predicates.at("document.type", "post"), {
      orderings: "[my.post.date desc],", page: 1, pageSize: 6,
      ...(ref ? { ref } : null)
    },
  )

  return {
    paths: Array.from(Array(posts.total_pages).keys())
      .map(x => ({ params: { page: `${x + 1}`, total_pages: posts.total_pages } })),
    fallback: true,
  }
}

// Fetch content from prismic
export async function getStaticProps({ preview = null, previewData = {} }) {
  const { ref } = previewData
  const client = Client()
  const doc = await client.getByUID('page', 'blog-articles', ref ? { ref } : null) || {}

  let posts
  let results = []
  let page = 1
  do{
    posts = await client.query(
      Prismic.Predicates.at("document.type", "post"), {
        pageSize : 100, page : page,
        orderings: '[document.first_publication_date desc]',
        ...(ref ? { ref } : null)
      },
    )
    results.push(...posts?.results)
    page++
  } while(page <= posts.total_pages)

  return {
    props: {
      ...doc,
      slices: doc ? doc.data['body'] : [],
      posts: results,
      preview
    }
  }
}

My blog-articles page is of type "page" and uses slice machine for content above the listing (it would actually be really useful to be able to have multiple slice-zones tbh - if you take feedback here).

I use react-paginate to generate the pagination when there's more than one page.

1 Like