> ## Documentation Index > Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt > Use this file to discover all available pages before exploring further. # > The `` component takes a Makeswift runtime and provides it to the [``](/developer/reference/components/page) component for rendering snapshots. ## Props A Makeswift [runtime](/developer/reference/runtime/constructor). Determines which version of the site to render. If `null` is passed, then the published site content will be rendered. The children components to render.

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

This is required if your site supports more than one locale. ## Example The following example shows how the `` is used to implement the `` client component as outlined in step 9 of the [App Router Installation guide](/developer/app-router/installation). The `` is subsequently utilized in the App Router's [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts). ```tsx src/makeswift/provider.tsx theme={null} "use client"; import { runtime } from "@/makeswift/runtime"; import { type SiteVersion } from "@makeswift/runtime/next"; import { ReactRuntimeProvider, RootStyleRegistry, } from "@makeswift/runtime/next"; import "@/makeswift/components"; export function MakeswiftProvider({ children, siteVersion, }: { children: React.ReactNode; siteVersion: SiteVersion | null; }) { return ( {children} ); } ``` ```tsx src/app/layout.tsx theme={null} import type { Metadata } from "next"; import { draftMode } from "next/headers"; import { Inter } from "next/font/google"; import { getSiteVersion } from "@makeswift/runtime/next/server" import { MakeswiftProvider } from "@/makeswift/provider"; import "@/makeswift/components"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` The following example shows how to add a `` to a [Custom App](https://nextjs.org/docs/pages/building-your-application/routing/custom-app) as outlined in step 10 of the [Pages Router Installation guide](/developer/pages-router/installation). The `siteVersion` property is returned from `getStaticProps` in an optional catch-all route. ```tsx src/pages/_app.tsx theme={null} import type { AppProps } from "next/app"; import { ReactRuntimeProvider } from "@makeswift/runtime/next"; import { runtime } from "@/makeswift/runtime"; import "@/makeswift/components"; export default function App({ Component, pageProps: { siteVersion, ...pageProps }, }: AppProps) { return ( ); } ``` ```tsx src/pages/[[...path]].tsx theme={null} import { Makeswift } from "@makeswift/runtime/next"; export async function getStaticProps({ params, previewData }) { // ... const siteVersion = Makeswift.getSiteVersion(previewData); return { props: { // ... siteVersion, }, }; } ``` ## Changelog | Version | Changes | | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | | [`v0.25.0`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.25.0) | Replace the `previewMode` boolean prop with `siteVersion` |