Launch Explorer API Studio

⏊Next.js

Learn how to quickly build your first Farcaster Frame using Airstack Frog Recipes in Next.js.

Automatic Installation

You can find the Airstack Frames Starter Code using Airstack Frog Recipes in our GitHub here.

To clone the repository, run the following command:

git clone https://github.com/Airstack-xyz/airstack-frames-nextjs-starter.git

If you would like to start from scratch, then follow the tutorials below.

Manual Installation

Pre-requisites

  • An Airstack account

  • An existing Next.js project

Step 1: Install Dependencies

To get started, simply install all the necessary dependencies:

npm install @airstack/frog

Then, get your Airstack API key and add it as an environment variable:

.env
AIRSTACK_API_KEY=YOUR_API_KEY

Step 2: Build Your 1st Frame

To create your 1st Farcaster Frame, create a new file under api folder and add the following code with a new Frog instance from @airstack/frog instantiated:

app/api/[[...routes]]/route.tsx
/** @jsxImportSource @airstack/frog/jsx */
import { Button, Frog } from "@airstack/frog";
import { handle } from "@airstack/frog/next";
import { devtools } from "@airstack/frog/dev";
import { serveStatic } from "@airstack/frog/serve-static";

// Instantiate new Frog instance with Airstack API key
export const app = new Frog({
  apiKey: process.env.AIRSTACK_API_KEY as string,
  basePath: "/api",
});

app.frame("/", async (c) => {
  const { status } = c;
  return c.res({
    image: (
      <div
        style={{
          color: "white",
          display: "flex",
          fontSize: 40,
        }}
      >
        {status === "initial" ? "Initial Frame" : "Response Frame"}
      </div>
    ),
    intents: [status === "initial" && <Button>Click Here</Button>],
  });
});

devtools(app, { serveStatic });
export const GET = handle(app);
export const POST = handle(app);

Run Development Server

To start the development server, simply run one of the following command to run the dev script: 

npm run dev

Then, go to http://localhost:3000/api/dev and you will be redirected to the Frog devtools as shown below:

đŸĨŗ Congratulations, you've just built your 1st Farcaster Frames using Airstack Frog Recipes!

Bonus: Deployment

To deploy, first add some of the following additional scripts to your package.json:

package.json
{
  "scripts": { 
    "deploy": "vercel --prod",
    "deploy:preview": "vercel",
  },
}

Then, compile the project by running the following command:

npm run build

If run successfully, you should have a new .vercel folder generated. With this you can deploy the compiled build into Vercel by running:

Before running the command, make sure that you have vercel CLI within your machine and have it connected to your account by running vercel auth.

npm run deploy

Once deployed successfully, you can go to the Vercel Dashboard to have your Airstack API key added to your environment variables.

KeyValue

AIRSTACK_API_KEY

Your Airstack API key

Then, access the live Farcaster Frame from a custom vercel link with the following format https://<FRAME_VERCEL_PROJECT>.vercel.app/api, which you can use to test with the Farcaster official validator.

đŸĨŗ Congratulations, you've just deployed your 1st Farcaster Frames built usng Airstack Frog Recipes into Vercel!

Next Steps

Now that you have your 1st Farcaster Frame running, learn more about how Frog works in here.

In addition, you can also check out all the Airstack features available in Airstack Frog Recipes to enrich your Farcaster Frames with various onchain data offered:

Developer Support

If you have any questions or need help regarding integrating onchain data to your Farcaster Frames using the Airstack Frog Recipe in Next.js, please join our Airstack's Telegram group.

More Resources

PreviousNode.jsNextFrames Validator 🆓

Last updated