Components
<Page>
The <Page>
component takes a Makeswift snapshot and renders React elements using components registered with the runtime.
Props
snapshot
Snapshot
requiredA 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";
type ParsedUrlQuery = { path?: string[] };
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: ParsedUrlQuery }) {
const path = "/" + (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
.
Was this page helpful?