Example e2e

src/pages/hobby/[id].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection, render } from 'astro:content';
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+    const hobbies = await getCollection('hobbies');
+    return hobbies.map(hobby => ({
+        params: { id: hobby.id },
+        props: { post: hobby },
+    }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { hobby } = Astro.props;
+const { Content } = await render(hobby);
+
+---
+<h1>{hobby.id}</h1>
+<Content />