fix: dynamic share page

src/app/api/opengraph-image/route.tsx

@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const fid = searchParams.get('fid');
 
-  const user = await getNeynarUser(Number(fid));
+  const user = fid ? await getNeynarUser(Number(fid)) : null;
 
   return new ImageResponse(
     (

src/app/opengraph-image.tsx

@@ -1,24 +0,0 @@
-import { ImageResponse } from "next/og";
-import { APP_NAME } from "~/lib/constants";
-
-export const alt = APP_NAME;
-export const size = {
-  width: 600,
-  height: 400,
-};
-
-export const contentType = "image/png";
-
-// dynamically generated OG image for frame preview
-export default async function Image() {
-  return new ImageResponse(
-    (
-      <div tw="h-full w-full flex flex-col justify-center items-center relative bg-white">
-        <h1 tw="text-6xl">{alt}</h1>
-      </div>
-    ),
-    {
-      ...size,
-    }
-  );
-}

src/app/page.tsx

@@ -1,22 +1,7 @@
 import { Metadata } from "next";
 import App from "./app";
-import { APP_URL, APP_NAME, APP_DESCRIPTION, APP_OG_IMAGE_URL, APP_ICON_URL, APP_SPLASH_URL, APP_SPLASH_BACKGROUND_COLOR, APP_BUTTON_TEXT } from "~/lib/constants";
-
-const framePreviewMetadata = {
-  version: "next",
-  imageUrl: APP_OG_IMAGE_URL,
-  button: {
-    title: APP_BUTTON_TEXT,
-    action: {
-      type: "launch_frame",
-      name: APP_NAME,
-      url: APP_URL,
-      splashImageUrl: APP_SPLASH_URL,
-      iconUrl: APP_ICON_URL,
-      splashBackgroundColor: APP_SPLASH_BACKGROUND_COLOR,
-    },
-  },
-};
+import { APP_NAME, APP_DESCRIPTION, APP_OG_IMAGE_URL } from "~/lib/constants";
+import { getFrameEmbedMetadata } from "~/lib/utils";
 
 export const revalidate = 300;
 
@@ -26,9 +11,10 @@ export async function generateMetadata(): Promise<Metadata> {
     openGraph: {
       title: APP_NAME,
       description: APP_DESCRIPTION,
+      images: [APP_OG_IMAGE_URL],
     },
     other: {
-      "fc:frame": JSON.stringify(framePreviewMetadata),
+      "fc:frame": JSON.stringify(getFrameEmbedMetadata()),
     },
   };
 }

src/app/share/[fid]/page.tsx

@@ -0,0 +1,30 @@
+import { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { APP_URL, APP_NAME, APP_DESCRIPTION } from "~/lib/constants";
+import { getFrameEmbedMetadata } from "~/lib/utils";
+export const revalidate = 300;
+
+// This is an example of how to generate a dynamically generated share page based on fid:
+// Sharing this route e.g. exmaple.com/share/123 will generate a share page for fid 123,
+// with the image dynamically generated by the opengraph-image API route.
+export async function generateMetadata({ params }: { params: { fid: string } }): Promise<Metadata> {
+  const fid = params.fid;
+  const imageUrl = `${APP_URL}/api/opengraph-image?fid=${fid}`;
+
+  return {
+    title: `${APP_NAME} - Share`,
+    openGraph: {
+      title: APP_NAME,
+      description: APP_DESCRIPTION,
+      images: [imageUrl],
+    },
+    other: {
+      "fc:frame": JSON.stringify(getFrameEmbedMetadata(imageUrl)),
+    },
+  };
+}
+
+export default function SharePage() {
+  // redirect to home page
+  redirect("/");
+}