Reference@makeswift/runtime

MakeswiftApiHandler

An API route for Makeswift that adds support for preview mode, on-demand revalidation, and other features that make Makeswift work seamlessly with your Next.js app.

Arguments

apiKey
stringRequired

The API key for the Makeswift site.

options
objectRequired

Options for site version and locale.

runtime
ReactRuntimeRequired

An instance of ReactRuntime

getFonts
() => FontFamily[]

This function is called when the builder requests the list of fonts available for the site. The function should return an array of FontFamily objects.

1type FontFamily {
2  family: string
3  variants: {
4    weight: string
5    style: "normal" | "italic"
6    src?: string
7  }[]
8}

The src field is used to preview the font in the builder. The src field can be either a relative or absolute URL. If the src field is omitted, the font is still selectable but uses a fallback font in the builder.

events
object
New in v0.23.12

An object containing event handlers for the Makeswift site.

Available events

events.onPublish
() => void | Promise<void>

If defined, this function is called when the site is published.

Error handling

Any errors thrown in the event handler will be logged and ignored.

Local development

Since onPublish is powered by Makeswift webhooks, it’s not possible to test them locally (e.g., localhost:3000) at this time. We have plans to enable this via tunneling by leveraging the Makeswift CLI but don’t have that ready just yet.

Examples

App Router

src/app/api/makeswift/[...makeswift]/route.ts
1import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
2import { strict } from "assert";
3
4import { runtime } from "../../../../makeswift/runtime";
5
6// make custom components' data available for introspection
7import "../../../../makeswift/components";
8
9strict(
10  process.env.MAKESWIFT_SITE_API_KEY,
11  "MAKESWIFT_SITE_API_KEY is required"
12);
13
14const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
15  runtime,
16});
17
18export { handler as GET, handler as POST, handler as OPTIONS };

Pages router

src/pages/api/makeswift/[...makeswift].ts
1import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
2import { strict } from "assert";
3
4import { runtime } from "../../../../makeswift/runtime";
5
6// make custom components' data available for introspection
7import "../../../../makeswift/components";
8
9strict(
10  process.env.MAKESWIFT_SITE_API_KEY,
11  "MAKESWIFT_SITE_API_KEY is required"
12);
13
14export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
15  runtime,
16});

Adding fonts

The following example adds Spline Sans and Spline Sans Mono Google Fonts to the site using next/font and adds them to the MakeswiftApiHandler.

For more information on adding fonts to your Next.js app, see our Adding Fonts guide.

We recommend using variable fonts as they reduce the number of font files requested.

1import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
2import { strict } from "assert";
3
4import { runtime } from "../../../../makeswift/runtime";
5
6strict(
7  process.env.MAKESWIFT_SITE_API_KEY,
8  "MAKESWIFT_SITE_API_KEY is required"
9);
10
11export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
12  runtime,
13  getFonts() {
14    return [
15      {
16        family: "Spline Sans",
17        variants: [
18          {
19            weight: "300",
20            style: "normal",
21          },
22          {
23            weight: "400",
24            style: "normal",
25          },
26          {
27            weight: "500",
28            style: "normal",
29          },
30        ],
31      },
32      {
33        family: "Spline Sans Mono",
34        variants: [
35          {
36            weight: "500",
37            style: "normal",
38          },
39        ],
40      },
41    ];
42  },
43});

Using onPublish event

src/app/api/makeswift/[...makeswift]/route.ts
1import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
2import { strict } from "assert";
3
4import { runtime } from "../../../../makeswift/runtime";
5
6strict(
7  process.env.MAKESWIFT_SITE_API_KEY,
8  "MAKESWIFT_SITE_API_KEY is required"
9);
10
11const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
12  runtime,
13  events: {
14    onPublish() {
15      console.log(`Published content`);
16    },
17  },
18});
19
20export { handler as GET, handler as POST, handler as OPTIONS };