Using default Astro's paginate for pages

astro.config.mjs

@@ -31,6 +31,6 @@ export default defineConfig({
     ],
   },
   redirects: {
-    "/blog": "/blog/page0",
+    "/blog": "/blog/page1",
   }
 });

src/pages/blog/page[page].astro

@@ -4,29 +4,22 @@ import ArticleCard from "../../components/ArticleCard.astro";
 
 import { getCollection } from "astro:content";
 
-export async function getStaticPaths() {
+export async function getStaticPaths({ paginate }) {
     const POSTS_ON_PAGE = 15;
 
-    const posts = (await getCollection('blog')).sort(
-        // sort by slug (which includes date), desc
+    const posts = (await getCollection('blog'))
+        .sort(  // sort by slug (which includes date), desc
             (a, b) => (a.slug < b.slug) ? 1 : -1
+        )
+        .map(  // convert to objects
+            p => { return { post: p } }
         );
-    const count = Math.ceil(posts.length / POSTS_ON_PAGE);
-    const paths = [];
 
-    for (let n = 0; n < count; n++) {
-        paths.push({
-            params: { n: n },
-            props: {
-                posts: posts.slice(n, n + POSTS_ON_PAGE + 1),
-            },
-        });
+    // use Astro's function
+    return paginate(posts, { pageSize: POSTS_ON_PAGE });
 }
 
-    return paths;
-}
-
-const posts: Array<any> = Astro.props.posts;
+const { page } = Astro.props;
 const description =
     "DarkCat09's blog. " +
     "Reading a QR code without a phone, " +
@@ -40,7 +33,7 @@ const description =
         <meta name="robots" content="noindex, follow" />
     </Fragment>
     <div id="articles">
-        {posts.map(post => <ArticleCard post={post} />)}
+        {page.data.map(({ post }) => <ArticleCard post={post} />)}
     </div>
 </BlogLayout>