# Find the next and previous posts pagination

**URL:** <https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652>\
**Category:** Developing with Prismic\
**Tags:** nuxtjs\
**Created:** [June 3, 2020, 2:42pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652 "2020-06-03T14:42:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![c0nst4ntin](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/c0nst4ntin/32/5188_2.png) [@c0nst4ntin](https://community.prismic.io/u/c0nst4ntin)\
**Post date:** [June 3, 2020, 2:42pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/1 "2020-06-03T14:42:43Z")

</div>

Hello,

I am wondering if there is some way to query the previous and following (blog) post to the current one?

Best  
Constantin

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 3, 2020, 3:59pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/2 "2020-06-03T15:59:56Z")

</div>

Hey Constantin,

Welcome to the community!

I’ll be happy to help. Can you tell me if you are using the Rest API or GraphQL?

Thanks.

---

<div class="post-metadata">

**Author:** ![c0nst4ntin](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/c0nst4ntin/32/5188_2.png) [@c0nst4ntin](https://community.prismic.io/u/c0nst4ntin)\
**Post date:** [June 3, 2020, 4:51pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/3 "2020-06-03T16:51:27Z")

</div>

I am using the Rest API.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 4, 2020, 5:05pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/5 "2020-06-04T17:05:00Z")

</div>

I don’t have any examples just now. I’m going to work on one to give you tomorrow hopefully.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 8, 2020, 2:59pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/7 "2020-06-08T14:59:39Z")

</div>

Hey Constantin,

Sorry about the delay. I’ve got an example for you now.

So what you need to do is make 2 extra queries in your post, being that you’re using nuxt this won’t slow your project down.

For the first query for your ‘next’ article will be to [get all results on the post type](https://prismic.io/docs/vuejs/query-the-api/query-by-type), then [limit the result size to 1](https://prismic.io/docs/vuejs/query-the-api/pagination-for-results#1_0-pagesize), then you set [the query option ‘after’](https://prismic.io/docs/vuejs/query-the-api/query-options-reference#0_0-after) to get the only the next document.

The idea is that then you reverse order to get your ‘previous’ article. You do this [using the orderings option](https://prismic.io/docs/vuejs/query-the-api/query-options-reference#16_1-orderings).

Here’s what you’re 2 queries should look like:

```auto
const prevpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date desc]'})).results[0]

const nextpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date]'})).results[0]

```

You’ll then return the results to the template and pass them through the link resolver and use the Nuxt-link component like so:

```auto
<nuxt-link v-if="prevpost !== undefined" :to="$prismic.linkResolver(prevpost)">
  <p>Previous Post</p>
</nuxt-link>
<nuxt-link v-if="nextpost !== undefined" :to="$prismic.linkResolver(nextpost)">
  <p>Next Post</p>
</nuxt-link>

```

You can see it’s best to do a check to remove the link if there are no articles to link.

Here is my full example based off of our [sample nuxt blog](https://user-guides.prismic.io/en/articles/2802125-create-a-sample-blog-with-prismic-and-nuxt):

```auto
<template>
  <div>
    <div class="outer-container">
      <div class="back">
        <nuxt-link to="../">back to list</nuxt-link>
      </div>
      <!-- Template for page title -->
      <h1 class="blog-title">{{ $prismic.asText(document.title) }}</h1>
      <!-- Template for published date -->
      <p class="blog-post-meta"><span class="created-at">{{ formattedDate }}</span></p>
    </div>
    <!-- Slice Block Componenet tag -->
    <slices-block :slices="slices"/>
    <nuxt-link v-if="prevpost !== undefined" :to="$prismic.linkResolver(prevpost)">
      <p>Previous Post</p>
    </nuxt-link>
    <nuxt-link v-if="nextpost !== undefined" :to="$prismic.linkResolver(nextpost)">
      <p>Next Post</p>
    </nuxt-link>
  </div>
</template>

<script>
//Importing all the slices components
import SlicesBlock from '~/components/SlicesBlock.vue'

export default {
  name: 'post',
  components: {
    SlicesBlock
  },
  head () {
    return {
      title: 'Prismic Nuxt.js Blog'
    }
  },
  async asyncData({ $prismic, params, error }) {
    try{
      // Query to get post content
      const post = (await $prismic.api.getByUID('post', params.uid))

      const prevpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date desc]'})).results[0]

      const nextpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date]'})).results[0]

      // Returns data to be used in template
      return {
        document: post.data,
        slices: post.data.body,
        prevpost,
        nextpost,
        formattedDate: Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(post.data.date)),
      }
    } catch (e) {
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  }
}
</script>

```

Let me know if you have any questions.

Thanks.

---

<div class="post-metadata">

**Author:** ![c0nst4ntin](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/c0nst4ntin/32/5188_2.png) [@c0nst4ntin](https://community.prismic.io/u/c0nst4ntin)\
**Post date:** [June 8, 2020, 3:16pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/9 "2020-06-08T15:16:24Z")

</div>

Thank you very much! The ‘after’ query option was exactly what I was looking for.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [September 15, 2020, 4:46pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/10 "2020-09-15T16:46:11Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:37pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/11 "2021-12-09T17:37:04Z")

</div>



---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [March 31, 2023, 12:38pm UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/12 "2023-03-31T12:38:51Z")

</div>

2 posts were split to a new topic: [Next and Pre pagination](https://community.prismic.io/t/next-and-pre-pagination/12812)

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [July 3, 2023, 9:28am UTC](https://community.prismic.io/t/find-the-next-and-previous-posts-pagination/652/15 "2023-07-03T09:28:00Z")

</div>

A post was split to a new topic: [Different params options with Next.js query](https://community.prismic.io/t/different-params-options-with-next-js-query/13558)