​
Props

​
snapshot
Snapshot
required

The Makeswift snapshot to render.

​
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;
  locale: string | undefined;
};

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

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

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

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

Was this page helpful?

Suggest edits