Make posts page dynamic route

src/app/(app)/page.tsx

@@ -2,14 +2,32 @@ import Link from 'next/link'
 import React from 'react'
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-
 import { getPayloadHMR } from '@payloadcms/next/utilities'
 import configPromise from '@payload-config'
 import PostList from '@/components/Blocks/PostList'
+import { PaginatedDocs } from 'payload/database'
+import { Post } from 'types/payload-types'
+import { COLLECTION_SLUG_POST } from '../(payload)/collections/config'
 
 interface Props {}
 
-const Page = (props: Props) => {
+export const dynamic = 'force-dynamic'
+
+async function getPosts() {
+  const payload = await getPayloadHMR({
+    config: configPromise,
+  })
+
+  const posts: PaginatedDocs<Post> = await payload.find({
+    collection: COLLECTION_SLUG_POST,
+  })
+
+  return posts
+}
+
+const Page = async (props: Props) => {
+  const posts = await getPosts()
+
   return (
     <>
       <h1 className="">Nextload</h1>
@@ -19,7 +37,7 @@ const Page = (props: Props) => {
         {`When you're ready to deploy the website on your own server, Nextload comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.`}
       </p>
       <section className="mt-4">
-        <PostList />
+        <PostList posts={posts.docs} />
       </section>
     </>
   )