> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MakeswiftApiHandler

> An API route for Makeswift that adds support for [preview mode](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode), [on-demand revalidation](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation), and other features that make Makeswift work seamlessly with your Next.js app.

## Arguments

1. <ParamField query="apiKey" type="string" required>
     The API key for the Makeswift site.
   </ParamField>
2. <ParamField query="options" type="object" required>
     Options for site version and locale.

     <Expandable>
       <ParamField query="runtime" type="ReactRuntime" required>
         An instance of [ReactRuntime](/developer/reference/runtime/constructor)
       </ParamField>

       <ParamField query="getFonts" type="() => 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.

         ```ts theme={null}
         type FontFamily {
           family: string
           variants: {
             weight: string
             style: "normal" | "italic"
             src?: string
           }[]
         }
         ```

         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.
       </ParamField>

       <ParamField query="events" type="object">
         <Note>New in [v0.23.12](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.23.12)</Note>

         An object containing event handlers for the Makeswift site.

         ### Available events

         <ParamField query="events.onPublish" type="() => 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.
         </ParamField>
       </ParamField>
     </Expandable>
   </ParamField>

## Examples

### App Router

```tsx src/app/api/makeswift/[...makeswift]/route.ts theme={null}
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";

import { runtime } from "@/makeswift/runtime";

// make custom components' data available for introspection
import "@/makeswift/components";

strict(
  process.env.MAKESWIFT_SITE_API_KEY,
  "MAKESWIFT_SITE_API_KEY is required"
);

const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
  runtime,
});

export { handler as GET, handler as POST, handler as OPTIONS };
```

### Pages router

```ts src/pages/api/makeswift/[...makeswift].ts theme={null}
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";

import { runtime } from "@/makeswift/runtime";

// make custom components' data available for introspection
import "@/makeswift/components";

strict(
  process.env.MAKESWIFT_SITE_API_KEY,
  "MAKESWIFT_SITE_API_KEY is required"
);

export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
  runtime,
});
```

### 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](/developer/guides/how-to/add-custom-fonts) guide.

<Note>
  We recommend using variable fonts as they reduce the number of font files requested.
</Note>

<CodeGroup>
  ```ts pages/api/[...makeswift].ts theme={null}
  import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
  import { strict } from "assert";

  import { runtime } from "@/makeswift/runtime";

  strict(
    process.env.MAKESWIFT_SITE_API_KEY,
    "MAKESWIFT_SITE_API_KEY is required"
  );

  export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
    runtime,
    getFonts() {
      return [
        {
          family: "Spline Sans",
          variants: [
            {
              weight: "300",
              style: "normal",
            },
            {
              weight: "400",
              style: "normal",
            },
            {
              weight: "500",
              style: "normal",
            },
          ],
        },
        {
          family: "Spline Sans Mono",
          variants: [
            {
              weight: "500",
              style: "normal",
            },
          ],
        },
      ];
    },
  });
  ```

  ```tsx _app.tsx theme={null}
  import { AppProps } from "next/app";
  import { Spline_Sans, Spline_Sans_Mono } from "next/font/google";

  import clsx from "clsx";

  import "../styles/globals.css";

  const splineSans = Spline_Sans({
    subsets: ["latin"],
    variable: "--font-sans",
    fallback: [
      "system-ui",
      "-apple-system",
      "BlinkMacSystemFont",
      "Helvetica",
      "Arial",
      "sans-serif",
    ],
  });
  const splineSansMono = Spline_Sans_Mono({
    subsets: ["latin"],
    variable: "--font-mono",
    fallback: ["Courier New"],
  });

  function MyApp({ Component, pageProps }: AppProps) {
    return (
      <main className={clsx(splineSans.variable, splineSansMono.variable)}>
        <Component {...pageProps} />
      </main>
    );
  }

  export default MyApp;
  ```
</CodeGroup>

### Using `onPublish` event

<CodeGroup>
  ```ts src/app/api/makeswift/[...makeswift]/route.ts theme={null}
  import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
  import { strict } from "assert";

  import { runtime } from "@/makeswift/runtime";

  strict(
    process.env.MAKESWIFT_SITE_API_KEY,
    "MAKESWIFT_SITE_API_KEY is required"
  );

  const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
    runtime,
    events: {
      onPublish() {
        console.log(`Published content`);
      },
    },
  });

  export { handler as GET, handler as POST, handler as OPTIONS };
  ```
</CodeGroup>