Next.js App Router integration

Frames.js can be easily integrated with Next.js application that uses App Router.

Create Frames handler

Frames handler is responsible for rendering your Frames and also reacts to user interactions with buttons.

./app/frames/route.tsx

/* eslint-disable react/jsx-key */
import { createFrames, Button } from "frames.js/next";
 
const frames = createFrames({
  basePath: "/frames",
});
const handleRequest = frames(async () => {
  return {
    image: <span>Test</span>,
    buttons: [<Button action="post">Click me</Button>],
  };
});
 
export const GET = handleRequest;
export const POST = handleRequest;

Render initial frame on your existing page

In order to render the initial frame of your Frames app on some of your pages, you need to render frame metadata. That can be achieved using generateMetadata() API.

./app/page.tsx

import { fetchMetadata } from "frames.js/next";
 
export async function generateMetadata() {
  return {
    title: "My page",
    other: {
      // ...
      ...(await fetchMetadata(
        // provide full URL to your /frames endpoint
        new URL(
          "/frames",
          process.env.VERCEL_URL
            ? `https://${process.env.VERCEL_URL}`
            : "http://localhost:3000"
        )
      )),
    },
  };
}
 
export default function Page() {
  return <span>My existing page</span>;
}