Fix OG image generation and update imports.

Author: ChrisAbdo

app/api/og/[name]/route.tsx renamed to app/snippet/[slug]/opengraph-image.tsx

@@ -1,18 +1,25 @@
+import { prisma } from "@/prisma/db";
 import { ImageResponse } from "next/og";
 
-// Route segment config
-export const runtime = "edge";
-
-export const alt = "Snippets";
+export const alt = "About Acme";
 export const size = {
   width: 1200,
   height: 630,
 };
 
 export const contentType = "image/png";
 
-export async function GET(request: any) {
-  const name = request.nextUrl.searchParams.get("name") || "Snippets";
+export default async function Image({ params }: { params: { slug: string } }) {
+  const post = await prisma.snippet.findUnique({
+    where: {
+      id: params.slug,
+    },
+    select: {
+      title: true,
+    },
+  });
+
+  const name = post?.title || "Manage your code snippets.";
   return new ImageResponse(
     (
       <div
@@ -72,7 +79,10 @@ export async function GET(request: any) {
         </div>
       </div>
     ),
+    // ImageResponse options
     {
+      // For convenience, we can re-use the exported opengraph-image
+      // size config to also set the ImageResponse's width and height.
       ...size,
     }
   );

app/snippet/[slug]/page.tsx

@@ -16,36 +16,6 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { CalendarIcon } from "@radix-ui/react-icons";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
-}) {
-  const post = await prisma.snippet.findUnique({
-    where: {
-      id: params.slug,
-    },
-    select: {
-      title: true,
-    },
-  });
-
-  const name = post?.title || "Manage your code snippets.";
-
-  return {
-    title: name,
-    openGraph: {
-      images: [`/api/og/${encodeURIComponent(name)}`],
-    },
-    twitter: {
-      title: name,
-      description: "View this code snippet on Snippets.",
-      card: "summary_large_image",
-      creator: "@abdo_eth",
-    },
-  };
-}
-
 export default async function Page({ params }: { params: { slug: string } }) {
   const session = await getServerSession(authOptions);
 

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/api/og/[name]/route.tsx"],
   "exclude": ["node_modules"]
 }