Astro: Adding Previous and Next Post Navigation Links to Blog
Most blogs include navigation links to move between entries, helping readers find previous or next posts easily. These links also improve SEO by enhancing internal linking. With Astro, you can add these navigation links using a component and layout approach, as shown below.
Create the Navigation Component
Begin by creating a new component file named BlogPostNavPrevNext.astro.
AstroProject/
└── src/
└── components/
└── BlogPostNavPrevNext.astro
Include the following code in BlogPostNavPrevNext.astro.
This generates links for the previous and next posts by finding the index of the current post in the collection. If the current post is the most recent, the next post link won’t be shown. If it’s the oldest, the previous post link won’t be shown.
In this example, the collection is named blog, and entries are shown from the /blog/ subdirectory. Adjust the code as needed. The indexes depend on any sorting or filtering applied to getCollection. Here, the collection is sorted in descending order by pubDate. If different sorting or filtering is used elsewhere, the order might change.
---
import { getCollection } from 'astro:content';
const posts = (await getCollection('blog'))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const currentPostIndex = posts.findIndex((post) => post.slug == Astro.params.slug);
const previousPost = currentPostIndex + 1 === posts.length ? undefined : posts[currentPostIndex + 1];
const nextPost = currentPostIndex === 0 ? undefined : posts[currentPostIndex - 1];
---
{
(previousPost || nextPost) && (
<nav>
{ previousPost && ( <p>Previous Post: <a href={`/blog/${previousPost.slug}/`}>{previousPost.data.title}</a></p> ) }
{ nextPost && ( <p>Next Post: <a href={`/blog/${nextPost.slug}/`}>{nextPost.data.title}</a></p> ) }
</nav>
)
}
Add the Component to a Layout
To use the component, import BlogPostNavPrevNext into the layout file that displays blog entries. In this example, <BlogPostNavPrevNext /> is placed after the main content to show the previous and next post links before the page footer.
---
import HeadMeta from '../components/HeadMeta.astro';
import Header from '../components/Header.astro';
import BlogPostNavPrevNext from '../components/BlogPostNavPrevNext.astro';
import Footer from '../components/Footer.astro';
const { title, description, pubDate, updatedDate } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<HeadMeta title={title} description={description} pubDate={pubDate} updatedDate={updatedDate} />
</head>
<body>
<Header />
<main>
<article>
<h1>{title}</h1>
<slot />
</article>
</main>
<BlogPostNavPrevNext />
<Footer />
</body>
</html>
Summary
To further enhance blog navigation and SEO in an Astro developed site, a simple component and layout approach is used to generate navigation links for the previous and next posts based on their index in a collection.