feature: pagination

src/app/(home)/blog/page.tsx

@@ -3,21 +3,34 @@ import { fetchBlogPosts } from '@/fetch/blog'
 import { BlogExcerpt } from '@/components/BlogExcerpt/BlogExcerpt'
 import { Section } from '@/components/Section/Section'
 import { Container } from '@/components/Container/Container'
+import { NextPrevButtons } from '@/components/NextPrevButtons/NextPrevButtons'
 import { getPhoto } from '@/utils/dto/gallery'
 
 export const dynamic = 'force-dynamic'
 
-export default async function Page() {
-  const blogs = await fetchBlogPosts(false);
+const buildHref = (page: number): string =>
+  page > 1 ? `/blog?page=${page}` : '/blog'
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>
+}) {
+  const query = await searchParams
+
+  const parsedPage = parseInt(query.page ?? '1', 10)
+  const page = Number.isFinite(parsedPage) && parsedPage > 0 ? parsedPage : 1
+
+  const blogs = await fetchBlogPosts(false, page)
 
   return (
     <>
       <PageHeader
-        title={"Aktuelle Nachrichten"}
-        description={"Im Blog der Pfarrei finden Sie aktuelle Nachrichten und erfahren alles über das Gemeindeleben, kommende Veranstaltungen und besondere Gottesdienste."}
+        title={'Aktuelle Nachrichten'}
+        description={'Im Blog der Pfarrei finden Sie aktuelle Nachrichten und erfahren alles über das Gemeindeleben, kommende Veranstaltungen und besondere Gottesdienste.'}
       />
 
-      <Section padding={"small"}>
+      <Section padding={'small'}>
         <Container>
           {
             blogs?.docs.map(blog =>
@@ -31,6 +44,23 @@ export default async function Page() {
           }
         </Container>
       </Section>
+
+      {(blogs?.hasPrevPage || blogs?.hasNextPage) && (
+        <Section padding={'small'}>
+          <NextPrevButtons
+            prev={
+              blogs.hasPrevPage && blogs.prevPage
+                ? { href: buildHref(blogs.prevPage), text: 'Vorige Seite' }
+                : undefined
+            }
+            next={
+              blogs.hasNextPage && blogs.nextPage
+                ? { href: buildHref(blogs.nextPage), text: 'Nächste Seite' }
+                : undefined
+            }
+          />
+        </Section>
+      )}
     </>
   )
-}
+}

src/fetch/blog.ts

@@ -5,8 +5,9 @@ import config from '@/payload.config'
  * Fetches blog posts based on given criteria.
  *
  * @param {boolean} displayOnFrontpage - Indicates whether to display posts on the front page.
+ * @param {number} page - Page number for pagination.
  */
-export const fetchBlogPosts = async (displayOnFrontpage: boolean) => {
+export const fetchBlogPosts = async (displayOnFrontpage: boolean, page: number = 1) => {
   const today = new Date()
   today.setHours(23, 59)
 
@@ -69,6 +70,7 @@ export const fetchBlogPosts = async (displayOnFrontpage: boolean) => {
     },
     where: query,
     limit: 18,
+    page,
   })
 }