www.pinata.cloud Open in urlscan Pro
52.17.119.105  Public Scan

Form analysis
0 forms found in the DOM

Text Content

back to Pinata

Blog Homepage

Reading Lists


Get started

Get started for free
Explore our plans
Blog Home
>
Tutorials
>
How to use Frame Analytics as a Frog Plugin on Next.js
How to use Frame Analytics as a Frog Plugin on Next.js
Tutorials


HOW TO USE FRAME ANALYTICS AS A FROG PLUGIN ON NEXT.JS

Steve Simkins
Head of Developer Relations

Published on 
Mar 6, 2024

11
Min read

Elevate your Next.js applications by incorporating Frog and Pinata Frame
Analytics for real-time, actionable insights into user interactions.

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:

Copynpm 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:

CopyPINATA_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:

Copynpm 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.

Copy/** @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!

Steve Simkins
Head of Developer Relations

Published on 
March 6, 2024
11
MIN READ

Share this post:
pinataCloud




Get started for free
Explore our plans




RECOMMENDED POSTS

Dive into more IPFS, Web3 and developer-focused articles.
How to Run IPFS on a Raspberry Pi
How To Add A Custom Domain To An IPFS Dedicated Gateway
IPFS as an Archival Solution For Farcaster
Features
IPFSDedicated Gateways
Product
Pricing plans
Status

Resources
Documentation

Pinata blog
FAQs
Discord

Company
AboutContact
Globally Scalable IPFS
Twitter

Join our Discord

Youtube

Linkedin
Copyright © 2023 Pinata | All Rights Reserved
Privacy Policy | Cookie Policy | Cookie Preferences | Terms & Conditions |
Acceptable Use | DMCA
Twitter

Join our Discord

Youtube

Linkedin