> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# <Page>

> The `<Page>` component takes a Makeswift snapshot and renders React elements using [components registered](/developer/reference/runtime/register-component) with the runtime.

## Props

<ParamField query="snapshot" type="Snapshot" required>
  The Makeswift snapshot to render.
</ParamField>

## Example

### App Router

The following example sets up a [catch all dynamic route](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) in the app router under `[[...path]]/page.tsx`.

```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](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) in the pages router under `[[...path]].tsx`.

<CodeGroup>
  ```tsx 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} />;
  }
  ```
</CodeGroup>