​
Props

snapshot
Snapshot
required

A 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.

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()

  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.

import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next"

import {
  Makeswift,
  Page as MakeswiftPage,
  PageProps,
} from "@makeswift/runtime/next"

import { client } from "@/makeswift/client"

export const getStaticPaths = (async () => {
  const pages = await client.getPages()

  return {
    paths: pages.map((page) => ({
      params: {
        path: page.path.split("/").filter((segment) => segment !== ""),
      },
    })),
    fallback: "blocking",
  }
}) satisfies GetStaticPaths

export const getStaticProps = (async ({ params, previewData }) => {
  if (params == null) return { notFound: true }

  const path = Array.isArray(params.path) ? "/" + params.path.join("/") : "/"

  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: Makeswift.getSiteVersion(previewData),
  })

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

  return { props: { snapshot } }
}) satisfies GetStaticProps<PageProps>

export default function Page({
  snapshot,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return <MakeswiftPage snapshot={snapshot} />
}

Was this page helpful?

Localization<ReactRuntimeProvider>