How to use Frame Analytics as a Frog Plugin on Next.js

There have been many different ways to build Frames on Farcaster, even though Frames are just over a month old, but none have shocked us like Frog. Frog (Frame Open Graph) is a Frame building kit created by wevm, the same team behind the wagmi and viem Ethereum libraries. One of the best features of Frog is the ability to add community plugins through Hono middleware, and that’s exactly what we’ve done with Pinata Frame Analytics. Right now, you can easily start using analytics in your Frog frames, and today we’ll show you how.

This tutorial will walk you through building a basic “ribbit counter” using Frog and analytics on Next.js, - let’s get started!

Setup

The first thing you’ll need is a free Pinata Account. Once you’re logged in, we’re going to need three things:

• ‍API Key JWT - You can get this by following these instructions, which includes visiting the Keys Page and creating a API Key. It should return an API Key, API Secret, and a JWT which is the one we want to use.
• Dedicated Gateway - Every Pinata Account includes a pre-generated Dedicated Gateway which you can find on the Gateways Tab, just make sure to copy the domain you see for your account (should look something like tomato-abundant-mule-738.mypinata.cloud).
• Farcaster Integration - You will of course need your Farcaster account which you can connect to your Pinata account with these instructions.

After you have your Pinata account requirements, we can start our project. Frog supports several different frameworks such as Vercel, Bun, and more. For this tutorial, we’ll use Next.js utilizing their scaffolding command:

npm init frog -- -t next

Once it’s complete, and you cd into the repo, run npm install, then make a new file called .env.local and add the following variables:

PINATA_JWT=
GATEWAY_URL=

For PINATA_JWT, you will want to paste the JWT you made earlier, and in the GATEWAY_URL you will want to paste the gateway domain just as it appears on your dashboard (e.g. tomato-abundant-mule-738.mypinata.cloud). With those saved, we also need to install the Pinata FDK with this command:

npm install pinata-fdk

Now we can run npm run dev and start building!

Building the Frame

If you used the Frog Next.js scaffolding, it will already have some boilerplate in the main file we’re going to edit app/api/[[...routes]]/route.ts. We’ll replace most of that boilerplate code soon, but for now, we’ll import and initial the pinata-fdk at the top.

/** @jsxImportSource frog/jsx */

import { Button, Frog } from "frog";
import { handle } from "frog/vercel";
import { PinataFDK } from "pinata-fdk"; // import fdk

// initialize
const pinataFdk = new PinataFDK({
  pinata_jwt: process.env.PINATA_JWT as string,
  pinata_gateway: process.env.GATEWAY_URL as string,
});

app/api/[[...routes]]/route.ts

This will use the variables inside .env.local to create an instance of our pinataFdk. Once you deploy this to Vercel, make sure you paste the contents of your .env.local file into the deployment environment variables so that it will work in production! Next, we’ll alter the boilerplate just a bit, as we’ll be adding some state that will keep track of our ribbits.

Deploying and Testing

To really see our analytics in action, you will want to deploy the project to Vercel, keeping in mind to include your .env.local file contents in the Environment Variables. Once you get your url, something like ribbit-counter.vercel.app, head over to the Warpcast Frame Validator which you can visit here. Paste in your frame domain, and make sure to include /api at the end. Now you can test in production and see your analytics counts go up!

That’s a wrap! If you want to view the example repo for this project you can find it here. Of course, this is only scratching the surface of what you could do with Frog and analytics, and we’ll continue to explore those options as time goes on. Follow our /pinata channel for more updates and other Farcaster tools and tutorials.

Happy pinning!