âŠ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:
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:
Then, get your Airstack API key and add it as an environment variable:
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:
Run Development Server
To start the development server, simply run one of the following command to run the dev
script:
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
:
Then, compile the project by running the following command:
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
.
Once deployed successfully, you can go to the Vercel Dashboard to have your Airstack API key added to your environment variables.
Key | Value |
---|---|
|
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
Last updated