wild birch
Hello,
I decided to give Astro JS a try to rebuild my wife's blog website with.
I however can't seem to figure out how to create next / previous buttons (which include the next blog title etc).
I tried the following in [...slug].astro :
---
import { type CollectionEntry, getCollection } from "astro:content";
import BlogPost from "../../layouts/Blogpost.astro";
import { sortByDate } from "../../utils/sortByDate";
export async function getStaticPaths() {
const posts = await getCollection("blog");
const numberOfPosts = posts.length;
return posts.sort(sortByDate).map((post, i) => ({
params: { slug: post.slug },
props: {
post,
prevPost: i + 1 === numberOfPosts ? null : posts[i + 1],
nextPost: i === 0 ? null : posts[i - 1],
},
}));
}
type Props = CollectionEntry<"blog">;
const props = Astro.props;
const { Content } = await props.render();
export const prerender = true;
---
<BlogPost {...props.data}>
<Content />
</BlogPost>
I then run into a bunch of errors which is to be expected, however I have not found a way to solve these. I tried changing the bottom part to:
const { Content } = await props.post.render();
export const prerender = true;
---
<BlogPost {...props.post.data}>
<Content />
</BlogPost>
I'm hoping somebody here knows a way to fix this.
Edit: Astro 3.1
cerulean osprey
spring adder
