Make posts page dynamic route
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
tobias 2024-06-25 22:19:08 +02:00
parent 75827c3bc7
commit 1b5f02637c
3 changed files with 42 additions and 15 deletions

View File

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

View File

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

View File

@ -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({
config: configPromise,
})
const posts: PaginatedDocs<Post> = await payload.find({
collection: COLLECTION_SLUG_POST,
})
export default function PostList(props: Props) {
const PostList = ({ posts }: 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.docs.map(
{posts.length > 0 ? (
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