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
Frames are connected by [`Button`](/reference/core/Button) targets, similar to how Next.js `Link` components work.
13
+
14
+
:::steps
15
+
16
+
### Create your frames app
16
17
17
-
const totalPages =5;
18
+
We create a new directory `./frames` with a `frames.ts` file to export our frames application from because it needs to be used from multiple routes.
19
+
20
+
```tsx [frames.ts]
21
+
import { createFrames } from"frames.js/next";
22
+
23
+
exportconst frames =createFrames({
24
+
basePath: "/frames",
25
+
});
26
+
```
18
27
19
-
const frames =createFrames({
20
-
basePath: "/examples/new-api/frames",
21
-
initialState: {
22
-
pageIndex: 0,
23
-
},
28
+
### Define your initial route
29
+
30
+
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.
31
+
32
+
#### Define the initial frame
33
+
34
+
Create a `./frames/route.tsx` file that contains your initial frame. This frame will include buttons to navigate to other frames.
35
+
36
+
```tsx [route.tsx]
37
+
/* eslint-disable react/jsx-key */
38
+
import { frames } from"./frames";
39
+
40
+
exportconst GET =frames(async () => {
41
+
return {
42
+
image: <divtw="flex">Welcome</div>
43
+
buttons: [
44
+
// With query params
45
+
<Buttonaction="post"target={{pathname: "/frames/route1", query: {foo: "bar"}}}>Go to route 1</Button>,
46
+
// Without query params
47
+
<Buttonaction="post"target="/frames/route2">Go to route 2</Button>,
In your `page.tsx` file, fetch the initial frame's metadata and include it alongside your existing page's metadata.
30
56
57
+
`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.
Create additional frames in the `./frames` directory.
85
+
86
+
#### Route 1
87
+
88
+
Create a directory `./frames/route1/route.tsx` with a `POST` handler that returns the frame content.
89
+
90
+
```tsx [route1.tsx]
91
+
import { frames } from"./frames";
92
+
93
+
exportconst POST =frames(async (ctx) => {
94
+
const foo =ctx.searchParams.foo;
95
+
96
+
return {
97
+
image: <divtw="flex">Route 1 foo: {foo}</div>, // foo: bar
40
98
buttons: [
41
-
<Button
42
-
action="post"
43
-
target={{
44
-
query: { pageIndex: (pageIndex-1) %totalPages },
45
-
}}
46
-
>
47
-
←
99
+
<Buttonaction="post"target="/frames/route2">
100
+
Go to route 2
48
101
</Button>,
49
-
<Button
50
-
action="post"
51
-
target={{
52
-
query: { pageIndex: (pageIndex+1) %totalPages },
53
-
}}
54
-
>
55
-
→
102
+
],
103
+
};
104
+
});
105
+
```
106
+
107
+
#### Route 2
108
+
109
+
Create a directory `./frames/route2/route.tsx` with a `POST` handler that returns the frame content.
110
+
111
+
```tsx [route2.tsx]
112
+
import { frames } from"./frames";
113
+
114
+
exportconst POST =frames(async () => {
115
+
return {
116
+
image: <divtw="flex">Route 2</div>,
117
+
buttons: [
118
+
<Buttonaction="post"target="/frames/route1">
119
+
Go to route 1
56
120
</Button>,
57
121
],
58
-
textInput: "Type something!",
59
122
};
60
123
});
124
+
```
125
+
126
+
### (Optional) Navigate back to the initial frame
127
+
128
+
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`
61
129
62
-
exportconst GET =handleRequest;
63
-
exportconst POST =handleRequest;
130
+
```tsx [route.tsx]
131
+
import { frames } from"./frames";
132
+
133
+
const frameHandler =frames(async () => {
134
+
return {
135
+
image: <divtw="flex">Welcome</div>
136
+
buttons: [
137
+
<Buttonaction="post"target="/frames/route1">Go to route 1</Button>,
138
+
<Buttonaction="post"target="/frames/route2">Go to route 2</Button>,
139
+
],
140
+
};
141
+
});
142
+
143
+
exportconst GET =frameHandler;
144
+
exportconst POST =frameHandler;
64
145
```
65
146
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.
147
+
You can then navigate back to the initial frame by linking to the initial route.
148
+
149
+
```tsx
150
+
<Buttonaction="post"target="/frames">
151
+
Go back
152
+
</Button>
153
+
```
68
154
69
-
{/*
70
-
TODO: Link to examples
71
-
*/}
155
+
:::
156
+
157
+
## Notes
158
+
159
+
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.
160
+
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