Setup dynamic routing for generating memes

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

@@ -0,0 +1,57 @@
+import type { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = (await params).id
+
+  const product = {
+    title: 'Generated meme',
+    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
+    description: 'A funny meme',
+  }
+
+  return {
+    title: product.title,
+    metadataBase: new URL('https://memes.markto.market'),
+    openGraph: {
+       type: "website",
+       url: `https://memes.markto.market/memes/${id}`,
+       siteName: "Mark's meme market",
+       images: [{
+         url: product.imageUrl,
+       }, ],
+     }
+
+  }
+}
+
+export default async function MemePage({ params }: Props) {
+  const product = {
+    title: 'Generated meme',
+    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
+    description: 'A funny meme',
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="relative flex flex-col items-center">
+        <h1 className="text-4xl font-bold mb-8">{product.title}</h1>
+        <div className="relative w-full max-w-2xl aspect-square">
+          <img
+            src={product.imageUrl}
+            alt={product.title}
+            className="object-contain rounded-lg w-full h-full"
+          />
+        </div>
+        <p className="mt-4 text-lg text-gray-600">{product.description}</p>
+      </div>
+    </main>
+  );
+}