​
Props

​
snapshot
Snapshot
required

The Makeswift snapshot to render.

​
metadata
boolean | PageMetadataSettings
default:"true"

Controls which page metadata from Makeswift are rendered in the <head> of the page.

​
Example

​
App Router

The following example sets up a catch all dynamic route in the app router under [[...path]]/page.tsx.

src/app/[[...path]]/page.tsx
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { notFound } from "next/navigation";
import { Page as MakeswiftPage } from "@makeswift/runtime/next";

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

export async function generateStaticParams() {
  const pages = await client.getPages().toArray();

  return pages.map((page) => ({
    path: page.path.split("/").filter((segment) => segment !== ""),
  }));
}

export default async function Page({
  params,
}: {
  params: Promise<{ path?: string[] }>;
}) {
  const path = "/" + ((await params)?.path ?? []).join("/");
  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: getSiteVersion(),
  });

  if (snapshot == null) return notFound();

  return <MakeswiftPage snapshot={snapshot} />;
}

​
Pages Router

The following example sets up a catch all dynamic route in the pages router under [[...path]].tsx.

import {
  GetStaticPathsResult,
  GetStaticPropsContext,
  GetStaticPropsResult,
} from "next";

import {
  Page as MakeswiftPage,
  PageProps as MakeswiftPageProps,
  Makeswift,
} from "@makeswift/runtime/next";

import { client } from "@/makeswift/client";
import "@/makeswift/components";

type ParsedUrlQuery = { path?: string[] };

export async function getStaticPaths(): Promise<
  GetStaticPathsResult<ParsedUrlQuery>
> {
  const pages = await client.getPages().toArray();

  return {
    paths: pages.map((page) => ({
      params: {
        path: page.path.split("/").filter((segment) => segment !== ""),
      },
    })),
    fallback: "blocking",
  };
}

export type PageProps = MakeswiftPageProps & {
  previewMode: boolean;
};

export async function getStaticProps({
  params,
  previewData,
}: GetStaticPropsContext<ParsedUrlQuery>): Promise<
  GetStaticPropsResult<PageProps>
> {
  const path = "/" + (params?.path ?? []).join("/");
  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: Makeswift.getSiteVersion(previewData),
  });

  if (snapshot == null) return { notFound: true };

  return {
    props: {
      snapshot,
      previewMode: Makeswift.getPreviewMode(previewData),
    },
  };
}

export default function Page({ snapshot }: MakeswiftPageProps) {
  return <MakeswiftPage snapshot={snapshot} />;
}

​
Rendering metadata

By default, the <Page> component will render metadata tags in the <head> of your page with data provided in the visual builder, such as the page title, description, social image, etc. If you have other sources of truth for your page metadata, you can avoid collisions with Makeswift by controlling which fields are rendered with the metadata prop. By default, all metadata from Makeswift is rendered.

You can pass a boolean to disable or enable all metadata fields:

// Disable all Makeswift metadata fields
<Page snapshot={snapshot} metadata={false} />

For more granular control, you can pass a PageMetadataSettings object to specify which metadata fields should be rendered:

type PageMetadataSettings = {
  title?: boolean
  description?: boolean
  keywords?: boolean
  socialImage?: boolean
  canonicalUrl?: boolean
  indexingBlocked?: boolean
  favicon?: boolean
}

Pass true for a field to render it, or false to not render it. Omitting a field will result in it not being rendered. For example, to only render the title and description data from Makeswift:

<Page snapshot={snapshot} metadata={{title: true, description: true }} />

​
Changelog

VersionChanges
v0.23.3Added metadata prop
v0.0.1Released <Page> component