feat: generate static params for posts to improve speed.

src/app/posts/[slug]/page.tsx

@@ -1,14 +1,19 @@
 import PostLayout from '@/components/layout/PostLayout';
-import { getPostData } from '@/services/content/posts';
+import { getAllPosts, getPostData } from '@/services/content/posts';
 import { PostData } from '@/types';
 
-interface PostPageProps {
-  params: Promise<{
-    slug: string;
-  }>;
+// build static params for all posts
+export async function generateStaticParams() {
+  const posts = await getAllPosts();
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
 }
 
-export default async function PostPage(props: PostPageProps) {
+// PostPage component that receives the params directly
+export default async function PostPage(props: {
+  params: Promise<{ slug: string }>;
+}) {
   const params = await props.params;
   const post: PostData = await getPostData(params.slug);
 

src/app/posts/page.tsx

@@ -1,15 +1,17 @@
 import PostListLayout from '@/components/layout/PostListLayout';
 import { getAllPosts } from '@/services/content/posts';
 import { PostData } from '@/types';
+import { Suspense } from 'react';
 
 export default async function PostsPage() {
   const posts: PostData[] = await getAllPosts();
 
   return (
     <div className='container mx-auto p-4'>
       <h1 className='mb-6 text-center text-4xl font-bold'>All Posts</h1>
-
-      <PostListLayout posts={posts} />
+      <Suspense fallback={<span>Loading...</span>}>
+        <PostListLayout posts={posts} />
+      </Suspense>
     </div>
   );
 }