getPageSnapshot

An instance method of the Makeswift client that fetches a snapshot of a Makeswift page at a given path. This snapshot is only intended to be rendered by the <Page> component.

Arguments

pathname

stringRequired

The path of the page.

options

objectRequired

Options for site version and locale.

Untitled

siteVersion

SiteVersionRequired

For App Router, this is the return value from calling getSiteVersion. For Pages Router, this is the return value from Makeswift.getSiteVersion.

locale

string

A valid locale string (ex. "en-US").

allowLocaleFallback

booleanDefaults to

Controls whether a request for a localized page should fallback to the default locale if the requested locale is not available.

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.

src/pages/[[...path]].tsx

1 import {
2   GetStaticPathsResult,
3   GetStaticPropsContext,
4   GetStaticPropsResult,
5 } from "next";
6 
7 import {
8   Page as MakeswiftPage,
9   PageProps as MakeswiftPageProps,
10   Makeswift,
11   type SiteVersion
12 } from "@makeswift/runtime/next";
13 
14 import { client } from "../../../../../makeswift/client";
15 import "../../../../../makeswift/components";
16 
17 type ParsedUrlQuery = { path?: string[] };
18 
19 export async function getStaticPaths(): Promise<
20   GetStaticPathsResult<ParsedUrlQuery>
21 > {
22   const pages = await client.getPages().toArray();
23 
24   return {
25     paths: pages.map((page) => ({
26       params: {
27         path: page.path.split("/").filter((segment) => segment !== ""),
28       },
29     })),
30     fallback: "blocking",
31   };
32 }
33 
34 export type PageProps = MakeswiftPageProps & {
35   siteVersion: SiteVersion | null;
36 };
37 
38 export async function getStaticProps({
39   params,
40   previewData,
41 }: GetStaticPropsContext<ParsedUrlQuery>): Promise<
42   GetStaticPropsResult<PageProps>
43 > {
44   const path = "/" + (params?.path ?? []).join("/");
45   const siteVersion = Makeswift.getSiteVersion(previewData);
46   const snapshot = await client.getPageSnapshot(path, {
47     siteVersion,
48   });
49 
50   if (snapshot == null) return { notFound: true };
51 
52   return {
53     props: {
54       snapshot,
55       siteVersion,
56     },
57   };
58 }
59 
60 export default function Page({ snapshot }: MakeswiftPageProps) {
61   return <MakeswiftPage snapshot={snapshot} />;
62 }

Localization

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

src/pages/[[...path]].tsx

1 import {
2   GetStaticPathsResult,
3   GetStaticPropsContext,
4   GetStaticPropsResult,
5 } from "next";
6 
7 import {
8   Page as MakeswiftPage,
9   PageProps as MakeswiftPageProps,
10   Makeswift,
11   type SiteVersion
12 } from "@makeswift/runtime/next";
13 
14 import { client } from "../../../../../makeswift/client";
15 import "../../../../../makeswift/components";
16 
17 type ParsedUrlQuery = { path?: string[] };
18 
19 export async function getStaticPaths(): Promise<
20   GetStaticPathsResult<ParsedUrlQuery>
21 > {
22   const pages = await client.getPages().toArray();
23 
24   return {
25     paths: pages.map((page) => ({
26       params: {
27         path: page.path.split("/").filter((segment) => segment !== ""),
28       },
29     })),
30     fallback: "blocking",
31   };
32 }
33 
34 export type PageProps = MakeswiftPageProps & {
35   siteVersion: SiteVersion | null;
36   locale: string | undefined;
37 };
38 
39 export async function getStaticProps({
40   params,
41   previewData,
42   locale,
43 }: GetStaticPropsContext<ParsedUrlQuery>): Promise<
44   GetStaticPropsResult<PageProps>
45 > {
46   const path = "/" + (params?.path ?? []).join("/");
47   const siteVersion = Makeswift.getSiteVersion(previewData);
48   const snapshot = await client.getPageSnapshot(path, {
49     siteVersion,
50     locale,
51   });
52 
53   if (snapshot == null) return { notFound: true };
54 
55   return {
56     props: {
57       snapshot,
58       siteVersion,
59       locale,
60     },
61   };
62 }
63 
64 export default function Page({ snapshot }: MakeswiftPageProps) {
65   return <MakeswiftPage snapshot={snapshot} />;
66 }

Changelog

Version	Changes
`v0.24.0`	Adds `allowLocaleFallback` option
`v0.11.0`	Adds `locale` option
`v0.2.0`	`getPageSnapshot` method introduced

An instance method of the Makeswift client that fetches a snapshot of a Makeswift page at a given path. This snapshot is only intended to be rendered by the <Page> component.

Arguments

pathname

stringRequired

The path of the page.

options

objectRequired

Options for site version and locale.

Untitled

siteVersion

SiteVersionRequired

For App Router, this is the return value from calling getSiteVersion. For Pages Router, this is the return value from Makeswift.getSiteVersion.

locale

string

A valid locale string (ex. "en-US").

allowLocaleFallback

booleanDefaults to

Controls whether a request for a localized page should fallback to the default locale if the requested locale is not available.

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.

src/pages/[[...path]].tsx

