'Implementing Previous Post & Next Post in a Next.js Contentful Blog?

I've been looking for an answer to this all over. Most of the people I have asked have shown me pagination examples, but that's not what I want. Even the question asked on here didn't help either

I have a Next.js site and I am using GraphQL to get my posts. I have it set up so that the resulting URL for the detail page of a post is blog/[category]/[slug]/

I want to have a link to the Previous Post and Next Post at the end of the posts to facilitate better navigation through the blog.

Here are the queries I have for loading the detail page:

To get all the posts:

{
  articleCollection(order:publishedAt_DESC){
    total
    items{
      title
      slug
      excerpt
      publishedAt
      category{
        categorySlug
        title
      }
      series{
        title
      }
      body{json}
    }
  }
}

To get a post by the slug:

query getArticle($slug: String!) {
  articleCollection(where: {slug: $slug}) {
    items {
      title
      slug
      excerpt
      publishedAt
      category {
        categorySlug
        title
      }
      series {
        title
      }
      illustration {
        url
      }
      body {
        json
      }
    }
  }
}

Could anyone please direct me to what I have to do:

  1. How do I modify the queries I have?
  2. Will I need to make additional queries to achieve previous and next? If so, how would those look like?

I am completely stumped on this

Thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source