Not Founds and 404s

src/app/image/[id]/not-found.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "❓Image Not Found",
+  description: "Sorry, this image cannot be found.",
+};
+
+const NotFoundPage = () => {
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center">
+      <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+      <p className="text-xl text-gray-600 mb-8">
+        Sorry, this image cannot be found.
+      </p>
+      <Link
+        href="/"
+        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
+      >
+        Go back home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/app/image/[id]/page.tsx

@@ -6,6 +6,7 @@ import CAISummary from "@/components/CAISummary";
 import { getManifestStore } from "@/services/manifest";
 import getImage from "@/utils/getImage";
 import getMetadata from "@/utils/getMetadata";
+import { notFound } from "next/navigation";
 
 interface Params {
   params: {
@@ -15,12 +16,18 @@ interface Params {
 
 export async function generateMetadata({ params }: Params): Promise<Metadata> {
   const image = await getImage(params.id);
+  if (!image) {
+    return notFound();
+  }
   const manifestStore = await getManifestStore(image.src, image.mimeType);
   return getMetadata(manifestStore, image.src);
 }
 
 export default async function Home({ params }: Params) {
   const image = await getImage(params.id);
+  if (!image) {
+    return notFound();
+  }
   const manifestStore = await getManifestStore(image.src, image.mimeType);
 
   return (

src/app/not-found.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Page Not Found",
+  description: "Sorry, this page cannot be found.",
+};
+
+const NotFoundPage = () => {
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center">
+      <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+      <p className="text-xl text-gray-600 mb-8">
+        Sorry, this page cannot be found.
+      </p>
+      <Link
+        href="/"
+        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
+      >
+        Go back home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/utils/getImage.ts

@@ -1,11 +1,13 @@
-import sampleImages from "@/constants/sampleImages";
+import sampleImages, { SampleImage } from "@/constants/sampleImages";
 
-export default async function getImage(id: string) {
+export default async function getImage(
+  id: string
+): Promise<SampleImage | undefined> {
   const numericId = Number(id) - 1;
 
-  if (isNaN(numericId) || numericId < 0) {
-    return sampleImages[0]; // fallback
+  if (isNaN(numericId) || numericId < 0 || numericId >= sampleImages.length) {
+    return undefined;
   }
 
-  return sampleImages[numericId % sampleImages.length];
+  return sampleImages[numericId];
 }