<Page>

Props

Snapshot

required

The Makeswift snapshot to render.

boolean | PageMetadataSettings

default:"true"

Controls which page metadata tags from Makeswift are rendered in the <head> of the page. More on this in the Rendering metadata section below.

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,
  type SiteVersion
} 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 & {
  siteVersion: SiteVersion | null;
};

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

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

  return {
    props: {
      snapshot,
      siteVersion,
    },
  };
}

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. By passing false, you can disable all Makeswift metadata fields from being rendered. This implies that you will manually handle rendering metadata on your own.

// 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. Each property is a boolean that indicates whether to render that specific metadata field.

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

Additionally, omitting a field will result in it not being rendered. For example, to only render the title and description data from Makeswift use the following:

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

Changelog

Version	Changes
`v0.23.3`	Added `metadata` prop
`v0.0.1`	Released `<Page>` component

Get started

Guides

Reference

Props

Example

App Router

Pages Router

Rendering metadata

Changelog

​Props

​Example

​App Router

​Pages Router

​Rendering metadata

​Changelog

Props

Example

App Router

Pages Router

Rendering metadata

Changelog