[spaces] handle not found page

app/spaces/[id]/not-found.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h3 className="text-3xl">Oops Your Space was not found</h3>
+
+      <div className="flex flex-col gap-2 mt-4">
+        <p>
+          Go back to{' '}
+          <Link href="/spaces" className="underline">
+            Your Spaces
+          </Link>{' '}
+          or{' '}
+          <Link href="/" className="underline">
+            Home Page
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/spaces/[id]/page.tsx

@@ -1,3 +1,5 @@
+import { notFound } from 'next/navigation';
+
 import { prisma } from '@/lib/prisma';
 
 export default async function SingleSpace({
@@ -7,9 +9,13 @@ export default async function SingleSpace({
 }) {
   const space = await prisma.space.findUnique({ where: { id: params.id } });
 
-  return space ? (
+  if (!space) {
+    notFound();
+  }
+
+  return (
     <div>
       <h1>{space.name}</h1>
     </div>
-  ) : null;
+  );
 }