App Router

The fastest way to get started with Makeswift on a new Next.js project is to follow the quickstart guide. If you have an existing Next.js application or want to set things up yourself, continue with the rest of this guide.

System requirements

• Node.js 20.19 or a later version.
• macOS, Windows (including WSL), and Linux are supported.

If you don’t already have a Next.js project, head over to the Next.js documentation to get one set up. If you do have one, please verify you are using Next.js 13.4 or a later version that is using App Router.

This code in this guide assumes you are using a src directory and have the following path aliases configured.

1
{
2
  "compilerOptions": {
3
    "baseUrl": ".",
4
    "paths": {
5
      "@/*": ["src/*"]
6
    }
7
  }
8
}

If your setup varies from this, please adjust the code snippets appropriately.

Install dependencies

Install the @makeswift/runtime package. This package contains all of the necessary code to integrate Makeswift into your Next.js app.

$
npm install @makeswift/runtime

Add API key to environment variables

Requesting data through the Makeswift client requires a site API key from Makeswift. In the Makeswift builder, go to Settings > Host and copy the API key for the site.

Once the API key is in your clipboard, open your .env.local file and paste the snippet below.

1
MAKESWIFT_SITE_API_KEY=paste-your-api-key-here

Add Makeswift runtime

Create the Makeswift runtime file in src/makeswift.

1
import { ReactRuntime } from "@makeswift/runtime/react";
2
3
export const runtime = new ReactRuntime();

Add Makeswift client

Create the Makeswift client file in src/makeswift.

1
import { Makeswift } from "@makeswift/runtime/next";
2
import { strict } from "assert";
3
4
import { runtime } from "./runtime";
5
6
strict(
7
  process.env.MAKESWIFT_SITE_API_KEY,
8
  "MAKESWIFT_SITE_API_KEY is required"
9
);
10
11
export const client = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY, {
12
  runtime,
13
});

Add the Next.js plugin

Next.js plugins are configured in the project’s next.config.js file by wrapping nextConfig. The Makeswift Next.js plugin whitelists Makeswift image domains and sets up rewrites to enable draft mode in the Makeswift builder.

1
import createWithMakeswift from "@makeswift/runtime/next/plugin";
2
3
const withMakeswift = createWithMakeswift();
4
5
/** @type {import('next').NextConfig} */
6
const nextConfig = {
7
  // your existing next config
8
};
9
10
export default withMakeswift(nextConfig);

Register components with Makeswift

Create a file for registered components called src/makeswift/components.tsx. In this example, only one component is registered. However, as you register more components, we recommend creating separate files for each component and rolling up the imports in the src/makeswift/components.tsx file. Learn more about registering components.

1
import { runtime } from "../../../../makeswift/runtime";
2
import { Style } from "@makeswift/runtime/controls";
3
4
function HelloWorld({ className }: { className: string }) {
5
  return <p className={className}>Hello, world!</p>;
6
}
7
8
runtime.registerComponent(HelloWorld, {
9
  type: "hello-world",
10
  label: "Hello, world!",
11
  props: {
12
    className: Style(),
13
  },
14
});

To ensure these your components become available in Makeswift, this components.tsx file must be imported in three different places:

1. In the Makeswift Provider
2. In root layout file
3. In the Makeswift API Handler

You’ll do this in the next few steps.

Create Makeswift provider component

Create a client component for the Makeswift providers.

1
"use client";
2
3
import { runtime } from "../../../../makeswift/runtime";
4
import { type SiteVersion } from "@makeswift/runtime/next";
5
import {
6
  ReactRuntimeProvider,
7
  RootStyleRegistry,
8
} from "@makeswift/runtime/next";
9
import "../../../../makeswift/components";
10
11
export function MakeswiftProvider({
12
  children,
13
  siteVersion,
14
}: {
15
  children: React.ReactNode;
16
  siteVersion: SiteVersion | null;
17
}) {
18
  return (
19
    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
20
      <RootStyleRegistry>{children}</RootStyleRegistry>
21
    </ReactRuntimeProvider>
22
  );
23
}

Update the root layout

In your root layout, wrap your app with the MakeswiftProvider component created in the last step and import the registered components.

1
import type { Metadata } from "next";
2
import { draftMode } from "next/headers";
3
import { Inter } from "next/font/google";
4
import { getSiteVersion } from "@makeswift/runtime/next/server"
5
import { MakeswiftProvider } from "../../../../makeswift/provider";
6
import "../../../../makeswift/components";
7
import "./globals.css";
8
9
const inter = Inter({ subsets: ["latin"] });
10
11
export const metadata: Metadata = {
12
  title: "Create Next App",
13
  description: "Generated by create next app",
14
};
15
16
export default async function RootLayout({
17
  children,
18
}: Readonly<{
19
  children: React.ReactNode;
20
}>) {
21
  return (
22
    <html lang="en">
23
      <body className={inter.className}>
24
        <MakeswiftProvider siteVersion={await getSiteVersion()}>
25
          {children}
26
        </MakeswiftProvider>
27
      </body>
28
    </html>
29
  );
30
}

Add a route for Makeswift pages

Create an optional catch-all route named [[...path]]. This catch-all route will fetch page data from Makeswift and pass it to be rendered in the Page component.

1
import { getSiteVersion } from "@makeswift/runtime/next/server";
2
import { notFound } from "next/navigation";
3
import { Page as MakeswiftPage } from "@makeswift/runtime/next";
4
5
import { client } from "../../../../makeswift/client";
6
7
export async function generateStaticParams() {
8
  const pages = await client.getPages().toArray();
9
10
  return pages.map((page) => ({
11
    path: page.path.split("/").filter((segment) => segment !== ""),
12
  }));
13
}
14
15
export default async function Page({
16
  params,
17
}: {
18
  params: Promise<{ path?: string[] }>;
19
}) {
20
  const path = "/" + ((await params)?.path ?? []).join("/");
21
  const snapshot = await client.getPageSnapshot(path, {
22
    siteVersion: getSiteVersion(),
23
  });
24
25
  if (snapshot == null) return notFound();
26
27
  return <MakeswiftPage snapshot={snapshot} />;
28
}

Delete the root page component src/app/page.tsx file to ensure that all pages (including the home page) are managed by Makeswift.

Add the Makeswift API handler

Similar to NextAuth.js, Makeswift uses an API handler to communicate with your Next.js app. Create the file src/app/api/makeswift/[...makeswift]/route.ts.

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

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

Start the local dev server

Run the local development script. This will start the Next.js app at http://localhost:3000.

$
npm run dev

If port 3000 is already in use, Next.js will try port 3001, then 3002, and so forth until it finds an unused port.

Add your app’s URL to Makeswift

Finally, open the Makeswift builder, navigate to Settings > Host, and add your app’s URL. If you haven’t changed anything in the example and the server is running on port 3000, the app’s URL should be http://localhost:3000.

When you’re ready to deploy, set up a separate site and use your deployment URL instead of http://localhost:3000. You can keep this site for local development.

Start building

Great job! You should be able to create a page in Makeswift and start dropping in registered components from the left toolbar.

Next Steps

Here are a couple of ideas for what you might want to do next.