1 import {
2   GetStaticPathsResult,
3   GetStaticPropsContext,
4   GetStaticPropsResult,
5 } from "next";
6 
7 import {
8   Page as MakeswiftPage,
9   PageProps as MakeswiftPageProps,
10   Makeswift,
11   type SiteVersion
12 } from "@makeswift/runtime/next";
13 
14 import { client } from "../../../../../makeswift/client";
15 import "../../../../../makeswift/components";
16 
17 type ParsedUrlQuery = { path?: string[] };
18 
19 export async function getStaticPaths(): Promise<
20   GetStaticPathsResult<ParsedUrlQuery>
21 > {
22   const pages = await client.getPages().toArray();
23 
24   return {
25     paths: pages.map((page) => ({
26       params: {
27         path: page.path.split("/").filter((segment) => segment !== ""),
28       },
29     })),
30     fallback: "blocking",
31   };
32 }
33 
34 export type PageProps = MakeswiftPageProps & {
35   siteVersion: SiteVersion | null;
36 };
37 
38 export async function getStaticProps({
39   params,
40   previewData,
41 }: GetStaticPropsContext<ParsedUrlQuery>): Promise<
42   GetStaticPropsResult<PageProps>
43 > {
44   const path = "/" + (params?.path ?? []).join("/");
45   const siteVersion = Makeswift.getSiteVersion(previewData);
46   const snapshot = await client.getPageSnapshot(path, {
47     siteVersion,
48   });
49 
50   if (snapshot == null) return { notFound: true };
51 
52   return {
53     props: {
54       snapshot,
55       siteVersion,
56     },
57   };
58 }
59 
60 export default function Page({ snapshot }: MakeswiftPageProps) {
61   return <MakeswiftPage snapshot={snapshot} />;
62 }

Localization

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

src/pages/[[...path]].tsx

1 import {
2   GetStaticPathsResult,
3   GetStaticPropsContext,
4   GetStaticPropsResult,
5 } from "next";
6 
7 import {
8   Page as MakeswiftPage,
9   PageProps as MakeswiftPageProps,
10   Makeswift,
11   type SiteVersion
12 } from "@makeswift/runtime/next";
13 
14 import { client } from "../../../../../makeswift/client";
15 import "../../../../../makeswift/components";
16 
17 type ParsedUrlQuery = { path?: string[] };
18 
19 export async function getStaticPaths(): Promise<
20   GetStaticPathsResult<ParsedUrlQuery>
21 > {
22   const pages = await client.getPages().toArray();
23 
24   return {
25     paths: pages.map((page) => ({
26       params: {
27         path: page.path.split("/").filter((segment) => segment !== ""),
28       },
29     })),
30     fallback: "blocking",
31   };
32 }
33 
34 export type PageProps = MakeswiftPageProps & {
35   siteVersion: SiteVersion | null;
36   locale: string | undefined;
37 };
38 
39 export async function getStaticProps({
40   params,
41   previewData,
42   locale,
43 }: GetStaticPropsContext<ParsedUrlQuery>): Promise<
44   GetStaticPropsResult<PageProps>
45 > {
46   const path = "/" + (params?.path ?? []).join("/");
47   const siteVersion = Makeswift.getSiteVersion(previewData);
48   const snapshot = await client.getPageSnapshot(path, {
49     siteVersion,
50     locale,
51   });
52 
53   if (snapshot == null) return { notFound: true };
54 
55   return {
56     props: {
57       snapshot,
58       siteVersion,
59       locale,
60     },
61   };
62 }
63 
64 export default function Page({ snapshot }: MakeswiftPageProps) {
65   return <MakeswiftPage snapshot={snapshot} />;
66 }

Changelog

Version	Changes
`v0.24.0`	Adds `allowLocaleFallback` option
`v0.11.0`	Adds `locale` option
`v0.2.0`	`getPageSnapshot` method introduced

1	import {
2	GetStaticPathsResult,
3	GetStaticPropsContext,
4	GetStaticPropsResult,
5	} from "next";
6
7	import {
8	Page as MakeswiftPage,
9	PageProps as MakeswiftPageProps,
10	Makeswift,
11	type SiteVersion
12	} from "@makeswift/runtime/next";
13
14	import { client } from "../../../../../makeswift/client";
15	import "../../../../../makeswift/components";
16
17	type ParsedUrlQuery = { path?: string[] };
18
19	export async function getStaticPaths(): Promise<
20	GetStaticPathsResult<ParsedUrlQuery>
21	> {
22	const pages = await client.getPages().toArray();
23
24	return {
25	paths: pages.map((page) => ({
26	params: {
27	path: page.path.split("/").filter((segment) => segment !== ""),
28	},
29	})),
30	fallback: "blocking",
31	};
32	}
33
34	export type PageProps = MakeswiftPageProps & {
35	siteVersion: SiteVersion \| null;
36	};
37
38	export async function getStaticProps({
39	params,
40	previewData,
41	}: GetStaticPropsContext<ParsedUrlQuery>): Promise<
42	GetStaticPropsResult<PageProps>
43	> {
44	const path = "/" + (params?.path ?? []).join("/");
45	const siteVersion = Makeswift.getSiteVersion(previewData);
46	const snapshot = await client.getPageSnapshot(path, {
47	siteVersion,
48	});
49
50	if (snapshot == null) return { notFound: true };
51
52	return {
53	props: {
54	snapshot,
55	siteVersion,
56	},
57	};
58	}
59
60	export default function Page({ snapshot }: MakeswiftPageProps) {
61	return <MakeswiftPage snapshot={snapshot} />;
62	}