feat: neynar data in opengraph share image

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/create-farcaster-mini-app",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "type": "module",
   "private": false,
   "access": "public",

scripts/build.js

@@ -172,7 +172,7 @@ async function generateFarcasterMetadata(domain, fid, accountAddress, seedPhrase
       name: process.env.NEXT_PUBLIC_FRAME_NAME,
       iconUrl: `https://${domain}/icon.png`,
       homeUrl: `https://${domain}`,
-      imageUrl: `https://${domain}/opengraph-image`,
+      imageUrl: `https://${domain}/api/opengraph-image`,
       buttonTitle: process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT,
       splashImageUrl: `https://${domain}/splash.png`,
       splashBackgroundColor: "#f7f7f7",

scripts/deploy.js

@@ -83,7 +83,7 @@ async function generateFarcasterMetadata(domain, fid, accountAddress, seedPhrase
       name: process.env.NEXT_PUBLIC_FRAME_NAME?.trim(),
       iconUrl: `https://${trimmedDomain}/icon.png`,
       homeUrl: `https://${trimmedDomain}`,
-      imageUrl: `https://${trimmedDomain}/opengraph-image`,
+      imageUrl: `https://${trimmedDomain}/api/opengraph-image`,
       buttonTitle: process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT?.trim(),
       splashImageUrl: `https://${trimmedDomain}/splash.png`,
       splashBackgroundColor: "#f7f7f7",

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

@@ -0,0 +1,30 @@
+import { ImageResponse } from "next/og";
+import { NextRequest } from "next/server";
+import { getNeynarUser } from "~/lib/neynar";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const fid = searchParams.get('fid');
+
+  const user = await getNeynarUser(Number(fid));
+
+  return new ImageResponse(
+    (
+      <div tw="flex h-full w-full flex-col justify-center items-center relative bg-purple-600">
+        {user?.pfp_url && (
+          <div tw="flex w-96 h-96 rounded-full overflow-hidden mb-8 border-8 border-white">
+            <img src={user.pfp_url} alt="Profile" tw="w-full h-full object-cover" />
+          </div>
+        )}
+        <h1 tw="text-8xl text-white">{user?.display_name ? `Hello from ${user.display_name ?? user.username}!` : 'Hello!'}</h1>
+        <p tw="text-5xl mt-4 text-white opacity-80">Powered by Neynar 🪐</p>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 800,
+    }
+  );
+}

src/lib/constants.ts

@@ -1,8 +1,8 @@
-export const APP_URL = process.env.NEXT_PUBLIC_URL;
+export const APP_URL = process.env.NEXT_PUBLIC_URL!;
 export const APP_NAME = process.env.NEXT_PUBLIC_FRAME_NAME;
 export const APP_DESCRIPTION = process.env.NEXT_PUBLIC_FRAME_DESCRIPTION;
 export const APP_ICON_URL = `${APP_URL}/icon.png`;
-export const APP_OG_IMAGE_URL = `${APP_URL}/opengraph-image`;
+export const APP_OG_IMAGE_URL = `${APP_URL}/api/opengraph-image`;
 export const APP_SPLASH_URL = `${APP_URL}/splash.png`;
 export const APP_SPLASH_BACKGROUND_COLOR = "#f7f7f7";
 export const APP_BUTTON_TEXT = process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT;

src/lib/neynar.ts

@@ -1,4 +1,4 @@
-import { NeynarAPIClient, Configuration } from '@neynar/nodejs-sdk';
+import { NeynarAPIClient, Configuration, WebhookUserCreated } from '@neynar/nodejs-sdk';
 import { APP_URL } from './constants';
 
 let neynarClient: NeynarAPIClient | null = null;
@@ -18,6 +18,19 @@ export function getNeynarClient() {
   return neynarClient;
 }
 
+type User = WebhookUserCreated['data'];
+
+export async function getNeynarUser(fid: number): Promise<User | null> {
+  try {
+    const client = getNeynarClient();
+    const usersResponse = await client.fetchBulkUsers({ fids: [fid] });
+    return usersResponse.users[0];
+  } catch (error) {
+    console.error('Error getting Neynar user:', error);
+    return null;
+  }
+}
+
 type SendFrameNotificationResult =
   | {
       state: "error";