diff --git a/src/app/image/[id]/not-found.tsx b/src/app/image/[id]/not-found.tsx new file mode 100644 index 0000000..bcdcf88 --- /dev/null +++ b/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 ( +
+

404

+

+ Sorry, this image cannot be found. +

+ + Go back home + +
+ ); +}; + +export default NotFoundPage; diff --git a/src/app/image/[id]/page.tsx b/src/app/image/[id]/page.tsx index 2997d22..44ba9ce 100644 --- a/src/app/image/[id]/page.tsx +++ b/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 { 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 ( diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..d9c8c1a --- /dev/null +++ b/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 ( +
+

404

+

+ Sorry, this page cannot be found. +

+ + Go back home + +
+ ); +}; + +export default NotFoundPage; diff --git a/src/utils/getImage.ts b/src/utils/getImage.ts index 98b40f6..16d4409 100644 --- a/src/utils/getImage.ts +++ b/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 { 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]; }