.

src/components/post/post-container.tsx

@@ -1,5 +1,6 @@
 import getPosts from "~/lib/posts/fetch-posts";
 import { PostItem } from "./post-item";
+import { Post } from "~/lib/types";
 
 export async function PostContainer() {
     const posts = await getPosts();
@@ -14,7 +15,7 @@ export async function PostContainer() {
                 you can check them out below.
             </p>
             <div className="flex flex-col space-y-2">
-                {posts?.map((post) => <PostItem key={post.slug} {...post} />)}
+                {posts && posts.map((post) => <PostItem key={post!.slug} {...post as Post} />)}
             </div>
         </div>
     );

src/lib/posts/fetch-posts.ts

@@ -2,9 +2,8 @@ import matter from "gray-matter";
 import fs from "fs/promises";
 import path from "path";
 import type { Post } from "../types";
-import { unstable_cache as cache } from "next/cache";
 
-export const getPosts = cache(async (): Promise<Post[]> => {
+export const getPosts = async () => {
     const posts = await fs.readdir("./src/posts/");
 
     return Promise.all(
@@ -21,14 +20,21 @@ export const getPosts = cache(async (): Promise<Post[]> => {
                     return null;
                 }
 
-                return { ...data, body: content } as Post;
-            }) as Promise<Post>[],
+                return {
+                    title: data.title,
+                    slug: data.slug,
+                    date: data.date,
+                    description: data.description,
+                    views: data.views || null,
+                    body: content,
+                } as Post;
+            }),
     );
-});
+};
 
 export async function getPost(slug: string) {
     const posts = await getPosts();
-    return posts.find((post) => post!.slug === slug);
+    return posts.find((post) => post?.slug === slug);
 }
 
 export default getPosts;