You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The first frame is always fetched via a GET request and is typically included alongside existing OpenGraph data via the [`generateMetadata`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata) function in Next.js if you have an existing site.
In your `page.tsx` file, fetch the initial frame's metadata and include it alongside your existing page's metadata.
61
64
62
-
exportconst GET =handleRequest;
63
-
exportconst POST =handleRequest;
65
+
`fetchMetadata` is a helper function that fetches the metadata for a frame from the frames.js handler and formats it for use in the `generateMetadata` function.
66
+
67
+
```tsx [page.tsx]
68
+
import { fetchMetadata } from"frames.js/next";
69
+
70
+
exportasyncfunction generateMetadata() {
71
+
return {
72
+
title: "My Page",
73
+
// provide a full URL to your /frames endpoint
74
+
other: awaitfetchMetadata(
75
+
newURL(
76
+
"/frames",
77
+
process.env.VERCEL_URL
78
+
?`https://${process.env.VERCEL_URL}`
79
+
:"http://localhost:3000"
80
+
)
81
+
),
82
+
};
83
+
}
84
+
85
+
exportdefaultfunction Page() {
86
+
return <span>My existing page</span>;
87
+
}
64
88
```
65
89
66
-
The second way to navigate between frames is by defining a `Button` with `type`, `post`, with a `target` that points at another Frame.
67
-
This can be a Frame on the same domain, or a Frame on another website entirely. In order to link between Frames in the same project, you need to set up a frames.js handler on the `POST` route of the path defined in the target.
90
+
### Create the other routes
91
+
92
+
Create additional frames in the `./frames` directory.
93
+
94
+
#### Route 1
95
+
96
+
Create a directory `./frames/route1/route.tsx` with a `POST` handler that returns the frame content.
97
+
98
+
```tsx [route1.tsx]
99
+
/* eslint-disable react/jsx-key */
100
+
import { frames } from"../frames";
101
+
import { Button } from"frames.js/next";
102
+
103
+
exportconst POST =frames(async (ctx) => {
104
+
const foo =ctx.searchParams.foo;
105
+
106
+
return {
107
+
image: <divtw="flex">Route 1 foo: {foo}</div>, // foo: bar
108
+
buttons: [
109
+
<Buttonaction="post"target="/frames/route2">
110
+
Go to route 2
111
+
</Button>,
112
+
],
113
+
};
114
+
});
115
+
```
116
+
117
+
#### Route 2
118
+
119
+
Create a directory `./frames/route2/route.tsx` with a `POST` handler that returns the frame content.
120
+
121
+
```tsx [route2.tsx]
122
+
/* eslint-disable react/jsx-key */
123
+
import { frames } from"../frames";
124
+
import { Button } from"frames.js/next";
125
+
126
+
exportconst POST =frames(async () => {
127
+
return {
128
+
image: <divtw="flex">Route 2</div>,
129
+
buttons: [
130
+
<Buttonaction="post"target="/frames/route1">
131
+
Go to route 1
132
+
</Button>,
133
+
],
134
+
};
135
+
});
136
+
```
137
+
138
+
### (Optional) Navigate back to the initial frame
68
139
69
-
{/*
70
-
TODO: Link to examples
71
-
*/}
140
+
If you want to navigate back to the initial frame you need to export a `POST` handler for the initial route. You may want to refactor the initial frame handler into a `frameHandler` variable that is exported as both `GET` and `POST`
141
+
142
+
```tsx [route.tsx]
143
+
import { frames } from"./frames";
144
+
145
+
const frameHandler =frames(async () => {
146
+
return {
147
+
image: <divtw="flex">Welcome</div>
148
+
buttons: [
149
+
<Buttonaction="post"target="/frames/route1">Go to route 1</Button>,
150
+
<Buttonaction="post"target="/frames/route2">Go to route 2</Button>,
151
+
],
152
+
};
153
+
});
154
+
155
+
exportconst GET =frameHandler;
156
+
exportconst POST =frameHandler;
157
+
```
158
+
159
+
You can then navigate back to the initial frame by linking to the initial route.
160
+
161
+
```tsx
162
+
<Buttonaction="post"target="/frames">
163
+
Go back
164
+
</Button>
165
+
```
166
+
167
+
:::
168
+
169
+
## Notes
170
+
171
+
The second way to navigate between frames is by defining a [`Button`](/reference/core/Button) with `type`, `post`, with a `target` that points at another Frame.
172
+
This can be a Frame on the same domain, or a Frame on another website entirely. In order to link between Frames in the same project, you need to set up a frames.js handler on the `POST` route of the path defined in the target.
0 commit comments