app/posts/[slug]/page.tsx

@@ -8,9 +8,7 @@ import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 
 interface PageProps {
-  params: {
-    slug: string;
-  };
+  params: Promise<{ slug: string }>;
 }
 
 export async function generateStaticParams() {
@@ -19,14 +17,16 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-  const postData = await getPostData(params.slug);
+  const { slug } = await params;
+  const postData = await getPostData(slug);
   return {
     title: `${postData.title} | Gabriel's Kaszewski Blog`,
   };
 }
 
 export default async function Post({ params }: PageProps) {
-  const postData: PostData = await getPostData(params.slug);
+  const { slug } = await params;
+  const postData: PostData = await getPostData(slug);
 
   return (
     <div className="mx-auto max-w-5xl">

lib/posts.ts

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 import readingTime from 'reading-time';
+import { notFound } from 'next/navigation';
 
 const postsDirectory = path.join(process.cwd(), 'posts');
 
@@ -90,6 +91,7 @@ export function getAllPostIds() {
 
 export async function getPostData(id: string): Promise<PostData> {
   const fullPath = path.join(postsDirectory, `${id}.mdx`);
+  if (!fs.existsSync(fullPath)) notFound();
   const fileContents = fs.readFileSync(fullPath, 'utf8');
   const matterResult = matter(fileContents);
   const stats = readingTime(matterResult.content);