add generatestaticparams

app/posts/page.tsx → app/blog/page.tsx

@@ -1,10 +1,11 @@
 
-import { getAllPosts } from "../../lib/api";
+import { getAllPosts, getPostSlugs, getPostBySlug } from "../../lib/api";
 import  PostPreview  from "../../components/postPreview";
 import PageTitle from "../../components/page-title";
 import styles from "./styles.module.css";
 
 export default function Posts() {
+
   const posts = getAllPosts(["title", "date", "excerpt", "slug"]);
 
   return (
@@ -13,11 +14,12 @@ export default function Posts() {
         <div className="container">
           <PageTitle>All Posts</PageTitle>
           <div className = {styles.posts}>
-            {posts.map((post) => (
+          {posts.map((post) => (
               <div>
-                <PostPreview post={post} />
+              <PostPreview post= { post } />
               </div>
-            ))}
+            ))
+          }
           </div>
         </div>
 
@@ -26,3 +28,4 @@ export default function Posts() {
     </div>
   );
 }
+

app/posts/[slug]/page.tsx

@@ -4,9 +4,18 @@ import styles from "./styles.module.css";
 import Image from "next-image-export-optimizer";
 import Link from "next/link";
 
-export default async function Page({ params }: { params: { slug: string } }) {
+export async function generateStaticParams() {
+  const posts = getPostSlugs();
+  return posts.map((post) => ({
+    slug: post,
+  }));
+}
+
+export default async function Page({ params }: { params: { slug: string }}) {
+
+  const { slug } = params;
 
-   const getPost = getPostBySlug(params.slug, ["title", "author", "content", "date"]);
+  const getPost = getPostBySlug(slug, ["title", "author", "content", "date"]);
 
   const content = await markdownToHtml(getPost["content"] || "");
 

components/navbar.tsx

@@ -15,7 +15,7 @@ const Navbar = () => {
     },
     {label: "Awards", to: "/awards"},
     { label: "Our Team", to: "/team" },
-    { label: "Build Blog", to: "/posts" },
+    { label: "Build Blog", to: "/blog" },
     { label: "Sponsors", to: "/sponsors" },
     { label: "Gallery", to: "/gallery" },
     { label: "Contact", to: "/contact" },

lib/api.ts

@@ -2,7 +2,8 @@ import * as fs from "fs";
 import { join } from "path";
 import matter from "gray-matter";
 
-const postsDirectory = join(process.cwd(), "_posts");
+const postsDirectory = "_posts";
+//join("process.cwd()", "_posts");
 
 export function getPostSlugs() {
   return fs.readdirSync(postsDirectory);