Make posts page dynamic route

next.config.mjs

@@ -11,6 +11,18 @@ const nextConfig = {
     PORT: process.env.PORT,
     HOSTNAME: process.env.HOSTNAME,
   },
+  // Disable minification & chunking for debugging
+  webpack(config, { dev }) {
+    const debug = true
+    config.optimization.minimize = debug
+    config.optimization.splitChunks = {
+      cacheGroups: {
+        default: debug,
+      },
+    }
+    config.optimization.runtimeChunk = debug
+    return config
+  },
 }
 
 export default withPayload(nextConfig)

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>
     </>
   )

src/components/Blocks/PostList.tsx

@@ -4,24 +4,19 @@ import { getPayloadHMR } from '@payloadcms/next/utilities'
 import configPromise from '@payload-config'
 import { PaginatedDocs } from 'payload/database'
 import { COLLECTION_SLUG_POST } from '@payload/collections/config'
+import { GetServerSideProps } from 'next'
 
-type Props = {}
+type Props = {
+  posts: Post[]
+}
 
-const payload = await getPayloadHMR({
+const PostList = ({ posts }: Props) => {
-  config: configPromise,
-})
-
-const posts: PaginatedDocs<Post> = await payload.find({
-  collection: COLLECTION_SLUG_POST,
-})
-
-export default function PostList(props: Props) {
   return (
     <div className="flex flex-col">
       <h2 className="text-secondary mb-4">Posts</h2>
       <div className="border-y-2 flex flex-col divide-y-2 border-secondary divide-secondary">
-        {posts.docs.length > 0 ? (
+        {posts.length > 0 ? (
-          posts.docs.map(
+          posts.map(
             (post, index) => typeof post === 'object' && <PostEntry key={index} post={post} />,
           )
         ) : (
@@ -31,3 +26,5 @@ export default function PostList(props: Props) {
     </div>
   )
 }
+
+export default PostList