Next.js Pages Router integration

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

Create Frames handler

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

./pages/api/frames/index.tsx

/* eslint-disable react/jsx-key */
import { createFrames, Button } from "frames.js/next/pages-router/server";
 
const frames = createFrames({
  basePath: "/api/frames",
});
const handleRequest = frames(async () => {
  return {
    image: <span>Test</span>,
    buttons: [<Button action="post">Click me</Button>],
  };
});
 
export default 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 getServerSideProps() API in combination with fetchMetadata() function.

./pages/index.tsx

import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
import Head from "next/head";
import {
  fetchMetadata,
  metadataToMetaTags,
} from "frames.js/next/pages-router/client";
 
export const getServerSideProps = async function getServerSideProps() {
  return {
    props: {
      metadata: await fetchMetadata(
        new URL(
          "/api/frames",
          process.env.VERCEL_URL
            ? `https://${process.env.VERCEL_URL}`
            : "http://localhost:3000"
        )
      ),
    },
  };
} satisfies GetServerSideProps<{
  metadata: Awaited<ReturnType<typeof fetchMetadata>>;
}>;
 
export default function Page({
  metadata,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <>
      <Head>
        <title>Frames.js app</title>
        {metadataToMetaTags(metadata)}
      </Head>
    </>
  );
}