feat: Add Next.js best practices improvements (#104)

* feat: Add Next.js best practices improvements

- Add not-found.tsx for (dashboard) and (public) route groups
- Add generateMetadata for public slug pages (SEO)
- Fix Zod v4 .errors -> .issues migration in slug-actions.ts
- Fix Zod v4 .errors -> .issues migration in welcome-stepper-action.ts

Partial work on #56

* ci: retrigger E2E tests

* perf: cache expensive queries in generateMetadata

Add React.cache() wrappers for resolveSlug, resolveOrgSlug,
getFeedbackLinkBySlug, and getUser to dedupe database calls
between generateMetadata and page render.

This should fix E2E test timeouts caused by double-fetching.

Author: engineering-props-to

apps/app/src/app/(dashboard)/not-found.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { Button } from "@propsto/ui/atoms/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@propsto/ui/atoms/card";
+import { FileQuestion } from "lucide-react";
+
+export default function DashboardNotFound(): React.ReactNode {
+  return (
+    <div className="flex flex-1 items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <FileQuestion className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <CardTitle>Page not found</CardTitle>
+        </CardHeader>
+        <CardContent className="text-center text-muted-foreground">
+          <p>
+            The page you&apos;re looking for doesn&apos;t exist or has been
+            moved.
+          </p>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <Button asChild>
+            <Link href="/">Go to Dashboard</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

apps/app/src/app/(public)/[...slug]/page.tsx

@@ -1,13 +1,23 @@
+import type { Metadata } from "next";
+import { cache } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { CheckCircle, Users } from "lucide-react";
-import { resolveSlug, resolveOrgSlug } from "@propsto/data/repos";
 import {
-  getFeedbackLinkBySlug,
+  resolveSlug as _resolveSlug,
+  resolveOrgSlug as _resolveOrgSlug,
+  getFeedbackLinkBySlug as _getFeedbackLinkBySlug,
   getGroupFeedbackLinkBySlug,
   getUserFeedbackLinks,
+  getUser as _getUser,
   getGroupForPublicPage,
 } from "@propsto/data/repos";
+
+// Cache expensive queries to dedupe between generateMetadata and page render
+const resolveSlug = cache(_resolveSlug);
+const resolveOrgSlug = cache(_resolveOrgSlug);
+const getFeedbackLinkBySlug = cache(_getFeedbackLinkBySlug);
+const getUser = cache(_getUser);
 import { Button } from "@propsto/ui/atoms/button";
 import {
   Card,
@@ -24,6 +34,83 @@ interface PublicPageProps {
   params: Promise<{ slug: string[] }>;
 }
 
+export async function generateMetadata({
+  params,
+}: PublicPageProps): Promise<Metadata> {
+  const { slug } = await params;
+
+  if (!slug || slug.length === 0) {
+    return { title: "Not Found" };
+  }
+
+  // Thank you page
+  if (slug[slug.length - 1] === "thanks") {
+    return {
+      title: "Thank You | props.to",
+      description: "Your feedback has been submitted successfully.",
+    };
+  }
+
+  // Profile page: /<username>
+  if (slug.length === 1) {
+    const slugResult = await resolveSlug(slug[0]);
+    if (slugResult.success && slugResult.data?.type === "user") {
+      const userResult = await getUser({ id: slugResult.data.userId });
+      if (userResult.success && userResult.data) {
+        const name = userResult.data.firstName ?? slug[0];
+        return {
+          title: `${name} | props.to`,
+          description: `Give feedback to ${name} on props.to`,
+        };
+      }
+    }
+    return { title: `${slug[0]} | props.to` };
+  }
+
+  // Feedback link: /<username>/<linkSlug> or /<orgSlug>/<username>
+  if (slug.length === 2) {
+    const slugResult = await resolveSlug(slug[0]);
+    if (slugResult.success && slugResult.data?.type === "user") {
+      const linkResult = await getFeedbackLinkBySlug(
+        slug[1],
+        slugResult.data.userId,
+        null,
+      );
+      if (linkResult.success && linkResult.data) {
+        const name = linkResult.data.user.firstName ?? slug[0];
+        return {
+          title: `${linkResult.data.name} - ${name} | props.to`,
+          description: `Give feedback to ${name}: ${linkResult.data.name}`,
+        };
+      }
+    }
+    return { title: `Feedback | props.to` };
+  }
+
+  // Org feedback link: /<orgSlug>/<username>/<linkSlug>
+  if (slug.length === 3) {
+    const orgUserResult = await resolveOrgSlug(slug[0], slug[1]);
+    if (orgUserResult.success && orgUserResult.data?.type === "user") {
+      const linkResult = await getFeedbackLinkBySlug(
+        slug[2],
+        orgUserResult.data.userId,
+        orgUserResult.data.organizationId,
+      );
+      if (linkResult.success && linkResult.data) {
+        const name = linkResult.data.user.firstName ?? slug[1];
+        const orgName = linkResult.data.organization?.name ?? slug[0];
+        return {
+          title: `${linkResult.data.name} - ${name} | ${orgName}`,
+          description: `Give feedback to ${name} via ${orgName}`,
+        };
+      }
+    }
+    return { title: `Feedback | props.to` };
+  }
+
+  return { title: "props.to" };
+}
+
 /**
  * Dynamic route handler for public feedback pages:
  * - /<username> - User profile page

apps/app/src/app/(public)/not-found.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { Button } from "@propsto/ui/atoms/button";
+import { FileQuestion } from "lucide-react";
+
+export default function PublicNotFound(): React.ReactNode {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center p-4 text-center">
+      <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+        <FileQuestion className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h1 className="mb-2 text-2xl font-bold tracking-tight">Page not found</h1>
+      <p className="mb-6 max-w-md text-muted-foreground">
+        The profile or feedback link you&apos;re looking for doesn&apos;t exist
+        or may have been removed.
+      </p>
+      <Button asChild>
+        <Link href="https://props.to">Go to props.to</Link>
+      </Button>
+    </div>
+  );
+}

apps/auth/src/server/welcome-stepper-action.ts

@@ -787,7 +787,7 @@ export async function sendPersonalEmailCodeHandler(
     if (!parsed.success) {
       return {
         success: false,
-        error: parsed.error.errors[0]?.message ?? "Invalid email",
+        error: parsed.error.issues[0]?.message ?? "Invalid email",
       };
     }