Previous and Next Post using Next.js
James 'Dante' Midzi
Posted on May 10, 2022
I spent weeks trying to figure this out, I am not going to make you go through the same. Let's get straight into it...
The Problem
On a Next.js site with posts fetched via graphql, how would you implement Previous and Next POST. This would be on the detail view of a post.
The Solution
The solution below uses graphql and Contentful but can be modified to wherever you want to apply it.
const ARTICLE_QUERY = `
query {
articleCollection(order: publishedAt_DESC) {
items {
slug
title
excerpt
category {
title
categorySlug
}
series {
title
slug
}
body {
json
}
}
}
}
`;
async function fetchGraphQL(query) {
return fetch(
`https://graphql.contentful.com/content/v1/spaces/${process.env.SPACE_ID}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.CDA_TOKEN}`,
},
body: JSON.stringify({ query }),
}
)
.then((response) => response.json())
.catch((error) => console.error(error));
}
export async function getPostAndMorePosts(slug) {
const response = await fetchGraphQL(ARTICLE_QUERY);
const posts = response.data.articleCollection.items;
const currentPost = posts.find((post) => post.slug === slug);
const currentPostIndex = posts.findIndex((post) => post.slug === slug);
const prevPost = posts[currentPostIndex - 1] || posts[posts.length - 1];
const nextPost = posts[currentPostIndex + 1] || posts[0];
if (!currentPost) {
return {
post: false,
};
}
return {
post: currentPost,
morePosts: [prevPost, nextPost],
};
}
In the code above:
- We create the article query and make a function to perform our query -
fetchGraphQL
- We then export an async function
getPostAndMorePosts
that takesslug
as a parameter. In it, we usefetchGraphQL
to get all our posts as an array. - We use find to get the post with the slug that matches the passed slug parameter -
currentPost
- Using currentPost as an index, we get the post before and the post after - these become our previous post and next post respectively
- Lastly, return currentPost as post and morePosts as an array of the previous and next post.
in [slug].js
:
import getPostAndMorePosts from '../../lib/api'
export async function getStaticPaths() {
...
}
export async function getStaticProps({ params }) {
const data = await getPostAndMorePosts(params.slug);
return {
props: {
post: data?.post ?? null,
morePosts: data?.morePosts ?? null,
},
};
}
export default function Post({ post, morePosts }) {
...
}
In our dynamic page:
- We import
getPostAndMorePosts
- we will use it ingetStaticProps
after we pass theparams
fromgetStaticPaths
. - In
getStaticProps
, we passparams.slug
togetPostAndMorePosts
to get:- The current post data
- The previous and next post data
- Lastly, we pass this data to our component and render our data.
Here is the repo with the full implementation:
https://github.com/stefanjudis/jamstack-workshop/blob/main/lib/api.js
Conclusion
Thank you whitep4nth3r, Thank you to everyone who tried to help.
The full story of how we got here is coming in another article. It really puzzles me how there isn't a native solution for this. Gatsby has it, WordPress does as well. What happened here Next.js?
Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on Twitter, Polywork and LinkedIn)
Posted on May 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.