Arguments

  1. pathname
    string
    required

    The path of the page.

  2. options
    object
    required

    Options for site version and locale.

Return type

snapshot
Promise<MakeswiftPageSnapshot | null>

An opaque Snapshot object that is only intended to be rendered by the <Page> component.

Examples

Basic usage

The following example sets up a catch all route where page snapshots are fetched from Makeswift and rendered using the <Page> component.

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} />;
}

Localization

The following example uses the locale param in getStaticProps to fetch a localized snapshot of a page.

src/pages/[[...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} />;
}

Changelog

VersionChanges
v0.24.0Adds allowLocaleFallback option
v0.11.0Adds locale option
v0.2.0getPageSnapshot method introduced

Arguments

  1. pathname
    string
    required

    The path of the page.

  2. options
    object
    required

    Options for site version and locale.

Return type

snapshot
Promise<MakeswiftPageSnapshot | null>

An opaque Snapshot object that is only intended to be rendered by the <Page> component.

Examples

Basic usage

The following example sets up a catch all route where page snapshots are fetched from Makeswift and rendered using the <Page> component.

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} />;
}

Localization

The following example uses the locale param in getStaticProps to fetch a localized snapshot of a page.

src/pages/[[...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} />;
}

Changelog

VersionChanges
v0.24.0Adds allowLocaleFallback option
v0.11.0Adds locale option
v0.2.0getPageSnapshot method introduced