It’s time to get your butt off the sidelines and into the BIG game!
Let’s #BUIDL something amazing together.
And let’s start right NOW!
TL;DR
Farcaster v2 Frames are an updated version of the Frames protocol, which allows full-fledged web apps to run inside the Warpcast (and any compatible with Farcaster protocol) client. The primary benefit is a direct connection to Farcaster “user context”, in a similar fashion to Facebook Apps (back in 2012). It’s this context (offering direct monitization opportunities), that makes Frames so attractive to builders than the standard web.
You Should Know! —
The following guide was created specifically for 1st-time builders. These are individuals whom are looking for an A to Z tutorial on getting started with a full Web Application Framework (in our case, that’s Astro).
If you would like an express guide to get a Frame up and running quickly, then check out Frameify-to-Orbiter for a quick & easy solution, that takes only a few minutes to deploy.
Provides access to the Farcaster network, which we need in order to perform authentication and customize our user experience.
Setting Up Your Workspace
By combining some React APIs, we can accurately manage “simple” states. With Next.js though, we can quickly find situations where we need to accommodate many other requirements. This guide is intended to be used as a primer for managing complex states in a Next.js app. These strategies should fit the vast majority of apps around with little to no adjustments.
In order to follow this tutorial you’ll want the following:
An account on Orbiter: sign up for a free account in less than a minute.
Provides many advanced tools and a rock-solid cloud infrastructure to: build, scale, and secure your Farcaster frames.
This guide is intended to be used as a primer for managing complex states in a Next.js app. Unfortunately, the framework is way too versatile for us to cover all possible use cases in this article. But these strategies should fit the vast majority of apps around with little to no adjustments. If you believe there is a relevant pattern to be considered, I look forward to seeing you in the comments section!
From beginner to expert in 3 hours
If you haven’t already completed the Builder 101 guide, then please head over there and come back when you’re done.
“Getting started as a builder was nerve-racking at first, but then things slowly started to make more sense, until a realized that my project was complete!”
Londynn Lee – Homemade Crypto
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.
Faucibus commodo massa rhoncus, volutpat.
Composable Your Frame
Concepts such as Composable Web and Jamstack continue to be popular in 2025 — or at least the principle of combining JavaScript, API, and (HTML) Markup for web development. Nowadays, the concept is oftentimes just known as Modern web development.
Handling notificationsrequires a back-end server to process and store the data.
Handling authenticationis a 2nd area that can often lead to confusion for new builders.
Events.Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
There are two (2) important tradeoffs that we need to be aware of when opting for these techniques:
#1into a set of individual files, named to match the subject of the screen.
#2Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
Making good consideration of those points will be important, in addition all good practices when dealing with state in a client-side React app remain useful on a Next.js app. The server layer may be able to offer a performance boost and this by itself may mitigate some computation issues. But it will also benefit from sticking to the common best practices when it comes to rendering performance on apps.
Final Summary
While we wrap up with these patterns, it is important to stress out a few caveats which may creep out on you if you are not mindful as you implement them. First, let us recapitulate what we have covered in this article:
Organize your screensinto individual groupings of related content.
Organize your Frame screensinto a set of individual files, named to match the subject of the respective content being displayed.
Deploy your frameto a professional hosting provider, like Orbiter or Netlify.
Making good consideration of those points will be important, in addition all good practices when dealing with state in a client-side React app remain useful on a Next.js app. The server layer may be able to offer a performance boost and this by itself may mitigate some computation issues. But it will also benefit from sticking to the common best practices when it comes to rendering performance on apps.
What Next?
While we wrap up with these patterns, it is important to stress out a few caveats which may creep out on you if you are not mindful as you implement them. First, let us recapitulate what we have covered in this article:
Organize your screensinto individual groupings of related content.
Organize your Frame screensinto a set of individual files, named to match the subject of the respective content being displayed.
Deploy your frameto a professional hosting provider, like Orbiter or Netlify.
Making good consideration of those points will be important, in addition all good practices when dealing with state in a client-side React app remain useful on a Next.js app. The server layer may be able to offer a performance boost and this by itself may mitigate some computation issues. But it will also benefit from sticking to the common best practices when it comes to rendering performance on apps.
