Skip to content

Latest commit

 

History

History
272 lines (211 loc) · 6.74 KB

next.js.md

File metadata and controls

272 lines (211 loc) · 6.74 KB
description
Learn how to quickly build your first Farcaster Frame using Airstack Frog Recipes in Next.js.

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

{% tabs %} {% tab title="Git (HTTPS)" %}

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

{% endtab %}

{% tab title="Git (SSH)" %}

git clone [email protected]:Airstack-xyz/airstack-frames-nextjs-starter.git

{% endtab %}

{% tab title="GitHub CLI" %}

gh repo clone Airstack-xyz/airstack-frames-nextjs-starter

{% endtab %} {% endtabs %}

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:

{% tabs %} {% tab title="npm" %}

npm install @airstack/frog

{% endtab %}

{% tab title="yarn" %}

yarn add @airstack/frog

{% endtab %}

{% tab title="pnpm" %}

pnpm install @airstack/frog

{% endtab %}

{% tab title="bun" %}

bun install @airstack/frog

{% endtab %} {% endtabs %}

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

{% code title=".env" %}

AIRSTACK_API_KEY=YOUR_API_KEY

{% endcode %}

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:

{% tabs %} {% tab title="TypeScript" %} {% code title="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);

{% endcode %} {% endtab %} {% endtabs %}

Run Development Server

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

{% tabs %} {% tab title="npm" %}

npm run dev

{% endtab %}

{% tab title="yarn" %}

yarn dev

{% endtab %}

{% tab title="pnpm" %}

pnpm dev

{% endtab %}

{% tab title="bun" %}

bun run dev

{% endtab %} {% endtabs %}

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

Airstack Frog Devtools

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

{% code title="package.json" %}

{
  "scripts": { 
    "deploy": "vercel --prod",
    "deploy:preview": "vercel",
  },
}

{% endcode %}

Then, compile the project by running the following command:

{% tabs %} {% tab title="npm" %}

npm run build

{% endtab %}

{% tab title="yarn" %}

yarn build

{% endtab %}

{% tab title="pnpm" %}

pnpm build

{% endtab %}

{% tab title="bun" %}

bun run build

{% endtab %} {% endtabs %}

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

{% hint style="info" %} 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. {% endhint %}

{% tabs %} {% tab title="npm" %}

npm run deploy

{% endtab %}

{% tab title="yarn" %}

yarn deploy

{% endtab %}

{% tab title="pnpm" %}

pnpm deploy

{% endtab %}

{% tab title="bun" %}

bun run deploy

{% endtab %} {% endtabs %}

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

Key Value
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.

Testing Frames in Farcaster's Official Frames 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